Customize a workspace home page in Workspace Builder
Edit the home page for a workspace in Workspace Builder. Adjust what users see when first accessing the workspace, which is a dashboard.
This video shows you how to perform the following procedure.
Before you begin
Role required:
- admin or Guided Application Creator for ServiceNow Studio.
- sn_app_eng_studio.user or delegated_developer for AES. For more information, see Delegate developers using AES.
About this task
You can edit workspace home pages in Workspace Builder only for workspaces created in Tokyo and going forward. You can edit older workspaces in UI Builder.
Note: The home page is an essential part of the workspace, and thus can't be hidden or removed.
Procedure
Navigate to Workspace Builder.
For details on how to open Workspace Builder in ServiceNow Studio or AES, see Accessing Workspace Builder.
Add an element to the page.
You must be in the Navigation configuration tab. If you're already in the Navigation configuration tab, you can't select it.
- In the navigation panel, select Home.
Image omitted: workspace-builder-1-purple.png
Workspace Builder home page
Workspace Builder home page
2. In the home page canvas, select **Add new element**.
3. From the list, select the element or component that you want to add.
For example, to add a graphic of data from the specified table, select **Data visualization** and choose a **New data visualization** or a **Saved data visualization**.
You can add the following elements to the home page in Workspace Builder.
| Element | Description | More information |
|---|---|---|
| Data visualization | Graphic, visual representation of current instance data. You can create a new data visualization or repurpose an existing data visualization by choosing it in the Select visualization from library modal and selecting Add to dashboard.In addition to data visualizations, you can select the Library element to add an already-saved data visualization to the home page. | - Data visualizations in Platform Analytics - Create a single score data visualization - Developer site data visualization component listing |
| Filter | Refine the visualizations on a dashboard based on specified criteria. The filters can apply to both tables and indicators. | - Filters in Platform Analytics - Developer site filter component listing |
| Heading | Title or text for the top of the home page or section. | Developer site heading component listing |
| Image | Static or animated images or pictures for the workspace. | Developer site image component listing |
| List - Simple | Table data that you can customize for the dashboard audience. | - Simple List widget or List - Simple Usage - Developer site - Developer site List - simple component listing |
The [Workspace Builder components for home pages](workspace-builder-components-ref.md) has details on home page elements. For more information, see [Exploring Platform Analytics dashboards](../../now-intelligence/ac-elements.md).
If you want to include additional elements that aren't available in the **Add new element** menu, you must edit the workspace in UI Builder. For a complete list of elements you can add in UI Builder, see the components documentation on the [ServiceNow](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?availability[]=Draft&availability[]=In+Progress&availability[]=Available&categories[]=Dev-Design+System&releases[]=utah&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades).
The element appears on the dashboard, where you can make edits.
4. Drag the element to move or resize it.
5. In the canvas header, select **Save**.
- If needed, complete any additional changes to an element.
| Edit an element |
A header appears with the name of the element type. Image omitted: wb-data-viz-purple-new.png Data visualization element to be edited</p>
Note: You can also select the context menu icon ( Image omitted: context-menu-icon-purple.png Context menu icon to display options) and select <strong>Configure</strong> to edit the element.</p>
For example, if you're editing a data visualization, you must specify the source table. For more information on editing components, see Add and configure components.
|
| Copy an element to reuse on the home page | Select the context menu icon ( Image omitted: context-menu-icon-purple.png Context menu icon to display options) and select <strong>Duplicate</strong> to copy the element. You can then make additional changes to the copied element.</td></tr><tr><td id="d222665e524"><strong>Add an element to the library for reuse</strong></td><td>Select the context menu icon ([Omitted image "context-menu-icon-purple.png"] Alt text: Context menu icon to display options) and select <strong>Add to library</strong> to include the element in your library to reuse on other dashboards.</td></tr><tr><td id="d222665e542"><strong>Delete an element from the workspace dashboard</strong></td><td><ol> A header appears with the name of the element type.
Image omitted: workspace-delete-element-purple.png Delete workspace element</p> Note: There's no confirmation message. The element disappears from the dashboard. |
- If needed, complete any additional configuration changes to the dashboard.
| Configure the dashboard layout | Select and drag an entire element to move it around the dashboard layout.Resize an element by selecting and dragging the handlebars \( Image omitted: wb-element-handlebars-purple.png Element handlebars to drag and resize\) in the lower corners of the element. | ||||||||||||||
| Duplicate the dashboard | To make a copy of the dashboard:- Select the more options icon for the dashboard ( Image omitted: wb-more-options-icon.png - Select Duplicate. - Enter the New name and Description for the copied dashboard on the modal. - Select Duplicate. Access the duplicated dashboard by exiting out of editing mode and selecting the new dashboard from the dashboard name drop-down menu. More options icon). Image omitted: wb-switch-dashboards.png Select the duplicated dashboard</td></tr><tr><td id="d222665e656"><strong>Add tabs to the workspace and edit them as needed</strong></td><td><ol> When you add your first tab to a home page dashboard, a new part of the layout appears below the title. Elements you add to the tab are visible no matter which tab the user is on. A tab labeled untitled is added next to any existing tabs.
Note: No confirmation message appears. The tab disappears from the dashboard. | ||||||||||||||
| Preview a workspace and make in-line edits | Make basic edits to a workspace when previewing it using the In-line editor.1. In the Workspace Builder header, select Preview. 2. In the preview that appears in a new browser tab, select Edit. 3. Adjust the home page elements and widgets by resizing, reorganizing, or reconfiguring them. For more information, see Edit Platform Analytics dashboards.
| ||||||||||||||
| Open a printer-friendly version of the dashboard | Select the more options icon for the dashboard ( Image omitted: wb-more-options-icon.png More options icon) and select <strong>Printer friendly</strong> to display the workspace home page in a format suitable for printing.</td></tr><tr><td id="d222665e783"><strong>Add a bookmark to Analytics Overview</strong></td><td>Select the more options icon for the dashboard ([Omitted image "wb-more-options-icon.png"] Alt text: More options icon) and select <strong>Add to bookmarks</strong> to include a bookmark for the workspace in the Analytics Overview Bookmarks section.</td></tr><tr><td id="d222665e806"><strong>Make additional or more advanced configurations to the home page</strong></td><td>In the configuration panel, select <strong>Open in UI Builder</strong>.</td></tr><tr><td id="d222665e818"><strong>Delete the dashboard</strong></td><td>Select the more options icon for the dashboard ([Omitted image "wb-more-options-icon.png"] Alt text: More options icon) and select <strong>Delete</strong>. You must select <strong>Delete</strong> again to conform.<strong>Note:</strong> Workspaces should have at least one dashboard home page.</td></tr></tbody>
Image omitted: wb-more-options-icon.png More options icon\) and select **Share**.
|