You are here: User interface > User interface rules > Harness and section forms > 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. See Skin form — Components tab — Layouts — Tabs.

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

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

  1. Click the down-arrow (Arrow) at the right end of the Layout control group (Layout group) and select the Tab control (Layout). Alternatively, click the Layout control group itself to pop-out the Layout control group window.

  2. 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:

  1. 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.
  2. 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 Delete (Delete). To delete an entire tab layout, select the layout and then click the Delete Row button (delete row), not the Delete Cell button.

To copy an existing layout, click 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 Magnifying glass on the Tab Group header to open the properties panel.

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. See Skin form — Components tab — Layouts — Tabs.

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.

About Sections