UI Builder Quick Bits

Table of Contents

• Understanding UI Builder Components
• Types of Components
• Bundled Components
• Component Configuration
• Out-of-the-Box UI Builder Components

Article Directory

Part 1 - Six Fundamental Features You Need to Know Part 2 - Navigating UI Builder Part 3 - Dynamically bind List with Data Visualization Part 4 - Implementing Popovers Part 5 - Updating Component's Data with a Button Part 6 - Simple Counter Application Part 7 - Interactive List and Form Configuration

Overview

This article is designed for new developers who want to get an understanding of the components in the UI Builder tool box. We’ll walk through the basics of components, explore their types, and link to a comprehensive list of the out-of-the-box components available in UI Builder.

Family Release: Xanadu

UI Builder Release: 26.2.74

Roles Required: admin

Authored by: @michaelburney

Understanding UI Builder Components

What is a Component?

A Component in UI Builder is a self-contained, reusable UI element that you can add to your page variants to configure dynamic user experiences. Think of it as a building block, ranging from simple text and images to complex and interactive elements.

Components are...

• Reusable Building Blocks: Use components to maintain a consistent design and functionality across your application.
• Configurable: Each component comes with settings for data bindings, styling, and event handlers.
• Responsive & Accessible: Components are built to be responsive across devices and adhere to accessibility standards.
• Integral to Experiences: Components work closely with pages, page variants, data resources, and events, making them a core part of the UI Builder experience.

Types of Components

UI Builder offers a diverse set of components, each designed for specific functions, such as:

Components for displaying data

• Examples: Rich Text, Images, Icons, etc
• Purpose: Present static or formatted content that informs or guides users.

Components for interacting with data

• Examples: Lists, Tables, Data Visualizations (e.g., reports), etc
• Purpose: Dynamically display data retrieved from ServiceNow tables, APIs, or scripts.

Components for data Input

• Examples: Input Fields, Forms, etc
• Purpose: Capture user input and trigger actions like form submissions or navigation events.

Bundled Components

What are they?

Component bundles are collections of related UI elements packaged together as a single unit to provide specific functionality for common use cases. You can easily identify them in the toolbox, as they will be highlighted in yellow to communicate that they are bundled elements.

• Examples:
  
  • A bundled component might include data controllers, events, and properties to deliver a cohesive user experience.
    
  • A few Out-of-the-Box Component Bundles: Form, Record List, Playbook Stacked Vertical, etc
• Features:
  
  • Built-in data binding and event handling to quickly set up advanced interactions.
    
  • Maintained as part of the overall UI Builder toolbox, ensuring consistency and ease of updates.

Component Configuration

Configuring components in UI Builder is essential for creating tailored experiences, so it's important to keep the basics of component configuration in mind.

• Layout: Components are organized within layouts (e.g., Flexbox or Grid containers) to create structured and cohesive interfaces.
• Style Customization: Use the style panel to adjust CSS styles using the intuitive WYSIWYG properties provided, ensuring components align with your brand guidelines. If you need more in depth CSS configuration, you can scroll down to the bottom of the Styles panel and edit the CSS directly.
• Event Handling: Components can emit events (e.g., a button click) or listen for them, enabling interactive experiences based on interaction.
• Property Configuration: Easily edit attributes like text, color, and size using the component’s configuration panel. Events are super important - if your component isn't behaving how you'd expect it to, see if the events are configured correctly.
• Data Binding: Components configurations can be dynamically set depending on logic outside of the component itself, using controllers or presets, or directly from a Data Resource.

Out-of-the-Box UI Builder Components

ServiceNow provides a robust library of pre-built components that you can leverage to jump-start your development. If you want more information on how they work, are configured, and other important things like accessibility and localization, check out the component documentation over on our new Horizon Design System site!

It is the new repository for the UI Builder component reference documentation, and we will be building it out more and more through our releases!

What components would you like to see us document? Leave a comment below!

Conclusion

Congratulations! 🎉 You've successfully started your UI Builder learning adventure and equipped yourself with knowledge you'll need through your journey.

If you like this type of content, please mark the article "Helpful", and leave us your topic ideas in the comments.

Keep an eye out for future tutorials where we’ll dive deeper into crafting immersive, data-driven experiences. Until then—happy designing, and stay curious!

Check out the Next Experience Center of Excellence for more resources