Column layouts

Column layouts are used to design and organize UI Builder pages.

This video shows you how to perform the following procedure.

Column layouts enable you to create useful and visually appealing pages in an experience. A column layout is a type of flexible container that can hold components. Column layouts are simple layouts that are preconfigured, enabling you to design an efficient and attractive page quickly. It's useful to define and set the structure of the page with column layouts before adding components.

Column layouts can have columns of equal or different widths.

You can configure the column layout as a whole and the individual columns within the layout. For example, set a different border width and color for a column layout and for the individual columns within the layout.

注:

Currently, hiding/showing columns in a column layout based on conditions isn't supported.

Add a column layout

Add a column layout in UI Builder to build structure and organize components on an experience page.

始める前に

Role required: ui_builder_admin

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page in UI Builder or open a page.
4. Select + Add content in the content tree.
5. Select one of the Basic options on the Layouts tab.
   
   The column layout appears on the stage so you can add components to the columns. See Add and configure components for more information.
6. Add additional column layouts above or below.
   • In the content tree, select and hold (or right-click) on a column layout name or select the Menu icon for a column layout. Then, select Add before or Add after from the list and select a layout.

     

   • On the stage, select a column layout, and then select the plus sign at the top or bottom.

     

Configure column layouts

Configure column layouts in UI Builder to add the appropriate number of columns and the look you want on an experience page.

始める前に

Role required: ui_builder_admin

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page in UI Builder or open a page.
4. If the page doesn't already contain a column layout, Add a column layout.
5. Add (up to a maximum of six) columns using the content tree, the stage, or the configuration panel.
   • In the content tree, select and hold (or right-click) on a column name or select the Menu icon for a column and then select Add column before or Add column after from the list.

     

   • On the stage, select a single column, select the Menu icon next to the column name, and then select Add column before or Add column after from the list.

     

   • On the stage, select and hold (or right-click) on a column and then select Add column before or Add column after from the list.

     

   • In the content tree, select a column layout and then on the stage select the + plus icon to add columns to the right side of the column layout.

     

   • In the content tree, select a column layout and then in the configuration panel use the + plus icon next to Columns to add columns to the right side of the column layout.

     

   注:

   Columns can be nested inside one another, but this level of complexity isn't often required on pages.
6. Rename a column by editing the column label from the content tree, the stage, or the configuration panel.
   • In the content tree, select and hold (or right-click) on a column name or select the Menu icon for a column, select Rename.
   • On the stage, select the Menu icon next to a column name, select Rename.
   • In the configuration panel, select the information icon next to the column name.

     

   Renaming columns can help you distinguish between different columns on the stage and in the content tree. If you have a complex page with many column layouts and columns, it is useful to rename columns.
7. To change the width of a column in a layout, select the column layout (in the content tree or on the stage), then drag a column divider on the stage left or right to make the column narrower or wider.
   
   The width percentages at the top of the columns change automatically as you drag the column divider. The percentages add up to 100%. When resizing a column, be aware of how much space the component or components within the column need. For example, list and form components usually don't display well in narrow columns.
8. Distribute columns in a layout evenly across the horizontal using the content tree, the stage, or the configuration panel.
   • In the content tree, select and hold (or right-click) on a column layout name or select the Menu icon for a column layout, and then select Distribute columns evenly from the list.
   • On the stage, select a column layout, select the Menu icon next to the column layout name, and then select Distribute columns evenly from the list.
   • Select a column layout (in the content tree or on the stage) and in the configuration panel select Distribute columns evenly.
9. Reorder columns (including their contents) within a column layout using the content tree or the stage.
   • In the content tree, select the column and drag it to a different position (a blue horizontal line shows where the column can be dropped).

     

   • On the stage, select a column header, drag the column to a different position, and drop the column into the drop zone defined by a vertical magenta line.

     

   If you reorder the column in the content tree the stage updates, and if you reorder on the stage the content tree updates.
10. Specify the amount of space between columns from the content tree, the stage, or the configuration panel.
    • In the content tree, select and hold (or right-click) on a column layout name or select the Menu icon for a column layout, select Layout from the list, and select a size option in Column gap.
    • On the stage, select a column layout, select the Menu icon next to the column layout name, select Layout from the list, and select a size option in Column gap.
    • Select a column layout (in the content tree or on the stage) and in the configuration panel select a size option in Column gap.

      

11. Select the Tree icon to navigate to a different layer of content, for example, from a column to the parent column layout or a child component.
    
12. Delete columns from the content tree or the stage.
    • In the content tree, select and hold (or right-click) on a column name or select the Menu icon for a column, and then select Delete column from the list.
    • On the stage, select a single column, select the Menu icon next to the column name, and then select Delete column from the list.
    • In the content tree, select a column layout and then in the configuration panel use the - minus icon next to Columns to remove columns from the right side of the column layout.
    For information about editing column spacing, see Set the gap between components in columns.

Set the gap between components in columns

In UI Builder, if a column contains multiple components, set the gap between the components.

始める前に

Role required: ui_builder_admin

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page in UI Builder or open a page.
4. If the page doesn't already contain a column layout, Add a column layout.
5. Within a single column, add two components
   1. In the content tree, identify a column and select + Add content under the column name.
   2. In the toolbox window, select a component, for example, Avatar.
   3. In the content tree, move your mouse over the name of the component you just added, select the open menu (three vertical dots) icon, and select Add after.
      
   4. In the toolbox window, select another component, for example, Button.
6. Select Save.
7. In the content tree, select the column to which you added the two components.
8. In the configuration panel, select a size option in Gap.
   
9. To specify an exact gap size in pixels, move your mouse over the Gap field, select the Use custom value (pencil) icon, and type in a number, for example, 300px.
   
10. To change between stacking the components and placing them next to each other in the column, select the Row or Column icon in Direction.
    

    To reverse the order and placement of the components in the column, select the Advanced (three horizontal dots) icon in Direction, and then select the Reverse option.

    

Set advanced column layout options

Set advanced column layout options in UI Builder including stack width and column layout height.

始める前に

Role required: ui_builder_admin

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page in UI Builder or open a page.
4. If the page doesn't already contain a column layout, Add a column layout.
5. Select a column layout containing two or more columns in the content tree.
   
6. To set a stack width, go to Configuration panel > Layout and select Show advanced layout options.
   注:

   Setting a stack width enables you to control how a page with column layouts looks in a narrow browser window, tablet, or mobile device.

   
7. Type a width in Stack columns below.
8. Select Save.
9. To test the updated stack width, select the arrow next to Preview and select Open URL path.
10. Reduce the browser window width to less than the stack width that you specified to check that the columns on the right move below the first column.
11. Close the browser tab that opened with the URL path.
12. To control column layout height, select a column layout with two or more columns in the content tree, go to Configuration panel > Layout, and select Show advanced layout options.
    注:

    Setting height is useful if your column layout contains a component that can be tall, like the List component.
13. Under Sizing, type numbers into one or more of the options (Height, Min. H, and Max. H), and set the sizing unit (for example, px, %, or em).
    
14. Select Save.
15. To test the updated sizing, select the arrow next to Preview and select Open URL path.
16. Reduce and expand the browser window height to test the specified values.
17. Close the browser tab that opened with the URL path.