For complete details on all elements and components, see the ServiceNow® Developer site.

Data visualization components

The data visualization component is a container for available chart types for use in Workspace Builder home pages. Select the chart type to display data in different ways depending on your application. 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.

Filter components

Filters enable you to filter data visualizations without modifying the visualizations. Add a filter element when working with the home page in the canvas. Then select a table, field, and other properties to configure the filter. When a user selects one or more values of the field, the filter applies to those data visualizations that are based on the same data source.

Heading components

Heading components are available in the home pages for workspaces. Add a title to your landing page using a heading component.

The following image shows the heading, My Heading, as the title for a landing page.

The following image shows a "My Heading" heading.

The following table explains the heading component parameters.

Tabela 1. Heading component parameters

Parameter	Description
Component name	Name that appears in the component controls above a component in the Stage pane. The maximum number of characters is 18.
Label	Text of the heading.
Style	Size of the heading text.
Disable text wrap	Toggle to wrap or not wrap the heading text. If you set the heading text not to wrap and the heading is wider than the landing page, UI Builder truncates the end of the heading and appends an ellipsis. If the user widens the landing page, more of the heading text appears.
Hide bottom margin	Toggle to show or hide a blank line below the heading text.

For more information on heading components, see the Heading Overview on the Developer site.

Image components

Add images to your landing page with an image component.

When you drag the image component icon () into the preview pane, a stock image appears that you can change and resize. You can change the stock image by supplying your image's URL.

The following table explains the parameters of the image component.

Tabela 2. Image component parameters

Parameter	Description
Component name	Name that appears in the component controls above a component in the Stage pane. The maximum number of characters is 18.
Alt Text	HTML Alt element that labels images so they are WCAG compliant.
Image URL	URL for the image.
Fit	Image size control. Expand to fill zooms in or out on the image in both X and Y axes proportionally so the image fills the container. Stretch to fit zooms in on the image so it fills the container but the image does not expand proportionally. Keep original size displays the image in its original size, which may be larger or smaller than the container.
Position	Location of the image in the container. For example, Bottom-right places the image at the bottom-right of the container. This parameter only works when the image is smaller than the container.
Height	Height of the image measured by the number of pixels high. If this height is shorter than the image height, the parameter cuts off the top of the image. The width is not reduced proportionally.

For more information on image components, see the Developer site image component listing.

List components

Use a list component to add lists to your landing page.

When you drag the list component icon () into the preview pane, a sample list appears.

The following table explains the list component parameters. Use the previous image for the location of the parameter values in the list component.

Tabela 3. List component parameters

Parameter	Description
Component Name	Name that appears in the component controls above a component in the Stage pane. The maximum number of characters is 18.
List Title	Title of your list.
Table	Database table hat the records come from that appear in the list.
Query	Button that you use to open the condition builder, which enables you to filter the records that are included in the list. For example, you might display only list records from Table that satisfy the conditions: Active is true and Priority is 1 – Critical. The badge and count icon () show the number of filters applied. If there is no badge, there are no filters.
Columns	Number of columns that you specify to appear in the list instead of the default columns. Use the parameter multiple times to display multiple columns.
Max Rows	Maximum number of rows that you specify to appear in the list. The default is 5. The maximum is 100.
Max Columns	Maximum number of columns that you specify to appear in the list. The default is 5. If the number of columns is greater than the value of this parameter, only the first columns appear.
Hide Header	Toggle to show or hide the list's header.
Hide Title	Toggle to show or hide the list's title.
Hide Badge with Record Count	Toggle to show or hide the list's badge and record count. The number is the total number of records in the list. Only some records may be seen in the current display.
Hide Refresh Button	Toggle to show or hide the refresh button.
Hide "Last Refreshed" Text	Toggle to show or hide the "Last refreshed" text.
Hide Links	Toggle to make the values in the Number column links or not. If they are not links, the number text is black. In the following image, the numbers in black are not links. The numbers in green are links.
Hide "View All" Footer	Toggle to show or hide the "View all" link in the footer.
Hide Highlighted Values	Toggle to show or hide highlights that have been configured to appear in specified list fields..
Hide Empty State Image	Toggle to show or hide the image that appears when filter conditions prevent any records from appearing in the list. The intention is to show a response so agents realize that the list is empty. You cannot change the image.

For more information on list components, see the Developer site List component reference.

Rich text components

Add text to your landing page with a rich text component to explain parts of your landing page, for example, "Tackle these priority 1 incidents first."

The following table explains the rich text component parameters.

Tabela 4. Rich text parameters

Parameter	Description
Component name	Name that appears in the component controls above a component in the Stage pane. The maximum number of characters is 18.
HTML	HTML editor that you use to enter text.

For more information on rich text components, see the Developer site Rich text component reference.