--- title: "Widgets" slug: "workspaces-widgets" updated: 2026-01-22T23:24:18Z published: 2026-01-22T23:24:18Z canonical: "docs.visualvault.com/workspaces-widgets" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.visualvault.com/llms.txt > Use this file to discover all available pages before exploring further. # Widgets ## Widgets ### **Overview** Widgets are small user interface components that display relevant information on a Workspace. Common widgets include standard elements such as header, text and HTML displays or VisualVault specific data such as form lists, document lists, and task lists. Administrators access the **Add Widget** modal from the [Workspace Manager](/v1/docs/user-guide-doc) by navigating to **Control Panel > Admin Tools > Workspace Manager**. The **Add Widget** modal contains a collection of widgets that Administrators can add to Workspaces. ### **Best Practices** - Determine which widgets best relate to a user group’s main purpose. Design Workspaces that include the most relevant and useful functionality from the widgets available. - Aim to create Workspaces that give users at a glance information and quick access to the content they need. Users value widgets that display meaningful content and offer useful actions to key areas of VisualVault. ### **Configuring Widgets** When designing a workspace’s widget container, widgets are added to a column by clicking the *Add Widget* button. You will then be presented with the **Add Widget** modal, where you will select a widget type and configure its settings. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(266).png) --- #### ***Form List*** ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(267).png) The **Form List** widget adds a [form data dashboard](/v1/docs/form-data-dashboards-master-document) to a workspace. 1. Begin configuring the widget by giving it a **Form List title** (or checking **Hide Title**) and selecting the existing **Form List** to display. There is also an option to select the rows per page. > **Note**: The [form list](/v1/docs/create-a-form-dashboard) must already exist in the customer database. 1. **Quick Search** is an optional mechanism that sets the default search condition on the form list. End users will be able to change this search condition as they interact with the form list. 2. **Query Filter** is an optional filtering mechanism that the end user cannot make changes to as they later interact with the form list. Users can still use the search feature on the form list, but they will only be shown form records that satisfy the query. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(191).png) --- #### *HTML Editor* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(268).png) The **HTML Editor** widget allows custom text or HTML scripts to be added to a workspace. 1. Begin configuring the widget by giving it a **Widget title** or check **Hide Title**. 2. By default, a standard **Rich Text Editor** is shown to add text elements. Clicking the **View Source** button ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(279).png) will allow editing in HTML. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(190).png) --- #### *Page Viewer* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(269).png) The **Page Viewer** widget displays a web page embedded in the workspace. 1. Begin configuring the widget by giving it a **title** or check **Hide Title**. 2. Paste the **Content URL** that will be displayed on the workspace. Select the **Height** of the embedded URL. The content URL can be either internal to the customer database or a site external to VisualVault. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(189).png) --- #### *Heading* The **Heading** widget adds a heading to the workspace. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(270).png) 1. Begin configuring the widget by giving it a **title** or check **Hide Title**. 2. Select the **Heading Size**. 3. View a **Preview** of the above settings. 4. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(187).png) --- #### *Text* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(271).png) The **Text** widget adds custom text to the workspace. For messages longer than a paragraph or text that requires additional customization, consider using the HTML Editor. 1. Begin configurations by typing the **Text to show**. 2. Adjust the **Font Size**, **Font Weight**, and **Font Style**. 3. View a **Preview** of the above settings. 4. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(192).png) --- #### *Image* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(272).png) The **Image** widget displays an image embedded on the workspace. 1. Paste the Image URL of the image to be displayed on the workspace. 2. Select the **Image Size** and **Alignment**. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(193).png) --- #### *Button* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(273).png) The **Button** widget adds a custom button to the workspace. 1. Begin configurations by typing the **Button label text**, specify where the button will take the user with the **Button link**, and determine if the button should **Open in new window/tab**. 2. The look of the button is adjusted with these settings. 1. **Variant** determines the color of the button. 2. **Size** determines to button size. 3. **Style** selections are filled, outline, or text. 4. **Has icon?** determines if an icon is added to the button and its location relative to the button text. 5. **Icon** selects the icon. 6. **Width** changes the button width. 3. A **Preview** of the button is shown here. 4. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(194).png) --- #### *Document List* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(274).png)The **Document List** widget adds a document list to a workspace. 1. Begin configuring the widget by giving it a **Document List Title (A)** or by checking **Hide Title (B).** 2. Select the **Document List Source (C).** 1. Selecting either *Frequently Used Documents* or *My Last Documents* will then present you with the simple set up options where you have options to check **Use Documents API to retrieve list data (D)** and **Show “View” Column (E).** 2. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(58).png) 3. Selecting *Saved Search* will require additional configuration settings as follows: 1. Select the **Saved Search (F)** to be displayed. The [saved search](/v1/docs/finding-documents) must already exist in the customer database.![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(285).png) 2. Optional configurations can be found in the **Display Fields (G), Column Styles (H), Document Upload Setup (I),** and **Query Filter Setup (J)** expandable sections. 1. **Display Fields (G)** allows you to select which fields to display and specify how documents should be ordered and/or grouped on the list. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(286).png) 2. **Column Styles** **(H)** allows you to set the minimum column width. Establish a minimum width for your chosen columns or allow the width to dynamically adjust to the content. By default, columns will automatically resize to fit their content. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(287).png) 3. **Document Upload Setup (I)** allows you to configure if file upload is allowed and where the document will be uploaded to. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(291).png) 4. **Query Filter Setup (J)** allows you to filter the documents shown on the list. You can either manually type the *Query Filter Text* or use the dropdowns and click the *Append Column and Field* button to append the selected items to the query filter. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(290).png) 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. --- #### *Analytics Dashboard* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(275).png)The **Analytics Dashboard** widget embeds an Analytics Dashboard onto a workspace. 1. Begin configuring the widget by giving it an **Analytics Dashboard title (A)** or by checking **Hide Title (B).** 2. Select the existing **Dashboard** to display. > **Note**: The [analytics dashboard](/v1/docs/analytics-dashboard-1) must already exist in the customer database. 1. **Querystring Parameters (D)** is an optional filtering mechanism that filters the data on the dashboard. 2. **Height (E)** determines the height of the dashboard on the workspace in pixels. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(59).png) --- #### *Report Viewer* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(276).png) The **Report Viewer** widget embeds a report onto a workspace. 1. Begin configuring the widget by giving it a **Report Viewer title (A)** or by checking **Hide Title (B).** 2. Select the existing **Report** to display. > **Note**: The [report](/v1/docs/report-designer-introduction) must already exist in the customer database. 1. **Querystring Parameters (D)** is an optional filtering mechanism that filters the data on the dashboard. 2. **Height (E)** determines the height of the dashboard on the workspace in pixels. 3. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(60).png) --- #### *User Task* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(277).png)The **User Task** widget adds a [User Task](/v1/docs/workflow-creation#actions) list to the workflow. 1. The only configurable setting on this widget is to give it a **User Tasks title (A)** or check **Hide Title (B).** 2. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(61).png) --- #### *Calendar* ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(278).png) The **Calendar** widget adds a calendar to the workflow. 1. The only configurable setting on this widget is to give it a **Calendar title (A)** or check **Hide Title (B).** 2. Click **Add Widget** once all configurations are complete to commit the settings and return to the workspace designer. ![](https://cdn.document360.io/10763bcf-f13e-488f-9c3e-d6737c42ab5e/Images/Documentation/image(62).png) --- ### FAQ #### **Can users customize their own workspace widgets?** No. Only administrators with proper access rights can create, modify, or assign Workspaces. End users can view and interact with the Workspaces assigned to them, but they cannot change the configuration. #### **Can I reuse a widget group across multiple Workspaces?** Yes. Administrators can save Widget Groups to reuse widget configurations. These features simplify deployment of consistent user interfaces. For more information, see [Widget Groups](/v1/docs/user-guide-doc#configure-widget-groups). > [!WARNING] > **Need help?** Please contact your organization’s VaultAdmin, for troubleshooting. If the issue remains unresolved, [**VisualVault Support**](https://support.visualvault.com/) is available to assist. ### **Related Articles** - [Form Lists](/v1/docs/form-data-dashboards-master-document) - [Document Lists](/v1/docs/finding-documents) - [Analytics Dashboard](/v1/docs/analytics-dashboard-1) - [Report Viewer](/v1/docs/report-designer-introduction) - [User Tasks](/v1/docs/human-task) A Workspace is a customizable web page within VisualVault that contains one or more tabs, each housing configurable widgets. Workspaces serve as shared home pages for user groups, allowing centralized access to data, tools, and functions. They replace the older Portal Pages and offer enhanced flexibility and performance using Angular-based components. A Widget Group, also known as a Widget Container Template, is a reusable configuration that includes a pre-defined set of widgets and their arrangement. Widget Groups allow administrators to apply consistent layouts across multiple Workspaces or tabs, streamlining the setup process and ensuring uniform user experiences.