Adjusting component visibility in responsive authoring

When creating pages with responsive authoring for different form factors, learn how to show or hide components by completing steps to hide an image at mobile size.

Before you begin

Role required: ui_builder_admin

About this task

A method of increasing page usability is to hide components or show a different component across breakpoints. There are countless ways to use component visibility, but a few examples include:

• Use multiple button components horizontally across the top of a page for desktop and tablet size, but at mobile size, hide the buttons and show the dropdown component.
• Use a smaller button size for mobile size, but check that the buttons are large enough for users to press with a thumb. Consider changing the placement of buttons for mobile as well.
• Use images in desktop and tablet pages, but hide images, especially larger ones, in mobile.

In this procedure, show buttons across the top for the desktop and tablet form factors, but hide the buttons and use the dropdown component for mobile.

Procedure

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 from scratch with responsive authoring.
   For more information about how to create a page, see Create a page in UI Builder.
4. At the top, check that the desktop form factor icon is selected.
   
5. Add a column layout by selecting + Add content under Body in the content tree.
6. On the Layouts tab, select Single column.
7. Add the first button component.
   1. Select the + icon in the center of the new column on the stage.
   2. On the Components tab, find and select the Button component.
   3. In the configuration panel, select None - Configure the component manually.
   4. In the configuration panel, on the Configure tab, replace the default text in the Label field by entering Tasks.
      
   5. Select Save.
8. Add two more buttons by repeating step 7 twice and in 7d name the buttons Incidents and Changes.
   Note:

   To add the buttons, point to Button 1 in the content tree, select the menu icon, and then select Add after.
9. Check that the content tree and page are accurate.
10. Add some space around each button.
    1. In the content tree, select Button 1.
    2. In the configuration panel, select the Styles tab.
    3. In Spacing, select Margin.
    4. In the menu, select XS (extra small).
       
    5. Select Save.
11. Add space around the other two buttons by repeating step 10 for each.
12. Change the buttons from the vertical direction to the horizontal direction.
    1. Select Column 1 in the content tree.
    2. On the configuration panel, in Direction, select the row icon.

       

    3. Select Save.
    The page looks good at desktop width.
13. Select the tablet form factor icon.

    

    The spacing and position of the buttons also looks good at tablet width.

14. Select the mobile responsive authoring icon.

    

    The buttons use almost all the horizontal space at the smaller size.

15. Add the dropdown component.
    1. Select the desktop form factor at the top of the stage.
    2. Point to Button 3 in the content tree, select the menu icon, and then select Add after.
    3. On the Components tab, find and select the Dropdown component.
    4. In the configuration panel, select None - Configure the component manually.
    5. In the configuration panel, on the Configure tab, remove the default text in Placeholder text and select menu-outline in Icon.
       
    6. Select Save.
16. Hide the dropdown component at the desktop and tablet form factors.
    1. In the content tree, select Dropdown 1.
    2. In the configuration panel, on the Configure tab, select Component visibility to show the options.
    3. Select Hide component.
    4. Select Save.
17. At the mobile form factor, hide the button components.
    1. Select the mobile form factor icon at the top of the stage.
    2. In the content tree, select Button 1.
    3. In the configuration panel, on the Configure tab, select Hide component.
    4. Repeat steps b-c for Button 2 and Button 3.
    5. Select Save.
    Two locations show that the button components are hidden at mobile size. First, in the configuration panel, next to the Hide component option, select the mobile icon. A message is displayed to confirm that the value (hide component selected) is for the mobile size.

    

    Second, in the content tree, the three button components are displayed with the hidden icon.
18. At the mobile form factor, show the dropdown component.
    1. In the content tree, select Dropdown 1.
    2. In the configuration panel, on the Configure tab, select Hide component to clear the field.
    3. Select Save.
19. Select Preview.
    The mobile form factor is displayed with the menu icon. If you select the arrow, the default options are displayed (List item 1, List item 2, and so on). You would configure the dropdown component to display Tasks, Incidents, and Changes just like the horizontal buttons available at the tablet and desktop form factors.
20. Select the desktop and tablet form factor icons at the top.
    The desktop and tablet form factors only show the horizontal buttons, not the menu icon.
21. Close the preview overlay by selecting the X.