Table of Contents

Tabsets

Overview

Tabset is the name used for the element that contains multiple tabs. To add a Tabset, go to Base Types > Tabs and add it to the canvas.

The element created should look like the above image.

Positioning and Sizing the Tabset

Main Tabset

The main tabset should be at a fixed position in every form, except when addition information has been added to the Ribbon. The standard position is X: 5 Y: 270. The default width of the tabset should be 1022, but can be made wider if needed. The width should not exceed 1346, as this will allow the entire tabset to be visible on most computer screens. The height should be sized to appropriately contain the contents of the tabs in the tabset, without unnecessary blank space below the content.

Sub Tabset

The tabset should be positioned at X: 5 and the appropriate Y position for the layout.

Any children tabsets should be full width within their parent container. Full width for a tabset is the width of the parent container minus 15. An example of a tabset with a parent container width of 1000 should have the tabset width set to 985.

Creating New Tabs

Before creating new tabs, it is recommended that you properly size the Tabset. The Form Editor will automatically size the Tab container relative to its Tabset. If the Tabset size is change after the tabs are created, each Tab container will have to be resized manually.

To create a new tab, you click on the + to the top right of the tabset. This will create a new tab as the last tab in the tabset. There is no way to add a tab to any other position in the list of tabs. To switch tabs around, you will have to perform an operation called a “Tab Shuffle”. For more information, please read the lesson called “How to Perform a Tab Shuffle”.

After the new tab as been created, you will have to update the Label of the tab.

To update the label, you must click on the tab container (typeId 81/149999). If you can not click on the tab container (typeId 81/149999), try temporarily moving the tab container (type 97) down, as the 81/149999 container is the parent of the 97 container.

Once you have selected the tab container 81/149999, find the label_en-CA attribute and update the value with the text you’d like to appear on the tab button. This attribute has support for multiple languages; adding those language versions of the attribute will display those values based on the user’s language settings.

Positioning and Size a Tab Container

Tab Position

The Tab container should always be positioned at X: 5 Y: 5. This position should be automatically set for all newly created Tabs.

Tab Size

The Tab container width should be automatically set for all newly created Tabs.

If the Tabset width is changed after a Tab is created, the container should have a width that is 10 less than the width of the tabset.

The height should visually fit the bounds of the tabset.

Verifying your Tab Positioning

To verify that you tabs are in the correct position, rapidly click between the tabs of a tabset in the editor. You should not be able to see the borders of the containers move around as they switch. If you do see any movement, adjust the positioning of the containers.

Content Container

When creating a new tab, all content within the tab should go into a nested container. The nested container should be positioned at X: 5 Y: 35, below the Tab Header. The container should have a width that is 12 less than the width of the tab container 97. With the standard width of the main tabset, the width of the Content Container should be 1000. The height should visually fit the bounds of the tabset.

The reason this content container is created is to allow for easier movement of the content of a tab, should the order of the tabs need to change later using a “Tab Shuffle”.

Content Container

1	Select the element that will be the parent of the new tabset. For the main tabset, this will be the Form Root (TypeId 0). For a Sub Tabset, this will likely be the Content Container of the parent Tab. Since we are adding the Main Tabset, click the Form Root.
2	Go to the Base Types panel in the Accordion Menu, and add the Tabs Base Type to the form.
3	Select the newly created Tabset and apply the position and size based on the conditions above. Click on the Tabset, and the box surrounding the entire should turn blue. Go to the Spatials panel and input the values X: 5 Y: 270 Width: 1022 Height: 1000. The height can be adjusted later. Column 2 Value 10 Select the Static Tab Container, and input the spatials X: 5 Y: 5 Width: 1012 Height: 940. The heigh can be adjusted later.
4	Select the area between the Tab Container and the Tabset. It may take some practice, but you should find an element is typeId 149999 and open the Options Tabel panel. The element should have an attribute named “label_en-CA”. Replace “No Title” with the name you would like to appear on the Tab button.
5	Select on the Tab Container and add a Heading: Heading Level 1 Custom Type. Click on the Header 1 element, and update the spatials to X: 5 Y: 5 Width: 1000 Height: 25. Apply a content attribute to the Header 1 element that matches the tab label.
6	Select the Tab Container again, and add a Container Base Type. Click on the Header 1 element, and update the spatials to X: 5 Y: 35 Width: 1000 Height: 500. The height of the container can be expanded or shrunk as needed.
7	Click on the + button to the right of the Tabset Bar to add a Tab to the Tabset. Add all the tabs you expect to need.
8	For each new tab, follow these steps: Select the area between the Tab Container and the Tabset. It may take some practice, but you should fine an element is typeId 81 and open the Options Tabel panel. The element should have an attribute named “label_en-CA”. Replace “No Title” with the name you would like to appear on the Tab button. Select on the Tab Container and add a Heading: Heading Level 1 Custom Type. Click on the Header 1 element, and update the spatials to X: 5 Y: 5 Width: 1000 Height: 25. Apply a content attribute to the Header 1 element that matches the tab label. Select the Tab Container again, and add a Container Base Type. Click on the Header 1 element, and update the spatials to X: 5 Y: 35 Width: 1000 Height: 500. The height of the container can be expanded or shrunk as needed.
9	Your Tabset should now be ready to use. You can add additional tabs at a later time.
10	To add a Sub Tabset, you can follow these instructions again and subtracting 15 from all of the width spatials, but leaving all others the same.

Notes

Every form should have a tabset created, even if the form will have a single tab.
The first tab in a tabset should never be deleted, and there is a restriction placed in the editor to prevent the deletion of the first tab. You will be presented with the following message:
If that tab has been deleted before the restriction was added, the new first tab will not load automatically. When this happens, a new tabset will have to be created and all content migrated.
If a tab container 97 is moved out of the tab container 81/149999, then a new tab will have to be created, content migrated to the new tab, and the old tab deleted. This is because moving the tab container 97 to a new parent, when it should have no parent assigned. A common symptom of a tab container 97 with a parent is improper positioning of repeaters and containers using clevr Show/Hide.