Containers features and properties
This topic describes how to configure each type of container and its specific properties.
Each type of container has its own specific settings and configuration options, described in the following paragraphs. However, all of them share options common to all Screen Objects and the "Enble ATO" property.
Tab container
The Tab container creates folders that can contain other Objects, including other containers. It shows one Object at a time with the option of selectively moving through tabs.
To add an Object to the container, simply drag and drop it on the container area. A new tab will be automatically created.
Tab labels can be renamed from the contextual right panel of the Screen editing page once the container is selected.
To delete a tab, delete the Object it contains. You can do this by selecting the Object and clicking the recycle bin icon in the top menu. Otherwise, you can
navigate to the Screen Objects order sub-page in the left panel of the Screen editing area, select the container and click the recycle bin icon in the top menu.
The Tab container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Transition container
The Transition container displays Objects in sliding panels that can be browsed manually or as an automatic slideshow. It can contain any Object as well as other containers.
To add an Object to the container, simply drag and drop it on the container area. A new panel will be automatically created.
You can change the panel order by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
The following properties specific to the Transition container are available in the contextual right panel of the Screen editing page:
- Enable slide show. Enables auto play for the slideshow effect. If enabled, the slides succession enters a loop and does not stop, even if all slides have already been shown
- Slide show interval. Defines the time span the container must wait before moving to the next panel. The values are expressed in seconds. The higher the values, the longer a panel is displayed
- Horizontal alignment. Defines the horizontal position of the navigation elements
- Vertical alignment. Defines the vertical position of the navigation elements. When the "Center" option is selected, previous/next buttons (arrows) appear on the sides of the container
The Transition container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Panel container
The Panel container is a rectangular area which can be used to group Objects. It can contain any Object as well as other containers.
The Panel container is particularly useful when you want to move multiple Objects together, as the size and position of the Objects it contains remains fixed.
In the following picture a transparent Panel container groups three other Objects.
The Panel container can also be used to place multiple Objects within the same tab of a Tab container, as shown below.
As you can see from the Screen Objects order in the left panel, the Panel containers has been added to a Tab container, creating a flexible configuration capable of showing multiple Objects in a single tab.
If an Object contained in a Panel doesn't fit within its area, scrollbars will appear.
The Panel container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Matrix container
The Matrix container shows embedded Objects in a grid of rows and columns of equal size. It can contain any Object as well as other containers.
The Matrix container automatically readjusts the number and size of rows and columns dynamically as new Objects are added.
You can change the Objects order in the container by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
Three alignment options specific to the Matrix container are available in the contextual right panel of the Screen editing page:
- Grid (default setting). Objects are arranged in a responsive grid that adjusts according to the number of objects added
- Vertical. All Objects are arranged in a single column
- Horizontal. All Objects are arranged in a single row
Choose your alignment option immediately after having dropped your Objects on the container area, before configuring Layouts. If you switch to another alignment option after configuring Layouts, the size of the Objects won't automatically fit and you will need to manually adjust it using the options in the "Position and size" menu.
The Matrix container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Book container
The Book container displays embedded Objects with a page-flip effect. It can contain any Object as well as other containers.
To add an Object to the container, simply drag and drop it on the container area. A new "page" will be automatically created.
You can change the "pages" order by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
To turn pages, click the previous/next arrows on the sides of the container.
The Book container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Tileview container
The Tileview container displays embedded Objects in tiles minimized in a grid, providing an overview on the included Objects.
Tile labels can be renamed from the contextual right panel of the Screen editing page once the container is selected.
You can also configure how many Object should be displayed in each row and column of the container. To do so, open the "TILEVIEW GRID SETTINGS" menu and enter the desired settings.
To add an Object to the container, simply drag and drop it on the container area. A new tile will be automatically created.
We recommend to limit the number of Objects in a Tileview container to a dozen, also considering other Objects included on the Screen. When designing a Screen, you should always consider the total time required to open it, which depends on the number of Objects added.
You can change the Objects order in the container by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
The Tileview container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Expander container
The Expander container displays embedded Objects in column. It can contain any Object as well as other containers.
You can manage the visibility of embedded Objects in order to show or hide some of them in Play mode: their position in the container when the Screen is opened in Play mode depends on the configuration of the visibility properties.
For example, if an Expander contains one Data View in the first position and a Chart in the second, but the Data View is hidden due to its visibility settings, the Chart is automatically displayed in the first position of the container.
To set an Object as hidden, open the Layout editor and click the "Settings" button reveal the "Object properties" panel on the right-hand side of the page. Then, under the "DYNAMIC OPTIONS" menu, select a Block from the "Visibility" dropdown menu and tick the checkbox beside it.
In the image above the Pie chart is set to hidden, but it will still be visible in Design mode. In Play mode, the Object following it will go up one place in the Expander container.
To add an Object to the container, simply drag and drop it on the container area. A new column element will be automatically created.
You can change the Objects order in the container by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
The Expander container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Responsive container
The Responsive container shows embedded Objects in a customizable grid of rows. The grid is responsive (i.e. it adjusts smoothly to various screen sizes) and it can contain any Object as well as other containers.
To add an Object to the container, simply drag and drop it on the container area. A new element (child) will be automatically created.
You can change the Objects order in the container by dragging and dropping the corresponding Object up or down the list in the Screen Objects order sub-page.
To configure how Objects should be displayed in the container, open the "GRID SETTINGS" menu and enter the desired settings.
The Children width type menu offers two options:
- Fixed. The elements height and width will not adjust to the available screen space
- Dynamic. The elements height and width will adjust to the available screen space, based on the minimum and maximum values configured in the fields below
The "Children gap" field lets you configure the horizontal and vertical distance between grid elements.
The Responsive container can also be used to create ATO management environments: to do so, check the "Activate ATO" option contextual right panel once the container is selected.
Learn more: