Formatted Container

What is it?

A page typically contains containers that serve various purposes. For example, containers are used to group widgets for document header information and to group widgets used internally by the system, which should be hidden from regular users. Towards the end of this document, we will discuss the distinction between "Container" and "Formatted Container".

How and When to use it? 

To add a new formatted container to your page, simply drag and drop the “Formatted Container” widget from the left hand side of the page screen to the design area of your page.

You can change the title, size mode, location and its size on the page directly by the widget property box after clicking on the container.

How to configure it? 

Click on the widget once to open its Quick Settings Panel.

To prepare more detailed settings of the container widget, you can click on the “Widget Property Settings” button..

...and the Widget Property Settings window will be displayed.

Widget Property Settings

To prepare more detailed settings of the container widget, you can click on the “Widget Property Settings” button….

…and the Widget Property Settings window will be displayed.

General 

Basic

In the "Basic" view, under the "General" section, you have the option to provide a Description that explains the purpose of the container widget on the page. It is recommended to input a meaningful description here so that other developers can understand your design when reviewing your page. 

Style

When you want to group your widgets without displaying a title for the container, you can achieve this by removing the "Header - Show Header" option.

When you would like to group your widgets without a title shown for the container, you can remove the “Header - Show Header” option to achieve this purpose. 

By changing the “Label Style”, you can change the Text style of the container title. You can choose “Small”, “Medium” or “Large” title style for the container based on your design needs. 

This is the appearance of the Container widget in Page Builder when there is no header.

Position, Size and Layout 

You can change the location/position, size and layout of the container.

Visibility

Change to the “Visibility” view, you can control when and the rule for the container to be displayed on the screen. You can set the default visibility of the container, set it invisible or Looks Read-Only and the user can not change any widget values within the container.

After setting the default visibility, you can add more conditional visibility rules to the container to make it visible/invisible based on different conditions. To do this, you should click on “+ New Conditional Visibility” and you should have a new condition rule.

By this new condition, you can choose a “Variable” or “Widget” as the base of the rule. Below is an example where we set the default visibility of the container as “Invisible” and only when the user is in the “Manager” User Role then he/she can edit the Widgets within the container. You can set more conditions to have more different visibility status of the container based on the application requirements

Widget Permission Settings

With the Widget Permission Settings, you can set the access right of different User Role to the container. 

You can grant the User Role with Normal, Read Only or No Access right.

Copy Widget Settings

With the Copy Widget Settings, you can copy the container settings to other widgets you choose.

From the “General” option, you can choose to copy the Label Font Size, Header, Header Alignment, Widget Width, Widget Height and also the Display in values by selecting the checkbox next to the specific option.

If you have set a visibility rule for a container and there are other widgets that share the same visibility logic, you can copy the rules from the "Visibility" option. Simply select the Conditional Visibility of the container, and you can easily replicate those rules.

To copy the user role permission setting, you can choose the “User Role” option and then select the user role you want to have the widget access right copy to other widgets.

Once you have selected the "widget settings" you wish to copy from the container to other widgets, you can use the input box on the right-hand side to filter the "copy to widgets" based on the desired destination widget names. Simply enter part of the destination widget name to narrow down the results. Then, click on the widgets that appear after the filter to select the exact widgets you want the settings to be copied to. 

In the example above, the screen shows that only "input 1" and "input 2" should have the settings copied, while "input 3" will be ignored after filtering with the keyword "input".

Click the button “Apply” from the lower part, right-hand side of the screen, to start copying the widget settings. You are asked to confirm the copy of the settings and you can click the “OK” button to confirm or click the “Cancel” button to cancel. 

Remove

If you have mistakenly created a formatted container and wish to delete it, simply click on the "Delete" button and then confirm the deletion to remove the formatted container from the page. 

Container vs Formatted Container

The example below illustrates how the widgets are positioned in both types of containers. 

The main difference between a "Container" and a "Formatted Container" is that you can set specific "Position" properties for widgets inside a Container, whereas, in a Formatted Container, the widgets are positioned one after the other automatically. 

When a widget, such as "input 2," is invisible, in a "Container," its position will appear as a "blank area." However, in a "Formatted Container," when a widget is hidden, the following widget will take over its original position, ensuring that no blank area is displayed.