4 Display Your Own Content
If the base app developer inserted a dynamic container on the page and made it extensible, you can use it to a) re-arrange the content already there, or b) add your own components to display in the container.
A dynamic container displays content in individual sections, or logical regions of the page. You define the UI elements or components displayed in each section, and then set the display logic conditions to determine which sections are displayed. Like the rules in a rule set, the conditions are evaluated in order at runtime. In this example, the dynamic container has three sections, each displaying different content:
The base app developer usually defines one or more built-in sections for the container, but you can create your own sections if you want to add components from the Components palette to the page.
Note:
Unlike dynamic tables and forms, a dynamic container is scoped to the page on which it appears, which means it cannot be shared across other pages or app extensions.How Do Cases Work?
The display logic for determining what's displayed in a dynamic container is defined using cases. A case is similar to the layouts used in dynamic forms and tables, but instead of selecting which fields to display, you select which UI elements or components 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. A container can only display one case at a time, so if a case defines three sections, when that case is displayed you’d only see those three sections displayed in the container.
Configure a Dynamic Container
The easiest way to learn how to configure a dynamic container is to examine a real use case. Suppose the base app developer established a default case that doesn't have any sections. At runtime the container will be empty. Now let’s say that you want to display a header and form in the container, but only when the current user is a manager.
Note:
Dynamic forms and dynamic tables cannot be added to dynamic containers at this time.To achieve this, you would:
- Open the page containing the dynamic container in the Page Designer and click anywhere within the container's green outline.
You can also open a container by clicking it in the list of dynamic components in the Components tab in the page's Properties pane.
- In the Properties pane, click
to create a brand new empty case, and give it a unique name—perhaps Manager. To edit the case name, click
next to the case name:
If there is a case that contains some sections you know you'll want to re-use, you could click
to duplicate it, and then remove and add sections to the new case as needed.
- Add sections to your new case.
- Click
next to Sections, then select New Section in the menu to create a section:
- In the Create Section dialog box, type a title for the section. Click OK.
The ID is added for you based on the title you provided.
In this example, create two sections in the case: Manager Heading Section and Form Section. These sections can be re-used in other cases.
- Click
- In the case's Condition field, click
to display the variables you can use in your conditions:
- In the Condition field, click , then type in the rest of the expression as shown:
You set the case's conditions by typing an expression that can be evaluated as true. This expression evaluates as true if "manager" is a role assigned to the user viewing the page.
- Click Layout Preview in the case.
Activating a case's Layout Preview forces the Page Designer to display that case in the container, so you can see the components in the case's sections.
When a section is visible in the Page Designer, you can drag components directly into it from the Components palette and see how they will be rendered in the page.
- In the Page Designer, drag components from the Components palette into the sections.
You can drag components directly into the section on the canvas or in the Structure view.
Tip:
If data sources are available in your extension, you could also drag an endpoint from the Data palette into the section to add forms or tables.
At runtime, if the first case, Manager, is true—that is, if the current user is indeed a manager—then the two sections will be displayed in the container in the order they are listed in the case. If the user is not a manager, then the default case is used, which in this example is a container with no sections.
Re-Ordering a Container's Content
Besides defining new cases and templates for a container, you can also change the order the templates are displayed in the container. Just use the Move Up and Move Down arrows for the template under Sections:
You can also use the 
icon to remove a section from a case. Once removed from a particular case, the section is still available to use in other cases for dynamic containers in the page.
Note:
You can't edit the built-in case set by the dependency's developer, but you could duplicate the case and then use the arrows to reorder the sections in the copy.Guidelines for Working with Container Sections
Here are some things to keep in mind while working with container sections:
-
A section you create in an extension is the full width of the container, although the base app developer has more freedom in this respect. That is, while you can't have two sections side-by-side, the container can stretch to any height required to accommodate all the sections you define.
-
In addition to simple components like text fields and images, you can also add more complex components to your sections. For example, you might include fields for displaying data from a service, or a button that starts an action chain in your app extension.
-
Components in a section can access variables and constants, and trigger events to start action chains.
-
When working with sections, sometimes it’s easier to work in the Structure view, which helps you more readily visualize the position of components. You can also drag components within the Structure view to reorganize them.
-
Unlike dynamic tables and forms, a dynamic container is not bound to a specific data resource, so a section can display data from the Oracle Cloud Application resources available in the page.
Add Content From a Custom Object to Your Page
You can add components to a container section to render data from a data resource, for example, if you have created custom child objects in your Oracle Cloud Application. The component might be one provided in the base app, or a standard component available in the Components palette. For example, you can add a List View component to a section in a dynamic container, and then use the component's Quick Start to bind the component to the data source and select the fields displayed by the component. For more on using Quick Starts to bind data, see Add Data to a Table or List in Building Responsive Applications with Visual Builder Studio.
To display data from your Oracle Cloud Application in a list component:
- Click Layout Preview in the case where you want to add the component.
Activating a case's Layout Preview forces the Page Designer to display that case on the canvas, so you can see the components as they will look in the page. When a case is visible in the Page Designer, you can drag components directly into its sections from the Components palette:
In the image above, the case already has a section named Form Section that we can use for the new component.
- Drag the endpoint from the Data palette and drop it onto the section on the canvas.
You can also drag components and endpoints into the Structure view.
- After dropping the endpoint on the section, select the component you want to add from the menu.
The component options in the menu will depend on the type of endpoint that you dropped in the section. In this example using a Get Many endpoint, you could use either a list or table to render the data. You can choose if the component is dynamic or not, depending on your needs:
In this example, we'll add a dynamic list component. The Configure Layout wizard opens automatically when you select a dynamic component.
- In the Configure Layout wizard:
- Click Select fields to display, then select the fields you want to display in the component.
If you're binding a dynamic component to an endpoint which doesn't have a Layout, you'll need to enter the details to create a new rule set for the component. The wizard will create a Layout for the endpoint.
If a Layout for the endpoint already exists, you can create a new rule set, but there might already be some rule sets you could use instead of creating a new one. The Layout might also have templates that you can select in the wizard instead of selecting the fields.
After you finish the wizard, you'll see the component rendered in the container in the Page Designer. - Click Select fields to display, then select the fields you want to display in the component.
