Add a Dynamic Container to a Page

A dynamic container lets you display content in individual sections, or logical regions of the page based on conditions that are evaluated at runtime. You define the UI elements or components displayed in each section, and then set the display logic conditions to determine which sections are displayed.

The display logic for determining what's displayed in a dynamic container is defined using cases. A case is similar to the rule sets used in dynamic forms and tables, but instead of selecting which fields to display, you select which sections to display. When you define a case, you specify the conditions for the case, and the sections you want displayed in the container when that condition is met. For each case, you can display any number of sections, so if a case defined two sections, you’d see two sections in the container.

The easiest way to learn how to configure a dynamic container is to examine a real use case. Let's say you want to create a page that lets users toggle two layouts, one showing a form for adding an employee and another showing a table of employees. To do this, you'd create a dynamic container with two sections: one for a dynamic form and another for a dynamic table. You'd then add a button that the user can click to toggle the sections displayed in the dynamic container.

Note:

Before you begin, make sure you've defined a data source, such as a business object or a service that calls a data object through a service connection. See Work with Business Objects or Manage Service Connections.

To add a dynamic container component to a page:

1. With your page open in the Page Designer, drag the Dynamic Container from the Components palette onto your canvas.
   In this image, you can see one section (Default Section) automatically created for you when you added the dynamic container. The Default Section section doesn't have any content yet, so you see the section's name on the canvas instead.
   

   
   Description of the illustration dynamic-container.png

   
   
2. Create sections for the dynamic container. In our example, we'll create two sections, one for a dynamic form and another for a dynamic table.
   1. In the Display Logic section in the Properties pane, click next to Sections under Case 1, then click + New Section to create a new section.

      Tip:

      You also have the option to use existing fragments as sections in your dynamic container. Fragments tagged as pageContent (default tag) are automatically listed in the Add Section drop-down (see Add Fragments as Sections in a Dynamic Container).

      You'll also see existing but unused sections, in addition to the Default Section.

   2. In the Create Section dialog box, give the section a name (for example, DynamicFormSection) and click OK.
      
      
      Description of the illustration dynamic-container-section.png
      
      
   3. From the Components palette, drag the Dynamic Form and drop it onto the section on the canvas, select the Quick Start you want to use in the Properties pane, and follow the prompts to associate the dynamic form with a data source and a rule set. Click Finish.
      
      
      Description of the illustration dynamic-container-sectionform.png
      
      

      Tip:

      Use the Data palette to try an alternative design approach, where you start with your data source's REST endpoints and leverage components that Visual Builder deems best to optimally display your data. For example, to display a create employee form, you can drag the Create endpoint from the Data palette onto the canvas. When the Render as pop-up appears, select an option (in this case, Create Form Dynamic), then follow the steps in the Configure as Create Form quick start to set up your form.
      

      
      Description of the illustration dynamic-container-data-create.png

      
      

      If you used the quick start to bind your dynamic form to a data source, the form will be rendered on the page with the fields you selected. You can change the form's fields by editing the dynamic form's layout in its rule set. If the form isn't bound to a data source, the section will contain a placeholder for the form because there won't be any data to render the form.

      Click Dynamic Container in the Structure view to see the dynamic form added as a component to the page and its properties displayed in the Properties pane:
      
      Description of the illustration dynamic-container-create-form.png
      

   4. In Case 1 in the Properties pane, click again, then click + New Section to create more sections; in our case, a section for a dynamic table.
   5. In the Create Section dialog box, give the section a name (for example, DynamicTableSection) and click OK.
   6. Drag the Dynamic Table from the Components palette onto the new section, click the Configure Layout quick start in the Properties pane, and follow the prompts to complete the setup. Click Finish.
      
      
      Description of the illustration dynamic-container-sectiontable.png
      
      

      Tip:

      Similar to using the Create endpoint to display a create form, you can use the Get Many endpoint to display your employee data in a dynamic table. From the Data palette, drag the Get Many endpoint onto the canvas, choose Table Dynamic in the Render as pop-up, then follow the steps in the Configure Layout wizard to set up your table.

      After using the quick start to bind the dynamic table to a data source, the Page Designer will render the table with the fields you selected. Again, if you don't bind the component to a data source, your dynamic table won't have any data to actually render on the page. Click Dynamic Container in the Structure view to see the newly added section:
      
      Description of the illustration dynamic-container-allsections.png
      

3. Set up the UI component and add the case logic to display your sections. Here, we'll add a Button component and a page variable to toggle the sections in the dynamic container.
   1. In the Variables tab, create a variable that you can use in your conditions. For example, a Boolean-type variable called layoutFlag, with the default value set to true.
   2. In the Page Designer tab, drag a Button component from the Components palette and drop it just above the Dynamic Container. Change its Text in the Properties pane to Toggle Layout.
   3. In the Button's Events tab, add an event listener for the ojAction event.
   4. Set the name of the new action chain as ToggleLayout, then build the action chain:
      • Drag and drop an If action onto the canvas and set its Condition to [[ $page.variables.layoutFlag === true ]] in the Properties pane.
      • Drag and drop an Assign Variable action onto the Add Action area of the if {{ $page.variables.layoutFlag === true }} block. Select layoutFlag from the Variable list and set the Value to false.
      • Drag another Assign Variable action and drop it onto the Create Branch area at the bottom of the if {{ $page.variables.layoutFlag === true }} block (the Create Branch area appears when you hover over the If action with another action). Select Assign Variable in the else block, then select layoutFlag from the Variable list and set the Value to true.

      
      

      
      Description of the illustration dynamic-container-actionchain.png

      
      
4. Return to the Page Designer to create another case in the dynamic container.
   1. Select the Dynamic Container component to view its properties in the Properties pane.
   2. In the container's General tab, click + Case to create another display logic condition, called Case 2. You can use to update the name as required.

      You can also duplicate a case if you want to create a new case containing the same sections.

      When you create the new case, it is added as the first case in the Display Logic tree, before Case 1. Remember cases are evaluated from the top down. So in our example, at runtime the conditions for Case 2 will be evaluated first.
   3. In Case 2, click + next to Sections and select the sections you want to display, DynamicTableSection in our example. Note how this previously defined section is available for selection.

      When you do this, you'll only see Case 2 rendered in the Page Designer, so in the dynamic container you'll only see DynamicTableSection, which contains the dynamic table:
      
      Description of the illustration dynamic-container-case2.png
      

   4. In Case 1, click next to DynamicTableSection in the list of sections to remove it from Case 1.
      
      
      Description of the illustration dynamic-container-case-removeitem.png
      
      
5. Preview how the different cases in your dynamic container will look using Layout Preview. Layout Preview forces a case to be temporarily rendered in the page for design purposes, regardless of its position in the case order and its condition.
   1. Click the icon for Case 1 in the Display Logic section:
      
      
      Description of the illustration dynamic-container-case1-preview.png
      
      
      Now the sections in Case 1 (Default Section and DynamicFormSection) are rendered on the canvas instead of the section in Case 2 (DynamicTableSection).
   2. Click Reset Override (or again) to remove the preview.
6. In the Condition field for Case 1, click to open the Expression Editor and change the default condition Always Show to the expression $variables.layoutFlag == true. In the Condition field for Case 2, enter $variables.layoutFlag == false:
   
   
   Description of the illustration dynamic-container-case2-conditions.png
   
   
7. Click Preview to preview the page, then click Toggle Layout to toggle the sections displayed in the dynamic container.