You are here: User interface > User interface rules > Harness forms > Harness forms - Adding a tab container

Harness forms — Adding a tabbed container

  

Using the Tab control, you can create and add tabbed containers to a harness. Each tab contains a section that is configured with a tabbed header. At runtime, when the user clicks a tab within a container group, the section becomes visible and the other open section closes.

Configure styles for tabs using the Skin rule. See Skin form — Components tab — Layouts — Tabs.

For information about using the Tab control in sections, see Section forms — Adding a tabbed SmartLayout.

1. Creating and adding tabbed containers

To add a tabbed container to a harness, do the following:

  1. On the Harness rule Layout tab, click the down-arrow (Arrow) at the right end of the Layout control group (Layout group).
  2. Select the Tab control (Layout).
  3. Drag and drop the control onto the form. As you move the pointer over existing frames, a yellow line indicates where the tabbed element will be dropped.
  4. Add a section by dragging and dropping a section from the Application Explorer, or using the Section control (Section) . See Harness, section and flow action forms — Adding a section.

    For an example, see PDN article 25411 How to create layouts that contain tabbed headers.

To add tabs to a container, do the following:

  1. Select the Tab control and drag it to the left or right border of a tab:

  2. Release the pointer. A new tab appears on the right as shown here:

Make the desired tab front-most when you save the Harness, Section, or Flow Action form, as your choice determines which tab is front-most in the initial runtime presentation. You can drag and drop individual tabs to change the order.

To delete a tab, select it (make it active) and click the Delete Cell icon (). Do not use the Delete Row button (delete row). If this is the only tab in a group, the entire layout or container is deleted.

2. Complete the Container and Tab properties panels

There are two properties panels used in a Tabbed container: Container and Tab. To access the properties panel, select the container or tab to make it active, and in the wireframe header. Each container tab within a top-level container tab represents a layout and has its own properties panel. Each tab is numbered — the value appears in the Container header. When you select a tab, the number changes to match the tab. For information about the properties, see Harness form — Adding a container.

Do not change the Header Type (Tabbed).

3. Optionally, add a control to the single Tab cell

A single cell appears to the right of the Title value in which you can add a label. Optionally, you can add a control from the Basic group Basics to this cell. For example, the cell can contain a label (Label), a property value presented as a text box (Input Box) or even a select control (Select).

To include a control in the cell, complete the Container panel first as described above. Save the form. Then select, drag, and drop a basic control from the Basic group, as is normally done within a layout. Open the Cell Properties panel and configure the control. Non-autogenerated controls are always read-only, but auto-generated controls can be edited.

About Harnesses

Open topic with navigation