Additional Tips and Gotchas in UI Builder

In my previous post, I didn’t cover some important tips and gotchas due to the length of the article. Let’s dive into a few key aspects of working with UI Builder that are essential for a smooth development experience.

Styling Components in UI Builder

All styling for components can be managed from the Styles tab in the configuration panel on the right side of the screen. Common styles, such as positioning, margins, padding, and background colors, can be set directly within UI Builder without needing to write custom CSS. However, if you want to add more detailed styles, you can do so by using the Edit CSS button at the bottom of the Styles panel.

In my experience, the styling options in UI Builder are not as flexible as they were in the Service Portal, where Page CSS and Widget Instances offered more control. However, with the Yokohama release, reusable CSS classes can now be applied to UI pages, so the outlook for customization is improving.

For more details on how to apply styling to components, refer to ServiceNow’s documentation on UI Builder styling.

The Importance of Naming Conventions

Proper naming conventions for variables and functions are essential in software development to maintain code readability and organization. While it may seem less important when using a low-code interface like UI Builder, where the graphical interface is the primary navigation tool, a clear and consistent naming strategy is crucial.

There are cases where a Component may not be clickable—such as when there is no default content (as with a task_info Rich Text Component) or if the Hide component flag is set to true. In these scenarios, the only way to configure the component is by selecting it from the Component Tree. Without a well-structured naming convention, finding the correct component in the tree can be difficult.

While I won’t go into detail about how to add styling or name and label components, there is a great course available that covers these topics in depth: UI Builder Course on Creating Pages in UI Builder.

The Perils of Duplication and Copy-Paste

At the time of writing this post, UI Builder doesn't handle duplication and copying/pasting particularly well, leading to some odd behavior in certain situations:

  • Duplicating a Component in the Component Tree: If you duplicate a column and make changes to its configuration, the changes will often reflect in both the original and the duplicate components. For example, if you duplicate a column that contains a Rich Text component and then edit the HTML, the changes will be applied to both the original and duplicated components.

  • Copying and Pasting Client State Parameter Names: When creating multiple Client State Parameters with the same name, copying and pasting variable names can be a quick way to ensure consistency (especially for those of us who are prone to typos). However, if you copy a name to multiple parameters and then change a prefix or other part of the name, the change may unintentionally update all instances with that original name.

In these cases, be cautious when duplicating components or copying and pasting variable names to avoid unexpected results.