UI Builder tutorial
-
- UpdatedJan 30, 2025
- 8 minutes to read
- Yokohama
- Building applications
Learn how to use the basics of UI Builder to create a page called My Tutorial.
Before you begin
Role required: ui_builder_admin
In this UI Builder tutorial, you perform the following tasks to build a page in UI Builder:
- Start UI Builder.
- Create a page for your workspace or custom portal experience. For more information about creating pages, see Create a page in UI Builder.
- Change the layout of the page to have two columns. For more information, see Organize components in UI Builder pages.
- Build your page by adding two container components.
- Rename your container components in the content tree.
- Add a Heading component and a Button component to the first container. Add a data visualization component to the second container. For more information about components, see Customize UI Builder pages using components.
- Configure your components as follows:
- Link the button to the ServiceNow® website.
- Connect the Data visualization component to a data source to display task data. For more information about data resources, see Dynamically expose data in UI Builder pages (advanced feature).
- Save your page often.
- Preview your page to see how it looks in a browser.
Procedure
Result
- Created a page in UI Builder.
- Changed the layout of your page to have two columns.
- Added a Heading component as a title to your left column.
- Changed the text of the heading.
- Changed the label of the heading.
- 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.
- Changed the label for the right column.
- Added a Data visualization component.
- Configured the data visualization component.
- Added a data resource to bring in task data.
- Saved your new page.
- Previewed your page.