Creating a Tabbed Interface

Quickly setup a tabbed interface within your integration

You can implement a tabbed interface within the details block of your integration to better organize information. To start, you will setup the tab structure in your handlebars template. For this example we will create two tabs called Info and Comments.

template.hbs

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link href="#">
            Comments
        </a>
    </li>
</ul>

The HTML structure for the tabs makes use of Bootstrap tabs. You can find more information here https://getbootstrap.com/docs/4.1/components/navs/#tabs

Now that our tabs are in place we will need to trigger an action when the tab is clicked. We will trigger an action called changeTab and pass the name of the tab that we want to change to.

template.hbs

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link" href="#">
            Comments
        </a>
    </li>
</ul>

The action itself will be implemented in the actions hash of our component file. The action when called will set a variable called activeTab to the tab that was clicked on. We also initialize the activeTab variable to the name of the tab we want to start as active.

polarity.export = PolarityComponent.extend({
    activeTab: 'info',
    actions: {
        changeTab: function(tabName) {
          this.set('activeTab', tabName);
        }
    }
})

We can now use the activeTab variable in our handlebars template to set the active class on the tab that is currently active.

template.hbs

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link {{if (eq activeTab "info") "active"}}" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link {{if (eq activeTab "comments") "active"}}" href="#">
            Comments
        </a>
    </li>
</ul>

We're making use of the eq truth helper to set the active class when the activeTab variable is equal to our tab name.

Finally, we use conditionals to only show content when the appropriate tab is active.

template.hbs

{{#if (eq activeTab "info")}}
    <h1>Info</h1>
{{/if}}
{{#if (eq activeTab "comments")}}
    <h1>Comments</h1>
{{/if}}

When the user clicks on the "Info" tab, it triggers the changeTab action which will set the activeTab to the value info. This in turn will show the content within the "Info" conditional block. Likewise, when the user clicks on the "Comments" tab the activeTab value will be set to comments and the "Comments" tab content will be shown.