UI Builder Components
Components are the basic elements of a page. Once you have configured the layout of your page, you can begin to add components to its containers to bring it to life.
There are over 150 components available baseline to use within your experience. Refer to the Next Experience Components Library on the Developer site for a complete list and description of each one available.
They range from core components such as buttons and labels, to more complex experience components like Lists and Forms, to more specialized components such as Activity Stream, Kanban Board, Data visualization, and Tabs.
Adding Components
You can add components to a page within UI Builder in several different ways.
- Select the + icon within a container on the stage and choose a component from the list.
- Select the Components icon on the left vertical menu, then drag and drop a component to a container on the page.
- Select the + Add button on an existing component within the stage and choose a component from the list.
- Select the + Add component link from within the Content tree and choose a component from the list.
- Select a container within the Content tree, click the three vertical dots from the floating menu on the stage, and choose Add component after. Select a component from the list.
- Select a component within the Content tree, click the three vertical dots, and choose Add component after. Select a component from the list.
- Select a container or component in the Content tree, select +Add > Add component after from the top right of the Content tree, and select a component from the list.
Configuring Components
Once you have added a component to a page, you can use the Configuration Panel to customize them.
The Configuration Panel contains the following tabs:
- Config: Provides the ability to edit component properties.
- Styles: Allows you to add CSS to style the component.
- Events: Enables the setup of event handlers for the components.
Component visibility can also be configured by selecting the eye icon in the upper right corner of the Configuration Panel. Component visibility refers to when a component should be shown or hidden on a page.
The visibility is not based on the user viewing the page but rather on a property of the component itself. You can set the visibility based on a dynamic data binding value or a value generated via a script.
You can add conditions as well, using a wide variety of functions or logical operands that became available in the San Diego release.
See the example condition using the EMPTY operator, in the image on the right. A list of all supported operators can be found using the link below.
Set the Test value property to test what happens when the visibility is set to true, false, or none.
The Configuration Panel
Config Tab:
The Config tab contains the configuration properties available for the selected component. Every component has different configuration properties depending on its function.
For example, the List component requires that you specify a Table and each Column you want to display. The Data visualization component requires that you specify a Data source and a Visualization type, but also has optional properties regarding its display.
The Stylized text component only requires text to display.
The value for each configuration property can be specified using one of the following options:
- Static: Enter the data manually. The data does not connect to an external data source.
- Dynamic data binding: Specify a parameter that retrieves the value from another data source such as a page property, data resource, or client state.
- Script: Enter JavaScript code to generate and populate the property value.
Styles Tab:
In the San Diego release, the Styles tab was enhanced to simplify layout configuration and component styling.
You can modify several component/container style properties without needing to create or update CSS code, such as alignment, width, height, margins, padding, background, border, shadow, and more.
It is recommended to add styling to the wrapper or container of your component, rather than to individual components directly.
Common CSS properties used to style components
- background-color: Sets the background color of an element.
- background-image: Specifies a background image for an element.
- border-color: Sets the color of the border around an element.
- border-style: Defines the style of the border, such as solid, dashed, or dotted.
- border-width: Determines the width of the border.
- border-radius: Applies rounded corners to an element's border.
- box-shadow: Adds a shadow effect to an element.
- width: Sets the width of an element.
- height: Defines the height of an element.
- min-width: Specifies the minimum width an element can have.
- min-height: Specifies the minimum height an element can have.
- max-width: Defines the maximum width an element can have.
- max-height: Specifies the maximum height an element can have.
- margin: Controls the space around an element. It can set margin values for top, right, bottom, and left.
- padding: Determines the space between the content and the border of an element. It can set padding values for top, right, bottom, and left.
- overflow: Defines how content that overflows an element's box is handled (e.g., hidden, scroll, auto).
- z-index: Sets the stack order of an element, determining its position in relation to other elements.
Events Tab:
The Events tab is where an event handler can be added to the component. Event handlers add actions to components on your page when a corresponding event is triggered.
For example, a button component is static and does not do anything until you bind an event action to it. Event actions could include opening a modal or redirecting to another page when clicking the button.
Events and Event handling will be discussed further in the Events, Client State Parameters and Client Scripts lesson of this course.
TIP: When adding or configuring components, make sure you save your page! Use the Save button in the upper right-hand corner of UI Builder or use the Save hot key (ctrl+s or cmd+s).
Component Presets
Some components have predefined configuration values and event mappings available, called component presets.
These are built for common use cases, such as configuring heading and form components on a record page. Utilizing a preset allows you to configure a component quickly and simplifies page creation and maintenance.
If the controller required by a preset has not yet been added to the page, the preset prompts you to configure the controller's required properties before you can use it.
A controller is a type of data resource, which is used to fetch data in UI Builder. Presets make use of a controller to connect components to data and event mappings. They allow for the automatic wiring of the output of the controller to the properties of a component. Data resources are covered in more depth in the next lesson.
Once a controller has been added to the page, the components that have presets associated with the same controller appear highlighted in the components list. When you add one of these components, it will automatically be added with the preset. Preset values can be overridden, but in doing so, you assume ownership of the component configuration and maintenance.
Special Components
Viewports:
Viewports are specialized components that enable you to extend your experience without needing to own the parent page in UI Builder. You can work with viewports in three ways:
- add a viewport component to a page,
- add a viewport-enabled tab to a page, or
- add a viewport to the Contextual sidebar component.
Adding viewports within a Contextual sidebar component is unique because you design a viewport in the Edit content mode of UI Builder and not on the page itself.
Modals:
There are pre-configured modals available for use with components in UI Builder to provide alerts or calls to actions for a user. A modal window is displayed in front of a page that is visible but disabled. The user must interact with the modal before they can return to the page.
Modal Types in UI Builder
Alert Modal: An Alert modal is used to provide information related to a component action. For example, it can be used to inform users that a certain action cannot be undone. For instance, when a user presses a delete button, an alert modal can pop up to let the user know that the delete action is irreversible.
Confirm Modal: A Confirm modal is designed to ask the user to confirm a component action. For example, it can be used to confirm data deletion. The user would have to confirm the deletion action, and you can customize the confirmation options with primary and secondary button labels, such as "Yes/Cancel."
Confirm and Destroy Modal: The Confirm and Destroy modal is more directive and is typically used for actions that have serious consequences, like content deletion or data erasure. It emphasizes the significance of the action and asks the user whether they want to proceed with it.
Custom Modal: Custom modals are versatile and can address scenarios that standard modals cannot handle. They act as container components within a modal, allowing you to add custom layouts, components, events, and data resources, similar to designing a page. Custom modals use layouts to fully customize the information within the modal and determine its placement. You can also use Cascading Style Sheets (CSS) styling to change the visual appearance of the modal.
iFrame Modal: The iFrame modal is used to bring content into your modal from an existing iFrame source, typically through a URL. This is useful for displaying external web content within your modal.
Modal Viewport: With Modal Viewport, you can dynamically pass content into your viewport modal using event binding and client scripts. This allows you to update the modal's content dynamically based on user interactions and data changes.
Repeater Component:
The repeater component allows you to loop through a data set within an array and repeat one or more components using the values from that array. The repeater component allows you to bind values from the data array to the components contained within it.
Custom Components
If you require a component that isn't available in the Next Experience Components Library, pro-code developers have the option to design and craft custom components for use within UI Builder. To accomplish this, you'll need the following prerequisites:
- A fundamental understanding of component concepts, development, and design.
- Proficiency in JavaScript to define the component's behavior.
- Familiarity with the Node Package Manager (npm).
- The latest version of Node.js installed on your local machine.
- The ServiceNow Command Line Interface (CLI) installed on your local machine.
ServiceNow CLI
The ServiceNow Command Line Interface (CLI) is a JavaScript-based command-line tool that empowers you to create custom components in your local environment and subsequently deploy them to your instance for integration with UI Builder.
Setting up your local environment necessitates the installation of the Node.js JavaScript runtime environment, Node package manager (npm), and the ui-component extension.
ServiceNow CLI Features
The ui-component extension is an augmentation of the ServiceNow CLI, specifically designed for crafting custom components using the Next Experience UI Framework. With the ui-component extension, you can:
- Generate the essential files required for component development, often referred to as the project scaffolding.
- Launch a local development server for testing your component.
- Build a component project and deploy it to a ServiceNow instance.
"ServiceNow CLI is available on the ServiceNow Store. Navigate to store.servicenow.com to install it within your local environment."
You can find the ServiceNow CLI on the ServiceNow Store. To install it in your local environment, please visit store.servicenow.com.
Custom component development is considered an advanced topic, so we recommend consulting the Product Documentation and the Introduction to External Component Development course on Now Learning for comprehensive information on this process.
Creating Custom Components: For in-depth guidance on developing custom components using the Next Experience UI Framework and the ui-component extension, please refer to the PRODUCT DOCS.
ServiceNow CLI: To gain a deeper understanding of the ServiceNow CLI, which is a command-line interface facilitating instance operations from your local system, please explore the PRODUCT DOCS.
Introduction to External Component Development: For comprehensive training on developing an external component and deploying it to a ServiceNow instance, we recommend taking the Introduction to External Component Development course available on NOW LEARNING.
Declarative Actions
Declarative actions are advanced UI actions designed for applications built on the Next Experience UI Framework. They introduce custom functionality to your workspace and portal forms, fields, lists, and related lists, all without the need to write custom scripts or learn APIs.
Declarative actions manifest as buttons at the top of list and form pages, and as icons or decorators adjacent to fields. They enable you to create tailored actions to suit your use cases, such as initiating a custom modal or opening a new tab.
When defining a declarative action, you specify the event you wish to dispatch (e.g., creating a new custom record). However, it's essential to include an event handler so that the page knows how to respond to that event (e.g., opening a new tab).
Declarative actions are configured and created outside of UI Builder, typically within the platform view. Given their advanced nature, we won't delve into the process of creating them in this course. Nevertheless, you can explore the various foundational declarative actions by navigating to Now Experience Framework > Actions and Events > UX Form Actions, along with the modules within Workspace Experience > Actions & Components.
To further explore declarative actions, consult the Product Documentation using the provided link.
Creating a Declarative Action: For a detailed guide on creating a declarative action and associating an event handler, please refer to the PRODUCT DOCS.
Knowledge Test
Q1: What are the basic elements of a page?
- Containers
- Components
- App shells
- CSS
Q2: What is the Configuration Panel NOT used for when customizing a component?
- Editing component properties
- Adding CSS to style the component
- Defining page parameters
- Setting up event handlers for the components
Q3: The value for a configuration property can be specified using which of the following methods?
- Statically
- Using dynamic data binding
- Using script
- All of the above
Q4: When adding styling to a component, which method is recommended?
- Add styling to the wrapper of your component
- Add styling to the individual components directly
- Add styling only to the Theme being used
- Add styling only to the wrapper of your page
Q5: If you want a user to be redirected to a new page when they click on a button component, what do you need to define?
- Event
- Page parameter
- Event handler
- CSS
Q6: To create custom components, what type of developer is suggested?
- No-code
- Low-code
- Pro-Code
- All of the above
Next
Lesson 7 - Lab 1: Create an Experience