Help
Join the Community
-
Documentation
Find detailed info about ServiceNow products, apps, features, and releases.
-
Impact
Drive a faster ROI and amplify your expertise with ServiceNow Impact.
-
Partner
Grow your business with promotions, news, and marketing tools for partners.
-
Store
Download certified apps and integrations that complement ServiceNow.
on - edited on by
MGOPW
Working with Layouts |
Layouts control how containers and components are organized on a page. An updated layout system was introduced in the San Diego release that provides for better performance and simplifies page customization. The new layout system allows users to configure CSS Flexbox or Grid layouts without editing code as well as using slots unlike the legacy layout system. The new layout system features a simplified content tree and a new styling panel for layout configuration and component styling.
Existing and custom pages may still utilize the legacy layout system, and can be upgraded to the new layout system using the built-in upgrade wizard. All new pages will use the new layout system once the instance has been upgraded to San Diego or later. Page developers are encouraged to test the layout migration in a sub-production instance and perform any necessary testing or changes as needed.
When using the upgrade wizard, no components, data resources, events, styling, etc. will be impacted, only the layout of the page itself. Some of the changes that will be made:
- Slots in legacy layout will be automatically migrated to the new layout.
- The structure of component containers are migrated to the new layout.
- Component styling is not impacted, though there may not be a one-to-one style migration based on how components were positioned.
- Selenium tests or tests utilizing absolute path to an element may break since the HTML DOM structure will be modified.
Visit the Upgrading layouts in UI Builder product documentation for more information the features of the new layout system and detailed information on what to look for after upgrading to a new layout.
If you're still using the legacy layout system, see the Layouts in UI Builder product documentation and the UIB Quick Start Guide video for Quebec.
Layout Systems |
Flexbox
Flexbox is a one-dimensional layout system in CSS. Flexbox is inherently flexible, which is perfect for when you do not know the size of your content. You can change the direction of your content in the layout in the following ways.
- Row: Left/right or right/left, depending on the direction your browser's default language works. Left/right is the case for an English browser.
- Row-reverse: Right/left or left/right, depending on the direction your browser's default language works.
- Column: Up/down or down/up
- Column-reverse: Down/up
- Justify content. Choose from Flex-start, Flex-end, Space-between, Space-around, or Space-evenly.
- Flex-start. Default. Items are at the start of the flex direction, similar to left-justified content.
-
- Flex-end. Items are at the end of the flex direction, similar to right-justified content.
- Space-between. Items are distributed evenly.
- Space-around. Items are distributed evenly with equal space around them.
- Space-evenly. The spacing between items is equal.
- Align items. Decide how you want your flex content displayed along the cross axis.
- Stretch. Default. Stretch your content to fill the container.
- Flex-start. Place your content at the start of the cross axis.
- Flex-end. Place your content at the end of the cross axis.
- Center. Center your content in the cross axis.
- Baseline. Align your content the same as your baseline alignment.
- Height. Set the height automatically, or manually.
- Width: Set the height of your flexbox items automatically or manually.
- Margin. Set your minimal distance between flexbox items.
- Padding. Set the padding for each side of your flexbox items.
See the Using Flexbox layouts in UI builder product documentation for instructions on how to use Flexbox for both the legacy and new layout system.
CSS Grid
CSS grid is the most powerful layout system in CSS. CSS Grid is built on top of a two-dimensional grid. CSS Grid gives you power over how you create your pages.
For example, you can have a grid with three columns and nine cells. Five slots are built on top of the grid. The header slot spans three columns and three cells. A footer slot also spans three columns and cells. And three slots exist in the middle columns, with the middle slot larger than the left and right slots.
To find out more about CSS grid layouts within your UI Builder instance, you can find them in the sys_uib_template table.
See the Using CSS Grid layouts in UI builder product documentation for instructions on how to use Grid for both the legacy and new layout system.
Working with Components |
Please visit the Next Experience® Components Library on the ServiceNow Developers site to explore further.
| Tip: When creating containers or components on a duplicated page or a page that is using a page template, give your components a naming scheme that is unique to your instance. For example, when creating scripts or variables, organizations usually provide some type of naming scheme to denote it is a custom script and not out of the box. If your company acronym or naming scheme for other parts of the instance is 'abc' you can provide the component id such as abc_open_task_single_score. Also ensure you are giving your components a label that helps developers navigate through the content tree. For example the label for the example above can be ABC Open Task Single Score or just Open Task Single Score. Labeling and naming components is considered best practice even when using custom pages. |
After creating a page or variant, start with setting the layout for the page. Using the new layout system in San Diego, either Flexbox or Grid can be chosen. After selecting a layout for the page, add containers to the page and configure the layout for each container. You can set the layout to Flexbox or Grid at the container level.
1. Select the Body of your page in the content tree to the left of the main page area. The content tree is a graphical look at how your page construction. Body is the top page-level. This can either be set to Flexbox or Grid using the new layout system.
2. Click the + symbol to add a container to the page. Configure the layout as needed in the container, in this example Flexbox is used.
3. To add a component either click the + sign in the container, or in the content tree click on the three vertical dots and select Add component after.
4. To add another component to the row either click the + sign next to the first component, or in the content tree click on the three vertical dots to the left of the first component and select Add component after.
5. Select Save often as you work.
6. Select Open to see a preview of what it looks like as a web page.
Add Styling to a Component |
Set CSS styles for a component to change its default appearance. The layout system in San Diego exposed many CSS properties that were previously configured by adding CSS code. If you're using the legacy layout system see the Add styling to a component using the old layout system.
1. Select a component or the container holding the component that you want to add styling to in the Content panel.
2. Select the Styles tab in the configuration panel.
3. In the Styles tab you can change the following CSS Properties, in San Diego these properties have been linked to theme the experience is using, or admins can choose their own properties.
- Alignment
- Height and width
- Margins
- Padding
- Background
- Border
- Shadow
4. Alternatively, you can edit the CSS by clicking the View and edit CSS link at the bottom of the Styles tab. For more information on the CSS properties that can be used see the Add styling to a component product documentation.
5. In the main header, select Save to save your changes.Add styling to a component in the Main Styles configuration panel.
Working with Variants |
A page variant is based on your page with content targeted for a different audience. For example, you can create a homepage for agents, and a variant of that page for managers of those agents. The variant exists at the same URL.
- Select Menu and select Create variant. Alternatively, you can click + Create next to Variants on the page as shown in the following image.
- On the Create a variant screen, in Variant name, enter the name of your variant. The name can be similar to your page name, or what you want it to be.
- Select Create to create your variant.
- Select Add audience to set the audience settings for your variant page to fit a specific role based on one or more criteria. The audience is important because it lets you assign your page variant to a specific role, group, and so on. The page shows different content based on the audience assigned to the page.
- Select Set conditions to set criteria that determines when the page variant displays to users.
- For more information on how to edit these conditions, see Edit conditions.
- Add an encoded query string in the Variant conditions field. The query string can be something like you see below.
This query string only shows this variant if the table field is incident, and the sys_id field is not -1. For more information on encoded query strings, see Encoded query strings. - Add an order for the condition in the Order field. You may want certain conditions to have a higher priority than others. The lower the number, the higher the priority.
- Select Done to create your page.
Working with Viewports |
Viewports are specialized components that enable you to extend your experience without needing to own the parent page in Next® Experience UI Builder. You can work with viewports in three ways:
1. Use a viewport component
2. Use a viewport-enabled tab
3. Add a viewport to the Contextual Sidebar component
Add a viewport component to your page to create separate content even if you do not own the content of the page itself. You can create subpages, specify audiences, or customize content with different data, routes, and screens. For more information about viewport components, see Viewport component.
Tab components can be replaced with Viewport-enabled tabs as a way to display third-party custom data, assign audiences, and create variants. For more information about viewport-enabled tabs, see Replace a tab with a viewport-enabled tab.
For more detail on viewports see the Work with viewports product documentation.
Add a viewport to your page
Adding a viewport to your page lets you create separate content that is viewed when you click a tab on your page. You create tabs within a component. Then, within those tabs, you can create custom pages or even third-party custom user interfaces. Follow the steps below to add a viewport to your page.
- Select your component and click Edit content to add a tab.
- Design the content for the tab. Notice you are designing it in the managed content mode of UI Builder and not on the page itself. You can build the tab just like you would build a page. You can add components, change layouts, and so on. This example shows adding a tab to a contextual sidebar component.
- Optional: Click the Config panel to edit the tab you created. When you add viewport tabs to a component in UI Builder, the Config panel changes to show the Tabs configuration. When you click a tab in the Config panel, the tab information changes in the corresponding component on the page.
Working with Modals |
Use modals in Next® Experience UI Builder with components to provide alerts or calls to action for a user. UI Builder comes with modals to save time and effort.
A modal window disables the main page in UI Builder. A modal keeps the page visible with the modal window displayed in front of it. Users must interact with the modal before they can return to the main UI Builder page.
UI Builder has preconfigured modals available. You can add a modal to your component. Then, configure the content of the modal, and how it displays on the screen. Add an event handler to the modal to perform an action when a user selects it. The action can alert a user about something, or ask a user to confirm an action. A modal is a way to ensure that a user knows what is happening. For example, a modal may ask a user to confirm a selection before continuing whatever action they are performing on the main page.
Adding a Modal to your page
- Add a component to your page, such as a button component. See Add components to a page for more information.
- Add a modal to the component. A modal is a screen that appears when you click a component such as a button.
- Select the component to highlight it, either in the content tree, or on the page itself. When you highlight a component, you can configure it.
- Select + Add > Modal in the content section.
- Choose a modal type such as Confirm. You can choose from the six modal types.
Modal Types
Modal |
Description |
| Alert | An Alert modal provides information relating to the component action. For example, when a user presses a delete button, you could have an alert pop-up that lets the user know they cannot undo a delete action. |
| Confirm | A Confirm modal asks a user to confirm the component action. For example, when a user presses a delete button, the user would have to confirm the deletion of data. You can choose the confirm options from the primary and secondary button label fields, such as Yes/Cancel. |
| Confirm and destroy | A Confirm and destroy modal is more directive, usually relating to deleting or erasing content. It lets the user know the seriousness of an action, and asks them whether they want to proceed with the action. |
| Custom | Custom modals address scenarios that are not handled using the standard modals. Custom modals can be thought of as a container component on a modal. You can add a custom layout, components, events, and data resources just like you do on a page. The custom modal uses layouts to let you fully design what information you want in the modal. Layouts also decide where the information sits within the modal screen. You can use Cascading Style Sheets (CSS) styling to change the visual look of the modal. |
| iframe | Use iframe to bring content into your modal from existing iframe content from a URL and data. |
| Modal Viewport | Dynamically pass content into your viewport modal through an event binding using a client script. |
Event Handlers and Modals
Expose events to modals to handle call-to-action events. For example, a primary action, secondary action, and so on. You configure the data by adding an event handler and invoking a data resource. It is as simple as adding a new event handler for the component that has a modal. Or you can add an event handler to the modal itself. You select the event you want associated with the component or modal and add it. See Add modal to component for detailed instructions.
Preview a Page in UI Builder |
When you create or edit a page in UI Builder, you can open it as a preview to see what the page will look like as a web page. This is a great way to see how your page looks as you build it.
For example, if you add a Delete record button that opens a modal asking a user to confirm the deletion, you may want to open the page in runtime to ensure that the button and modal are displayed the way you want them to. To preview a page, first save your page, then select the Open button to the right of the URL field.
Your page will open as a web page. You can test your page as if it was live on a site. Click the components that you added to ensure they work as expected, check that the data resources are available, the layouts are set up correctly, and so on.
Previewing a page in UI Builder is a powerful tool to help you test your pages.
