User Manual

Getting Started

Modules and Platform


Tutorials & Helpful Tricks


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules


Inductive University
Ignition Demo Project
Knowledge Base Articles
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata

The Tab container is a great option when trying to easily configure a row of tabs, so long as you only need your tabs to contain individual views. If you want each tab in your project to point to a different page, however, a little more configuration is required. This section walks through the creation of a docked header view containing tabs we'll build from scratch.


Since we'll be walking through a navigation configuration, we assume in this walkthrough that you already have some pages set up. The pages we use are //Page2, /Page3 and /Page4.

Configuring Tab Styles

The first step in this process is to configure the styles we'll need when creating our views. We'll need two styles:

  1. Create a Style by right clicking on Styles (under Perspective) in the Project Browser and selecting New Style...
  2. Name the style TabStyle then press the Create Style Class button.

  3. Under Misc, set the Cursor property to pointer. Also add any other settings you'd like to apply to your tabs (e.g. a cool border or text color).
  4. Click the Add + icon next to Style Rules. Create a new Element State configuration, for an Element State of hover. Inside this element state, configure a Background color property. In this example, the color is a shade of gray (#D5D5D5).

  5. When you're finished, click OK.

Now we'll create another style:

  1. Call the style SelectedTabStyle.
  2. In the style configuration under Border, select the Bottom tab. Configure a Border bottom style of solid, and a Border bottom color of #0000FF (or any color you'd like)
  3. Click OK.

On this page ...


Building a Tab View

Our tab strip will consist of a row of individual tab views. Here we create the tab view.

  1. Create a new View. Call it Tab, and use a layout of Coordinate.

  2. Use the anchors on the side of the container (or the defaultSize property in the property editor) to decrease the default size of your new view. A width of 150 pixels and a height of 50 pixels should do the trick.

  3. Thinking ahead, our view will need two parameters in order to work. Under PARAMS, add these input parameters (of type Value):
    • pageURL will be the path to the page that the tab should navigate to when it is clicked.
    • name will be the string we display on the tab header.

  4. Select the root container of the view.
    1. In the property editor, change its mode property to percent.

    2. Now, we're going to configure the root container to use the styles we configured in the last section. Click the Binding  icon next to classes.

    3. Select a Binding Type of Expression, and set the expression to {view.params.pageURL}={page.props.path}.

    4. Click the Add Transform + button, and select a Map transform. Configure the map transform as pictured:

    5. Click OK to save the binding.

  5. Now drag in a Label component.
    1. Select the component, and change its xywidth, and height properties to 001, and 1, respectively. This will make the component take up the entire view.
    2. Set the alignVertical property on the component to center.
    3. Configure a property binding on the text property. We want to bind the label's text to the name parameter we configured in step 3. The property is we want:

    4. Finally, we're going to configure an inline style, simply to make our label look a little prettier. Click the Styles  icon next to style.  Under Text, set the Font Size to 24px. Set the Font Family to Tahoma. Set Text Align to center. Click OK.
      Your property editor should look like this:

  6. Now we need to configure navigation when our tab is clicked.
    1. Right-click on the label. Select Configure Events....
    2. Select the onClick mouse event.
    3. Click the Add  icon, and add a Navigation action.
    4. Use a type of Page, and a page of {view.params.pageURL}.

Configuring the Tab Strip

All we need to do now is create our row of tabs.

  1. Create a new View. Call it TabHeader, and give it a layout of Flex.

  2. Click on the root container for the new view. Set its direction property to column.

  3. Drag in any components or containers you'd like to appear above the tab strip in the header view. We'll use a simple Label component here (configured with similar text styling as we just configured on the tabs). Make sure to set the grow and shrink values to 1 on any components you drag in.
  4. The last thing we drag into our header will be a flex repeater component (not to be confused with a flex container, you'll find a flex repeater under Embedding in the components list).
    1. Set the grow and shrink properties on the flex repeater to 0. Set the basis to 40px.
    2. Set the path property on the flex repeater to Tab, which is the view we created in the last section.
    3. Set useDefaultViewWidth and useDefaultViewHeight to false.
    4. For the instances property, right-click and select Insert > Object. Inside of the new Object, we want to put the parameters (as type Value) needed for the tab, pageURL and name. Add an object for each desired tab.  Here's how the property editor should look:

  5. Almost done! Now we just need to make sure the project will use our new tab header.
    1. Click the Settings icon. Click the north + Add button, and select TabHeader.
    2. Click the newly created TabHeader box. Set size to 100. Click OK.

That's it! If all went according to plan, this should be your new tab strip:


  • No labels