Configure a Dynamic Container
You can change the sections displayed in a container directly in the Properties pane, or use the container's rules editor if you want to use conditions to define which sections are displayed.
The easiest way to learn how to configure a dynamic container is to examine a real use case. Suppose the App UI developer of one of your dependencies has added a dynamic container and already defined a section. At runtime, the container will display the sections the developer has configured in the default built-in rule. Now let’s say that you want to also display a header that is always displayed in the container, so no conditions are needed.
If you don't need to define any rules or conditions in your container, you can modify the container's built-in rule directly in the Properties pane, to add, remove, and change the order of sections. This means that the sections listed under Displayed Sections in the Properties pane are always displayed. You can modify the container in the Properties pane if you see sections with handles listed under Displayed Sections in the Properties pane:
If you want the header displayed only when certain conditions are met, for example, when the current user is a manager, you'll need to use the rules editor to create a rule and define a condition.
Some containers might already have rules and conditions determining what is displayed. If you see All Sections instead of Displayed Sections in the Properties pane, this means the container already uses some rules in addition to the built-in rule, and you need to define the container's sections in the rules editor. The container in this image already uses two rules:
To customize the sections displayed in a container:
- Locate the container in the Properties pane.
The Properties pane lists all the sections that you can display in the container under Available Sections. These sections are usually defined in dependencies, but also includes sections defined in your extension.
Note:
If the Properties pane contains a Components tab with a list of dynamic components, select the dynamic container component in the list to open the container's details pane:
- Customize the container's sections without creating rules and conditions.
If the container already uses rules, skip to step 3 below to define the sections using the rules editor.
-
Add a section by hovering over the section in the Available Sections list and clicking
.
The section is added to Displayed Sections.
-
Re-order the sections under Displayed Sections by grabbing a section's handle and moving it into the position you want.
-
Remove a section from Displayed Sections by hovering over the section and clicking
.
-
- Define a container's sections using rules and conditions:
-
In the Properties pane, click + Rule to create a rule, or Rules to open the editor.
The rules editor displays a list of rules for determining the sections displayed in the container. Rules listed under Built-in Rules are defined in the extension dependency, and you cannot edit them.
When you create a rule, it is added to the list under Extension Rules:
To duplicate or delete a rule, right-click the rule in the list and select Duplicate or Delete in the popup menu.
When a rule is selected, you can also use the Duplicate and Delete buttons at the top of the editor.
-
Change the order your extension rules are listed by selecting the rule, and then dragging it into the position you want.
Rules are evaluated in order, from the top down. If a rule's conditions are met, the rule is applied, and none of the rules below it are evaluated. When you create a rule, it is added to the top of the Extension Rules list, so you need to make sure your rules are in the correct position.
-
Define the rule's conditions in the condition builder by selecting the rule, and then clicking Edit.
The condition builder is the same one used to create conditions in business rules. If you're not familiar with using the condition builder, see Set Conditions for a Rule.
-
Choose the sections you want displayed in the container when the rule's conditions are met.
- To include a section in the list of displayed sections, click the section's button in the Available Sections list.
- To remove a section, click .
To change the order the sections appear in the container, grab the section's handle next to the section name and move it into position.
- To include a section in the list of displayed sections, click the section's
- Click X in the top corner to close the editor.
-
- Create new sections in the container.
You can create empty sections, or create sections from one of the templates available in the dependency.
- To create a section based on a template:
- In the Properties pane, click + Section, and then select the template you want to use from the dropdown list.
When you select the template, a new section is added to the container, and the details pane for the template opens in the Properties pane. Depending on the template, the new section might have editable properties, components, or input parameters that you may need to configure:
- Rename the section.
The new section is given the name of the template by default. To rename the section, click … in the Properties pane, and then select Rename Section in the options menu, or hover over the section name and click
:
- In the Properties pane, click + Section, and then select the template you want to use from the dropdown list.
- To create a new empty section:
- In the Properties pane, click + Section, and then select + New Section in the dropdown list.
You can also create a new section in the rules editor by clicking + Section:
The new section is added to the container, and the section's details pane opens in the Properties pane.
- Rename the section.
Click … in the Properties pane, and then select Rename Section in the options menu, or hover over the section name and click
. You can then edit the name in the Properties pane.
-
Add your content to the new section by dragging components from the Components palette into the section on the canvas.
- In the Properties pane, click + Section, and then select + New Section in the dropdown list.
- To create a section based on a template:
