Containers: Groups, Tabs and Panels

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Process wizard > Define Forms > Form Designer components > Left panel >

Containers: Groups, Tabs and Panels

Containers enable you to organize the Display area to arrange the information in Tabs, Groups or Panels.

Tabs look and behave in a similar way as the tabs of a Web browser. The selected tab will display its content and the content in all other tabs will remain hidden.

Groups arrange the Controls in blocks, visually organizing it into small sets of related information.

Panels group Controls that are one next to the other in a form to affect them as a whole in Actions & Validations, instead of making individual actions for each one. Please refer to Affecting several controls to view an example

 

Forms Components8

 

The containers have the following properties: Display name, Visible and Editable. The last two Boolean properties can be set to True (Forms Components139) or False (Forms Components140).

 

Additionally groups have an special property called Initially collapsed which is used to define if the group will be initially shown expanded or collapsed.

When a group is added onto the form, this group will be available to rename immediately.

 

Forms Components154

 

 

Every Control in the container will inherit the property values assigned to the Container (Group, Tab or Panel).

For example, if a Panel is set as not editable, every Control in the Group will be no editable, regardless of the configuration of the control.

That is, the Container has seniority over the Controls in the visual hierarchy.

 

Forms Components9

 

To rename a Container double-click its name and type the one desired. Click on the green Save icon (Forms Components141) to finish editing.

To delete a Container, select it and click the red Delete icon (Forms Components142) attached to the boundary of the Control.

 

Forms Components13

 

Include a control in a Group

To include a control onto a Group, drag it and hover the mouse pointer over the Group. Wait for the DROP HERE section to light up, indicating where the control will be positioned. Drop the control when the desired section is highlighted.

 

CreatingForms7

 

Include a Group within a Group

You can include Groups within Groups.

To do so first create the parent Group and then drag-and-drop the child Group onto the parent as shown in the image.

Every time a group is dropped onto the form, this group will be available to rename immediately..

 

Forms Components10

 

Include a Tab within a Tab

You can include Tabs within Tabs. To do so create a Tab (parent) and then drag and drop another Tab onto to the parent Tab as shown in the image.

 

Forms Components12

 

Create a new Tab

When you include a Tab in a Form, the green Add icon (Forms Components143) is always available on the right. This icon allows including new tabs, one besides the other.

If you drag and drop a new Tab from Containers, it will not be placed alongside an existing one, but as a new Tab in a separate pane.

 

Forms Components11