This documentation supports the 22.1 version of BMC Helix Innovation Studio.

To view an earlier version, select the version from the Product version menu.

Creating a layout using Containers

A Container is a built-in view component available in the View designer. You can use Containers to define the layout for an area of a view that can include view components or nested containers.

Important

Application business analysts can customize the objects developed in their own applications and that are marked customizable by the administrator. They cannot customize the objects developed in com.bmc.arsys in Best Practice Customization mode. For example, objects in core BMC applications, such as 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. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
  2. Select the application for which you want to add a Containers component.
  3. On the Views tab, click the name of the view definition to which you want to add a container.
  4. From Palette, drag the Container to the canvas.
  5. 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 using auto expand available on the field, as shown in the following image:

    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.

    HiddenHides the container in the view definition. You can also specify the condition when you want to hide the container.
    Available on devices

    Specifies the device options on which the component should be visible. You can select from the following options:

    • Desktop
    • Mobile
    • Tablet

    By default, all the three options are selected. 

    CSS classes

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

  6. Add the view components in the container as per the requirements.

  7. Click Save.

Related topics

Defining the user interface through view definitions

Creating or modifying view definitions

Creating a responsive web layout

Creating a view for a record instance by using record editor

Creating a tabular view of record instances by using a record grid

Creating a custom service in Java

Was this page helpful? Yes No Submitting... Thank you

Comments

  1. Robert Radwanski

    How can I set component height. E.g. initially table is 420px high but I would like it to fill entire container. How can I do that with codeless app?

    Mar 01, 2024 12:19
    1. MINAL DESHPANDE

      Hi Robert,

      You can use the CSS classes such as rx-auto-fill and rx-auto-fill in the CSS classes field, to fill the entire container. Alternatively, you can create custom bundle with custom CSS classes to set custom height on your components. Hope this helps.


      Thank you,

      Regards,

      Minal

      Mar 27, 2024 05:41
  2. Robert Radwanski

    "[...] rx-auto-fill and rx-auto-fill" - isn't it the same? Is there a list of css classes available ootb?

    Apr 22, 2024 03:54
  3. Tobias Günther

    A list of all css classes provided by bmc would be very helpfull

    Apr 29, 2024 05:30
    1. Prachi Kalyani

      Hello,

      We are working on adding this information. We should have the documentation updated soon.


      Apr 29, 2024 05:50