Section forms - Adding a Tab group

Section forms — Adding a Tab group

Using the Tab control, you can array layouts, each with a visible tabbed header, within a tab group. You can position tabs across the top, bottom, right, or left of a layout. You can also stretch the tabs across the width or height of the content. You can use the Tab control to add tabbed Smart layouts to existing tabs in the group.

At runtime, when the user clicks one tab, the layout in that tab becomes visible and the other layout closes. Opening and closing tabs within a container does not affect tabs in other containers.

By default, tabs in a group are configured as dynamic layouts. Using dynamic layouts allows you to take advantage of HTML5 capabilities including cross-browser and cross-platform compatibility, access to the latest HTML markup, and improved performance.

When a tab layout hosts a Dynamic Container, the tab layout automatically adjusts, at runtime, to consume the entire available height and to supply scroll bars when necessary.

For information about using the Tab control in harnesses, see Harness forms — Adding a tab container.

You can configure styles for tabs using the Skin rule.

> 1. Creating, adding, copying, or deleting a tab group

To create a Smart layout tab group, do the following:

From the Layout control group, select the Tab control. Alternatively, click the Layout control group itself to pop-out the Layout control group window.
Drag and drop the control onto the form. As you move the pointer over existing frames, a horizontal yellow line indicates where the tab will be dropped. The tab group appears in a wireframe on the form.

To add a tab to an existing tab group, do the following:

Select the Tab control and drag it to the left or right of a tab border. As you move it over the tab borders, a vertical yellow line indicates where the tab will be dropped.
Release the mouse pointer. A new tab displays.

You can quickly add a section to a tab group by dragging the section from the Application Explorer and positioning it next to an existing tab as described above.

To delete a single tab, select the tab and then click the Delete icon. To delete an entire tab layout, select the layout and then click the Delete Row button, not the Delete Cell button.

To copy an existing layout, click the Show wireframes icon to present the wireframe, right-click the existing layout, and then click Copy. Select the location in which you want to paste the layout, right-click and then select Paste Above or Paste Below.

> Working with the Tab Group properties panel

Each tab within a group represents a unique layout and has its own properties panel.

Select the tab you want to modify and click the View properties icon on the Tab Group header to open the properties panel.

Field Description

Field	Description
Style format	Select the format you want to apply to the tabs in the group. Standard — Default format applied to all tab groups. Sub — Format suitable for sub-tabs. Other — A custom format that you create in the skin rule. Specify the custom format in the field that appears. You can modify formats and create additional formats in the Skin.
Tab position	Select the placement of the tabs at runtime: `Top` `Bottom` `Left` `Right` If you select `Left` or `Right`, specify the horizontal or vertical orientation of the tabs in the Tab orientation field.
Tab orientation	If you selected a left or right Tab position , select to display tabs horizontally or vertically. Horizontal is the default. If you select vertical orientation, the tab title is rotated based on the tab position, left or right.

Style format

Select the format you want to apply to the tabs in the group.

Standard — Default format applied to all tab groups.
Sub — Format suitable for sub-tabs.
Other — A custom format that you create in the skin rule. Specify the custom format in the field that appears.

You can modify formats and create additional formats in the Skin.

Tab position

Select the placement of the tabs at runtime:

Top
Bottom
Left
Right

If you select Left or Right, specify the horizontal or vertical orientation of the tabs in the Tab orientation field.

Tab orientation If you selected a left or right Tab position , select to display tabs horizontally or vertically. Horizontal is the default. If you select vertical orientation, the tab title is rotated based on the tab position, left or right.