Build pages for App Engine Studio-generated workspaces or custom web experiences using Next Experience Components and custom web components with ServiceNow UI Builder.
ServiceNow UI Builder
ServiceNow UI Builder is a tool for creating custom user interfaces in the ServiceNow platform.It provides a drag-and-drop interface for building custom forms, lists, and other user interfaces without writing code.With UI Builder, users can design custom interfaces using pre-built widgets, such as fields, buttons, and tables, as well as custom widgets and HTML, CSS, and JavaScript.
The custom interfaces created using UI Builder can be used for various purposes, including creating custom forms for entering data into ServiceNow, lists to display data stored in ServiceNow, & pages to display information and perform actions within the ServiceNow platform.It provides several built-in tools for testing and debugging custom interfaces, making it easy to ensure that they function as intended.
Key features of ServiceNow UI Builder.
Create pages for workspace or portal experiences
Create or customize pages for workspace and portal experiences. A page comprises components that make up a workspace or portal UI.
Create a variant of a page
Target experiences for different audiences. e.g. you can create a home page for agents and a variant for managers at the same URL.
Use a full library of components.
Build your pages using the UI Builder library components. Configure them any way you need and then connect your company data to them.
Connect data to your components.
Use data resources to dynamically expose your data from tables, records, or other elements on your page. Data resources let you reuse your components.
Modify the layout of a page.
Create any type of page design by changing the layout of the page. You can modify the different pages using different layouts.
Add styling to your component.
Use CSS to change the visual style in your workspace or portal experience. e.g., you can add a background color to a container component.
Change data visualization in UI Builder Change data visualizations
Drop-down to preview different data visualization types. Each data visualization displays different data depending on who is using your experience.
Exploring UI Builder
Explore facets of UI Builder to set you up for creating pages quickly. You can get a lot of different features to create a better visualization & experience.
Now Code Editor
Modify UI configuration, data resource configuration, styles, events, and client-side and server-side scripts in Next Experience UI Builder components.
Using UI Builder
Get a full understanding of everything you can do when creating a page for your workspace or custom portal experience in UI Builder.
ServiceNow UI Builder Components
Fields
Basic building blocks of custom forms to collect user data. ServiceNow UI Builder includes a variety of fields to collect specific types of data.
Buttons
Used to perform actions within custom interfaces, such as submitting data, navigating to other pages, or triggering JavaScript events.
Tables
Used to display data in a tabular format. It can be used to display data from a single record or data from multiple records.
Charts
Display data in a visual format. ServiceNow UI Builder includes a variety of chart types that can be used to display data in different ways.
Custom HTML, CSS, and JavaScript
ServiceNow UI Builder allows users to incorporate custom HTML, CSS, and JavaScript into their custom interfaces, providing even more flexibility.
Pre-built & Custom widgets
ServiceNow UI Builder includes a number of pre-built widgets, such as tabs, accordions, and models, to create custom interfaces.
Benefits of ServiceNow UI Builder
Management
Drag-and-drop interface
UI Builder provides a visual, drag-and-drop interface for building custom forms, lists, and other types of user interfaces.
Pre-built widgets
UI Builder includes a number of pre-built widgets, such as fields, buttons, tables, and charts, that can be used to create custom interfaces.
Custom forms
UI Builder can create custom forms for entering data into ServiceNow. Drag and drop fields, buttons, or other elements to meet needs.
Custom lists
UI Builder can create custom lists to display data stored in ServiceNow. Choose from various display options & customize the columns.
Custom pages
Display information and perform actions within ServiceNow. It includes elements, e.g. forms, lists, charts, custom HTML, CSS, JavaScript, etc.
Integration with ServiceNow Studio
UI Builder integrates with ServiceNow Studio, allowing users to build custom interfaces as part of a larger ServiceNow application.
Testing and debugging tools
UI Builder provides a number of built-in tools for testing & debugging custom interfaces, making it easy to ensure they function as intended.
Responsive to Mobile Device
UI Builder provides mobile-responsive design capabilities, optimizing custom interfaces for mobile device use.
Accessibility support
UI Builder supports accessibility features, such as screen reader compatibility, to ensure that custom interfaces are usable by all users.
Advanced styling options
UI Builder provides advanced styling options, custom CSS and themes to create custom interfaces matching specific branding needs.
How Can Aelum help with ServiceNow UI Builder?
Aelum Consulting is a Premier ServiceNow Partner specializing in ServiceNow platform consultation, development, implementation, checking, and more. We can help you with ServiceNow UI Builder by offering the following services:
Custom UI development
Our team of experts, proficient in HTML, CSS, & JavaScript, can create custom user interfaces for your ServiceNow platform using UI Builder.
UI Optimization
We can help you optimize the performance and scalability of your ServiceNow platform by optimizing the custom interfaces created with UI Builder.
Integration with other systems
We can help you integrate ServiceNow UI Builder with other systems and tools to create a seamless and unified user experience
Training and support
We can provide training and support to help you get the most out of ServiceNow UI Builder, including best practices and tips for creating effective custom interfaces.
Maintenance and updates
We can provide ongoing maintenance and updates to your custom interfaces, ensuring they remain functional and effective over time.
ServiceNow UI Builder Roles.
-
UI Builder Developer
Responsible for creating custom interfaces using the ServiceNow UI Builder. Developers can access the UI Builder and create, edit, and delete custom interfaces.
-
UI Builder Tester
Responsible for testing custom interfaces created using the UI Builder. Testers can access the UI Builder and test but cannot change the custom interfaces.
-
UI Builder Administrator
Responsible for managing the ServiceNow UI Builder, including setting up and managing user roles and managing access to the UI Builder and custom interfaces.
-
UI Builder End User
Responsible for using the custom interfaces created using the UI Builder. End users can not access the UI Builder and only use the custom interfaces created by developers.
Frequently Asked Questions
ServiceNow UI Builder and Service Portal are two different tools within the ServiceNow platform for creating custom user interfaces. Although both tools are used for similar purposes, there are some key differences between them:
- Purpose: ServiceNow UI Builder is primarily used to create custom forms and lists, while Service Portal is used to create custom portals and pages. Service Portal provides a more comprehensive solution for creating custom user interfaces, while UI Builder provides a more focused solution for creating custom forms and lists.
- Customization: ServiceNow UI Builder provides a drag-and-drop interface for creating custom forms and lists, making it easier to create custom interfaces. Service Portal provides more advanced customization options, including custom HTML, CSS, and JavaScript, making it a more flexible solution for creating custom portals and pages.
- Integration with other ServiceNow tools: ServiceNow UI Builder integrates with other ServiceNow tools, such as the ServiceNow Studio and ServiceNow Scripting, making it easier to create custom interfaces. Service Portal also integrates with other ServiceNow tools, but it provides a more comprehensive solution for integrating with external data sources.
- Performance: ServiceNow UI Builder is generally faster for creating custom forms and lists, while Service Portal is slower due to its more advanced features and customization options.
- User experience: Service Portal provides a more modern and user-friendly interface for custom portals and pages, while UI Builder provides a more traditional and functional interface for custom forms and lists.
Ultimately, the choice between ServiceNow UI Builder and Service Portal will depend on the specific requirements of the custom interface being created. Both tools provide a range of capabilities for creating custom user interfaces, but each tool is better suited for different types of custom interfaces.
You can create a variety of custom user interfaces, such as forms, lists, and dashboards within the ServiceNow platform.
The availability of ServiceNow UI Builder depends on the ServiceNow instance and the customer’s subscription plan.
Yes, ServiceNow UI Builder supports creating custom mobile interfaces for the ServiceNow platform.
To use ServiceNow UI Builder effectively, you should understand the ServiceNow platform well and have basic web development skills such as HTML, CSS, and JavaScript.
Yes. ServiceNow UI Builder can be integrated with other tools and systems using the ServiceNow platform’s integration capabilities.
Yes, ServiceNow UI Builder can be used to extend the functionality of existing ServiceNow modules by creating custom user interfaces.
The system requirements for using ServiceNow UI Builder depend on the ServiceNow instance and the specific requirements of creating custom user interfaces.
There is no limit to the number of custom user interfaces created with ServiceNow UI Builder. However, the performance and scalability of the ServiceNow platform may be affected if many custom interfaces are created and used.
Basic Building Blocks
- Layouts: Start by choosing the best layout, using powerful flexbox or CSS grid layouts for your use case.
- Components: Add elements to your page, which range from buttons and labels to more complex items like lists and forms.
- Modals: Use modals in combination with components to provide alerts or calls to action for a user.
- Custom Styling: Tune components with CSS to match your organization’s brand or create a custom look.
Bind and Map Your Data
- Binding Data with Data Resources: Bind your data to expose it from tables and records on your page dynamically, then bind data properties to create reusable components employable across portals and workspaces.
- Event Mapping: Map an event’s payload or contextual values to the object or handler that acts on that event. An event handler lets you configure an action for your page, components, data resource, or declarative action on your page.
Go deeper with custom scripting.
- Code Editor: Can’t find a pre-built solution? Further customize your pages with a rich-text editor that supports CSS, HTML, JavaScript, XML, and JSON.
Our Clients
