1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work With Pages and Flows
  4. Add Dynamic Components to Pages
  5. Add a Dynamic Container to a Page
  6. Add Fragments as Sections in a Dynamic Container

Add Fragments as Sections in a Dynamic Container

You can use existing fragments to define sections in a dynamic container. You also have the option to define a fragment as preferred content for sections.

  1. With your page open in the Page Designer, drag the Dynamic Container from the Components palette onto your canvas. Here's a dynamic container with the Default Section removed.
    Description of dyncontainer-default.png follows
    Description of the illustration dyncontainer-default.png

  2. Add a fragment as a section to the dynamic container. Make sure the fragment already exists and is tagged pageContent, so it becomes available for selection in a dynamic container.
    • To add an existing fragment as a section, in the Display Logic section, click Add Section next to Sections under Case 1 (or other Cases as defined), then select a fragment in the drop-down list. This list displays all pageContent fragments (default tag), including the Shell Header and Shell Footer created automatically by web app templates. Other unused sections (including the Default Section) are also listed.
      Description of dyncontainer-fragmentslistdefault.png follows
      Description of the illustration dyncontainer-fragmentslistdefault.png

    • To set a particular fragment as preferred content for all sections in the dynamic container:
      1. From the Section Fragment list, select the fragment you want to make available to a section. This list displays all pageContent fragments (default tag).
      2. In the Display Logic section, click Add Section next to Sections under Case 1 (or other Cases as defined), then select the preferred fragment in the drop-down list. Only the fragment specified as the Section Fragment can be added to the section (in addition to any unused sections).

      Description of dyncontainer-fragmentslistpreferred.png follows
      Description of the illustration dyncontainer-fragmentslistpreferred.png

    Let's say you have a foldout layout with a dynamic container and you want to use fragments as sections to define different foldout panels. You would simply select your fragment (Panel Fragment, in our example) as a section. Here's an example of a panel fragment used to add two sections, each to define two panels in a foldout layout:
    Description of dyncontainer-fragmentpanels.png follows
    Description of the illustration dyncontainer-fragmentpanels.png

  3. Select each section and configure its content (fragment) to suit your requirements. For example, select the first Panel Fragment and change its title to make the panel more identifiable, say, to User Panel. Then click Fragment Container in the Structure view to view the contents of the fragment being used as the User Panel and configure it as desired.

    Repeat the steps to configure the second Panel Fragment; this time, say as Contact Panel.

    If you click Return to Page, your dynamic container now displays the two panels as configured:
    Description of dyncontainer-fragmentpanelsresult.png follows
    Description of the illustration dyncontainer-fragmentpanelsresult.png