UI Builder tutorial

1. Select the + icon in the Pages section.

1. Select Create a new page.
2. Select Create from scratch instead.

1. Enter the name of your new page. The name can be anything you want. In this example, you can type My tutorial page.
2. In the Path field, a path is automatically entered based on your page name. In this example, the Path is my-tutorial-page. The path is the URL of the page. You can change this path to anything you want, but the path must be unique. The path has to be lowercase and contain no spaces. The URL preview shows what the path of your page will be.

1. Select a URL page type in the Type drop-down list. URL page types help you categorize and find important pages in the experience view.
2. Select Continue.
3. (Optional) Add parameters to your page URL.
4. Select Looks good.
5. Enter the name of your page variant. The name can be anything you want. In this example, you can type My first page variant.
6. Add an audience for the page variant by selecting + Add an audience. In this example, select Admin.
7. Select Continue.
8. On the next screen, select Build responsive.
9. Select Create.
10. After your page is created, the page editor screen appears. You can change advanced settings such as the URL settings and Variant settings. For this tutorial, you can skip these advanced options. For more information on changing advanced settings, see Create a UI Builder page: Advanced settings.

1. Select the Body level of the Content tree to highlight the page.
2. Select + Add content in the content tree.

1. Select the Two columns layout.

1. Select Add.
2. The two column layout appears.

Add a Button component to your page. Configure the button by changing the text and the way that it looks. Then change what happens when you click the button by adding an event handler for the button. The event handler adds an action to the button to link to the ServiceNow® home page. So when you click the button, the ServiceNow® home page opens in a new tab of your browser. For more information about configuring components, see Components.

1. Select the + on the bottom edge of the heading component that we added in the previous section.
2. Type Button in the search field.
3. Select the Button component in the list.

For more information on adding components to your page, see Table 1.

1. Select the component name in the configuration panel to see the Component label and Component ID. You can change these to anything you want, as long as they’re unique.
2. Configure the button component as follows.
3. Enter Home Page in the Label field to change the name of your button.
4. Change the Size to Large.
5. Enter home in the Icon search field.
6. Select Home Outline.
7. Add an event handler to configure what action applies to the button.
8. Select the Events tab in the configuration panel.
9. Under Button clicked, select + Add a new event handler.

• Under Inherited event handlers, select Link to destination.
• Click Select destination.
• In the Select destination screen, select External URL.
• Type your URL. For this tutorial, type https://www.servicenow.com Select OK.
• Select Add.

For more information about event handlers, see Manage actions in UI Builder pages.

1. Select Save. It is always a good idea to save your page often as you work.
2. Select Preview.
3. Test the button you created in the previous steps.

You can add components to the page in different ways. For more information on the ways you can add components to your page, see Table 1.1. Select the + button in the middle of the right column. 2. In the Search field, start typing Data visualization until you see the Data visualization component, then select the component to add it to your page. 3. Select the component name in the configuration panel to see the Component label and Component ID. You can change these to anything you want, as long as they’re unique. 4. Add a data resource to your data visualization component to bring in customer account data. - Select the data visualization component, then select the Configure tab. - Select Add data source. - Type Task [task] in the search field and look for a task that is available on your UI Builder instance. - Select Add this source.

1. Select Data visualization type drop-down and select Dial. You can choose a variety of visualization types to best suit your data.
2. Select Header and border in the configuration panel.
3. Enter My Tasks in the Chart title field.

1. In the far right corner of UI Builder, select Save.
2. Now that you saved your page, you can access it in your experience at any time.

1. Select Preview in the UI Builder header.
2. See the heading in the left column of your page.
3. Select the Home Page button. The ServiceNow® home page opens in another browser tab. Close the browser tab to go back to your preview page.
4. See the customer account data visualization in the right column of your page.

Congratulations! You completed the UI Builder tutorial.

Result

1. Created a page in UI Builder.
2. Changed the layout of your page to have two columns.
3. Added a Heading component as a title to your left column.
   • Changed the text of the heading.
   • Changed the label of the heading.
4. Added a button component below your heading component.
   • Configured your button.
   • Added an event handler for your button.
   • Added an event handler to set up a link to a web page. When you click the button, it opens the web page.
5. Changed the label for the right column.
6. Added a Data visualization component.
   • Configured the data visualization component.
   • Added a data resource to bring in task data.
7. Saved your new page.
8. Previewed your page.

Parent Topic:Exploring UI Builder