1 Introduction
Structure widgets are widgets that allow you to provide structure to your page and group other widgets inside them.
There are the following Structure widgets:
2 Columns and Sidebars
Column and Sidebar widgets are based on a layout grid – a widget that structures your page with rows and columns. Columns and Sidebars are layout grid configurations with a pre-set number of columns.
3 Layout Grid Overview
The Layout Grid helps you to structure a page and make it responsive immediately. This means that a layout grid has a built-in behavior to show how a page will look like on different devices. Switch Device modes to see how a page will be displayed on a phone, tablet, or desktop:
Layout grid contains columns and rows.
A row consists of one or more columns that are placed next to each other in a responsive (desktop) view.
A column is a cell inside a row. You can place one or several widgets inside a column, for example, you can place two buttons inside it.
For more information on rows and columns, see Row Properties and Column Properties sections.
3.1 Layout Grid Properties
You can access the Layout Grid properties through the breadcrumb (for more information, see the Breadcrumb section in Pages). Layout grid properties consist of the following sections:
3.1.1 Expand Section
The Expand section > Add Row allows you to add a row above or below the selected one to create more space to place widgets in.
To add a new row, do one of the following:
- Select the layout grid in the breadcrumb and in its Properties > Add Row, click one of the buttons to insert the row above or below.
- Select the row and in its Properties > Add Row, click one of the buttons to insert the row above or below.
- Select the column and in its Properties > Add Row, click one of the buttons to insert the row above or below.
An empty row will be inserted.
3.1.2 General Section
In the General section, you can set the width of the layout grid. You can choose one of the following:
- Full Width – the layout grid takes the whole width of a container it is placed in
- Fixed Width – the layout grid will have a fixed size in the center of your page, adjusted automatically according to your device
3.1.3 Design Section
For information on the Design section and its properties, see Design Section.
3.2 Row Properties
Row properties consist of the following sections:
3.2.1 Expand Section
The Expand section > Add Row allows you to add a row above or below the selected one. For more details, see the Expand Section of the layout grid.
3.2.2 Container Settings Section
In the Container Settings section, you can set the width for the layout grid and choose between full width or fixed width.
This property is the same as the property in the General Section of the layout grid. For details, see the General Section.
3.2.3 General Section
In the General section of a row you can select the number of columns in it, align columns and add spacing between them. This section contain the following settings:
Columns – sets the number of columns in the row
You can also set the number of columns in the working area: select one of the columns and click a plus icon on top of it to add a new column to the right
Align Columns Vertically – aligns all columns in the row vertically, you can select the following options:
Spacing Between Columns – when enabled, adds spacing between columns
3.3 Column Properties
Column properties consist of the following sections:
3.3.1 Expand Section
The Expand section of a column allows you to add a row or a column.
3.3.1.1 Add Row
Add Row allows you to add a row above or below the selected one. For more details, see the Expand Section of the layout grid.
3.3.1.2 Add Column
Add Column allows you to add a column to the left or to the right of the selected one.
3.3.2 General Section
In the General section, you can set the column width and align an individual column.
3.3.2.1 Width
You can set the column width for desktop, tablet, or phone by choosing the corresponding device mode:
You can choose the following options:
Auto-fill – takes the available space for a column (for example, if there is one column, it will span the column for the whole row, and for two columns, it will divide the space equally between them)
Auto-fit content – automatically fits the size of the column to its content
Manual – allows you to manually set the size of the columns
When you select Manual the slider appears that allows you to set the width of the column from 1 to 12:
You can also resize columns manually in the working area: drag the column border to change its size.
The Width property can be used to make your layout more flexible and adaptive to different types of devices.
For example, you have a layout grid with one row and two columns: a picture is in one column, and a text with details is in another.
For the desktop and tablet, you might want to set the first column with a picture to Auto-fit content and and the second one to Auto-fill, this way the first column will adjust to the size of the picture, while the second one will take the rest of the row:
For phone, it can be a good idea to place two columns one under another, setting them to Manual width of 12. In this case, the second column will be automatically wrapped to another line:
3.3.2.2 Align Vertically
The Align Vertically property overrides the Align Columns Vertically property on the row and sets alignment for an individual column.
4 Container Overview
A Container is used as a layout element where you can place a widget or a group of widgets and simultaneously style, drag or delete them. For example, you can place a section title and input widgets for filling out program’s details in one container, and subsequently reposition the whole container at once to a different location on the page.
Container properties consist of the Design section. For information, see Design Section.
5 Group Box Overview
A group box is used to group widgets together. The group box can be configured to collapse or expand dynamically with all the elements inside it.
5.1 Group Box Properties
Group box properties consist of the General section and the Design section. For information on the Design section and its properties, see Design Section.
Properties available in the General section are described in the table below.
| Property | Description |
|---|---|
| Show Header | Show Header defines whether a header is shown above the group box. This property is enabled by default. |
| Caption | This property is only displayed when the Show Header option is enabled. It defines the caption that is shown in the header. |
| Collapsible | This property is only displayed when the Show Header option is enabled. It defines whether the group box and its elements can be collapsed or expanded. Possible values of this property are the following:
|
6 Tab Container Overview
A tab container is a container that is used to show information categorized into tabs. This can be useful if the amount of information that you would like to display is larger than the amount of space on the screen. For example, you can show a list of customers on one tab, and orders on the other one.
You can place a widget or a group of widgets inside each tab and configure information in them separately.
6.1 General Section
In the General section, you can configure the following properties:
Tabs – use radio buttons to switch from one tab to another; click the tab and drag it to change the order of tabs; click the Edit icon to open the tab properties and configure it (for more information, see section the Tab Properties section)
Add New Tab – adds a new tab to your tab container; tab properties will open automatically (for more information, see section the Tab Properties section)
6.2 Design Section
For information on the Design section and its properties, see Design Section.
6.3 Tab Properties
Each tab has the following properties:
Caption – defines the name of the tab; you can also edit the caption by double-clicking it in the page
Default Tab – defines which tab is active when the page is opened. If no tab is set as the default one, the first tab page will be shown. By default, none of the tabs are set as a default tab.
7 Snippet Overview
Snippets define reusable elements of pages and are created in Studio Pro. By using snippets you can make changes in fewer places when you modify pages.
For example, your team member in Studio Pro has created a snippet and added a customer form to it turning this form into a reusable page element. You can use this snippet on your pages in Studio too:
While you can call (use) snippets on your pages in Studio, you cannot create, change, or delete them. For more information on snippets in Studio Pro, see Snippet.
The Snippet widget is not displayed if your app project does not contain any snippets.
To call a snippet and add it to your page, do the following:
In the Toolbox > Widgets, find the Snippet widget and drag and drop it on your page.
Open properties and click the Snippet property.
In the Select Snippet dialog box, select a snippet you would like to use on your page and click Select.
The snippet is added to your page.