Tab Container

What is it?

The Tab Container is designed to organize multiple Containers or Formatted Containers into sub-pages. To use it, first add the Tab Container to your page, then move other Containers onto this widget.

How and When to use it? 

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

2. You can change the name of the Tab Container in the blue Quick Settings panel that pops out when you click on the placed Tab Container widget.

How to configure it? 

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

Tab List

This window displays a two-column table. The first column represents the tab order, while the second column contains editable fields showing the tab names. 

The table is organized in ascending order from left to right within the container. To exit the popup window, you can click "Submit" to save changes or choose "Cancel." The default name for each tab is set as "New Headline.”

Widget Property Settings

The tabs are General and Visibility.

You can exit the popup window by clicking on submit to save changes or cancel.

General

The subheaders in the General tab are “Basic” and “Position, Size and Layout”. 

Basic 

The fields in “Basic” are Name and Description. You can change the name and description of the widget here. 

Position, Size and Layout 

In Position, the x and y coordinates of the widget on the page, and the widget width and height can all be adjusted precisely in units of pixel (px).

The options for Sizing Mode are Absolute Size and Relative Size. In Absolute Size, the dimensions of the table are the same in the Page Builder and Production. 

In Position, the x and y coordinates of the widget on the page, and the widget width and height can all be adjusted precisely in units of pixel (px).

In Relative Size, the right and bottom sides of the table expand to completely fill the screen/window in Production. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”.

Visibility 

In the single-column table, you can turn on/off the ‘Invisible’ and ‘Looks Read-Only’ options for your widget. The first entry is the default setting that applies to everything. You can also create new entries by tapping ‘New Conditional Visibility’ and setting a condition with two operands and an operator in between, so the rule will only apply when the condition is met.

A popup window called Condition Settings appears after clicking.

Widget Permission Settings

You will find the “User role” tab

In the table, you will see the name of each Runtime User Role listed on the left. On the right side of each entry, there's a handy dropdown menu that lets you choose the level of access that each Role has to the widget in Production. 

On the right of each entry, there is a dropdown menu for choosing the level of access the Role has to the widget in Production.

Copy Widget Settings

In the popup window, you can selectively copy the values of each field in Widget Property Settings to the same fields of one or multiple widgets, even widgets inside of Forms and inside of other widgets. 

The left side shows all of the fields of the Source Widget. The top of the left side shows all of the tabs of Widget Property Settings.

The left side shows all of the fields of the Source Widget. The top of the left side shows all of the tabs of Widget Property Settings.

You can click Close on the top right to exit or click Apply on the bottom right to apply changes.

Remove

If you click the delete button, a popup message will appear asking for confirmation before the widget is deleted. You can either click delete or cancel to leave without changing anything.