Creating a layout using containers


A container is a built-in view component available in the View designer. Containers are used to define the layout for a region of a view that can include view components or nested container.

Important

Application business analysts can customize the objects developed in their own applications and that are marked customizable by the administrator, but cannot customize the objects developed in com.bmc.arsys in Best Practice Customization mode. For example, objects in core BMC applications like Foundation, Approval, and Assignment cannot be customized in Best Practice Customization mode. For more information, see Customization-layer

To add a container to a view definition

  1. In View designer, in the Palette pane, from the Basic components, drag the container to the canvas.
  2. In the Properties pane, provide the properties for the container component.
    The following properties are available:

    Property

    Description

    Number of columns

    Divides the container area into different columns. Select the number of columns in which you want to divide the container, up to a maximum of six columns.

    You can change the span size of the column. By default, the columns are divided in symmetric order depending on the number of columns you select.
    For example, if there are 3 columns, the column span is 4 for each column.
    Containers are based on 12-column grid system and the sum of column spans within one container always equals 12. Minimum span for column is 1, and the maximum span for columns is 12.
    To change the column span, on the column span field, reduce or expand the column span by using auto expand available on the field, as shown in the following image:

    22_1_Column_span.png

    Row wrap

    To control the layout of multi-column containers based on the width of the view, select Row wrap. The default value is Small

    If you add a container to an existing container, it automatically inherits the Row wrap property from the parent container.

    If you change the Row wrap value of the parent container, you are prompted whether to set all child containers to match its value.

    Collapsible

    Use the toggle key toggle1.pngto make the container's contents collapsible. Users can expand or collapse the container by clicking the Show more or Show less buttons while using the application. 

    Example

    Seth, a developer at Apex Global, wants to use the collapsible property of a container on a support request form to allow users to provide additional issue details if needed. The container will appear as follows when collapsed and expanded:

    Collapsed:

    image-2025-1-27_15-50-10-1.png

    Expanded:

    image-2025-1-27_15-55-57-1.png

    Hidden

    Hides the container in the view definition. You can also specify the condition when you want to hide the container.

    CSS classes

    Defines the margin and border for the container. The available options are no margin, 1 pixel border, and white background.

    For more information, see CSS-classes-used-in-View-designer-components.

  3. Add the view components in the container as per the requirements.
  4. Click Save.

To add a loading indicator to a container by using Set Property

A loading indicator is displayed in a container to inform users that an action is in progress and that they should wait for it to complete. A loading indicator is displayed in a container only if an action takes longer than 250 milliseconds. Use the Set Property action to add a loading indicator to the container: 

  1. Add an action button to your view or in a container. For more information, see Adding an action button to a view.
  2. In the Edit actions window, select the Set property action and enter the following details:

    Property

    Description

    Example

    Condition 

    Click Click to build an expression to create a qualification based on which you want to configure a property on your view or component. 

    image-2025-1-31_10-47-3.png

    Property path

    Click Click to build an expression to select the container on which you want to set the Busy property value.

    Property value

    Click Click to build an expression to select the value of the property on the selected container. To display the loading indicator, set the value to true.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*