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.

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.

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.

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.

1. Select Menu and select Create variant. Alternatively, you can click + Create next to Variants on the page as shown in the following image.
   
2. 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.
3. Select Create to create your variant.
4. 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.
   
5. Select Set conditions to set criteria that determines when the page variant displays to users.
   
6. For more information on how to edit these conditions, see Edit conditions.
7. 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.
8. 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.
9. Select Done to create your page.

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.

1. Create or open a page.
2. Add a contextual sidebar component to your page. See Contextual Sidebar component setup for more information.
3. Select your component and click Edit content to add a tab.
   
4. 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.
   
5. 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.
   

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

1. Add a component to your page, such as a button component. See Add components to a page for more information.
2. Add a modal to the component. A modal is a screen that appears when you click a component such as a button.
   
   1. 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.
      
   2. Select + Add > Modal in the content section.
      
      
   3. Choose a modal type such as Confirm. You can choose from the six modal types.
      

Modal Types

| | | |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

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.