1. Developing Applications with Oracle Visual Builder
  2. Develop Applications
  3. Work with Pages and Flows
  4. Add Dynamic Components to Pages
  5. Add a Dynamic Container to a Page
  6. Change a Dynamic Container's Layout

Change a Dynamic Container's Layout

Dynamic containers display sections vertically by default. That is, sections are rendered in a single column, one on top of the other. You can change this layout to show them instead in a row using container templates.

Container templates help lay out sections in any layout other than the default. You can use them to arrange sections within a dynamic container however you like, even adding other components, including dynamic components and fragments. So you could include a fragment in your container template, and that fragment could include a dynamic form and other components.


Description of container-template-example.png follows
Description of the illustration container-template-example.png

The preceding image shows a dynamic container's sections stacked vertically. Once you create a container template and switch its layout, the sections are placed next to each other. When they run out of space on the row, they automatically wrap to the next row (as shown at the bottom of the image).

To change the layout of sections in a dynamic container:

  1. With your page open in the Page Designer, select the Dynamic Container component to view its properties in the Properties pane.
  2. In the General tab, click Create next to Container Template.
  3. Enter a name for the container template (for example, Row Template) and click OK, then click Go to Template.
  4. When the template opens in the template designer, click Flex Row next to Template Content in the Properties pane.
  5. In the Flex Row's properties, look for the Direction field, which by default is set to Vertical.
  6. Select Horizontal. Take note of the oj-sm-flex-direction-column class, which sets the direction to a column and is included by default, is removed from the Class field.
  7. Click Return to Page to see your sections laid out horizontally in a row, rather than vertically in a column.