Ui Builder Patterns

What it does

This skill provides information and guidance on building user interfaces within ServiceNow's UI Builder framework. It explains key architectural concepts, terminology like Macroponents, Components, Data Brokers, Client State, and Events, and outlines common page structures used in Next Experience workspaces. The skill aims to help users understand how to construct and manage UI elements for ServiceNow applications.

When to use it

• When developing or customizing ServiceNow Next Experience workspaces.
• To better understand the hierarchy of components within a UIB application (App Shell, Chrome, Pages, Variants, Macroponents, Components, Elements).
• For troubleshooting issues related to data fetching and management using Data Brokers.
• When needing to understand how Client State and Events are used for page-level logic and communication.

Key capabilities

• Component Hierarchy Explanation: Describes the layered structure of UI Builder components.
• Key Concepts Glossary: Defines essential terms like Macroponent, Component, Data Broker, Client State, and Event.
• Page Structure Overview: Illustrates a typical page layout with Variants, Data Brokers, Client States, Events, and Layout sections.
• Data Broker Types & Examples: Explains different types of Data Brokers (GraphQL, Script, REST, Transform) and provides an example GraphQL query for retrieving incident data.

Example prompts

• "Explain the role of a Macroponent in ServiceNow UI Builder."
• "What are the different types of Data Brokers available in UI Builder?"
• "Can you show me an example of a GraphQL Data Broker query?"
• “Describe how Client State is used within a ServiceNow page.”

Tips & gotchas

• This skill focuses specifically on ServiceNow's UI Builder framework. Prior knowledge of ServiceNow concepts will be helpful.
• The provided examples are illustrative and may need to be adapted for specific use cases.