Tabbar

Introduction

Adding a Tabbar allows you to organize your user interaction screen and divide it into different screens (tabs). When the user clicks on a tab, the information relevant to that tab can be displayed.

Prerequisites

To implement tabbar, you need to know about two things - Concept field (single select) and Conditionals.

Refer the pages for Concepts and Conditional if you would like to familiarize yourself with the topics.

Tabs are a graphical representation of a Concept field. Therefore, tabs require a Concept field (single select) to work with. Clicking on a tab in a Tabbar will select that specific Concept value. When you want to show the specific information corresponding to that tab, a Conditional widget is required that will contain an expression which relates to the tab concept. Therefore, for each tab that is used, a Conditional with the desired content in it (when condition is true) should be created.

Properties

Data field - This comes populated with the single-select session variable field that holds the information of the selected tab.

Filter tabs by - Here, you can write expressions that would show/hide certain tabs in certain scenarios. For example, you might want to hide a tab for a specific user role.

Default tab - As the name indicates, this is the tab that is open by default when you enter the screen. If this is not set, then it could happen that when you enter the page, the last tab that was clicked in the session is shown, which might not be desirable. Typically, you set the first tab as the default tab.

Behavior: On change flowchart - Here, you can select a flowchart that needs to be executed on clicking any tab.

Appearance: Tab label - By default, the local name in the Concepts are shown as the tab labels. You can add expressions to change the tab labels as per your requirement.

Appearance: Display mode - There are two ways in which tabs could be shown in the Tabbar - tabs or buttons.

Tabs

Buttons

Appearance: Justified - By default, the tabs are not justified and are left-aligned as you can see from the above screenshots. Turning on this toggle will justify the Tabbar to the width of the page as shown below.

Tabs; Justified

Illustration

Consider a use case for an Employees Management System (EMS) where employees are assigned to one or more projects and each project maps to a client. Let us try to build a page with a Tabbar that consists of two tabs - Clients and Projects.

1. First, you need to create a Concept item with two children, corresponding to the two tabs needed in the tabbar - Clients and Projects.

2. Then, you need a single-select session variable with the root concept pointing to to the above Concept item.

3. Then, in the Template Editor, click on the 'Tabbar' icon and drag it to the canvas. This would prompt you to select a concept field. Select the session variable from the previous step.

Alternately, you could just drag the single-select session variable on to the canvas and select 'Create tabbar' from the prompt.

4. The canvas now shows the Tabbar. Set the default tab to 'Clients' and leave the other settings as-is. For further details on the Tabbar properties, go back to the previous section in the page.

5. Now that you have added a tabbar to your page, the next step is to define what should be shown on the screen when you click on each tab on the Tabbar. This is done by adding Conditionals as shown below.

6. The last step is to add details that need to be shown under each Conditional. For our example, add the Datagrid of 'Clients' and 'Projects' under the respective Conditionals.

Refer the page for Data grid if you would like to familiarize yourself with the topic.

You could do it like this....

Here, the conditionals are nested using 'Show when false' toggle on the conditional

or like this...

Here, the conditionals are independent of each other and not nested

It is recommended to use the second approach. This will make the Template Editor look less cluttered; otherwise, when there are more number of tabs you will end up creating so many nested levels of Conditionals.

7. There is one important thing that you could have missed. Let's find out by previewing what you have built. This is the screen that you will see on Preview.

As you see, the tab 'Clients' is selected (because it was assigned as the default tab in Step 4 above), but the Datagrid of clients that you want under this tab is not shown.

Now, when the 'Projects' tab is clicked, this is what you get. This is as expected.

When the 'Clients' tab is clicked, this is what you get. This is also as expected.

So, you see that explicitly clicking on the tabs shows the details that are expected for the tab. However, the details are not shown in a new session. This is because the single-select session variable from Step 2, [Authentication.Session.Tabs], does not yet have a value assigned in a new session. Basically, it will be UnknownConcept. So, the condition in the first Conditional in Step 6, [Authentication.Session.Tabs] = 'Tabs'.'Clients', evaluates to False (and so does the second Conditional). And nothing is shown on the screen.

Therefore, you need to amend the condition in the first Conditional to one of the below two, which effectively mean the same.

Refer the page for If-Unknown operator (?) if you would like to familiarize yourself with the operator.

Filter Concepts

It is possible to (dynamically) change the collection of items to display on the tabbar. This can be done by using the Filter tabs by- property of the tabbar. This filter works a little bit different than other filters where you can use any expression that results in a boolean. When filtering the tabbar the keyword concept is used as a variable that corresponds with the concepts in the collection.

As a result of this the expression should look like this:

concept in {a conceptset that can be dynamically created}

Example:

concept in (GetChildren('Tabbars'.'Tabs Onderzoeken') where concept:'Islive' = true)

In this example, the 'IsLive' is a concept property that is used to disable certain concepts from the tabbar by setting the property to false.

You can make use of expressions to build the conceptset dynamically for the tabs.

With +{} you can add tabs to the collection

With -{} you can remove tabs from the collection

the {} surrounding concepts make a concept set

Besides literally using concepts, you can also use ontology queries or calculated conceptset-datafields, anything that results in a set of concepts that is valid for the type of single select being used.

Example:

concept in
    {
        'Layout'.'Tabbars'.'Tab1',
        'Layout'.'Tabbars'.'Tab2',
        'Layout'.'Tabbars'.'Tab3'
    }
    +
    (
        if what you want here is true
        then {'Layout'.'Tabbars'.'Tab4'}
        else {}
    )
    +
    (
        if something else you want here is true
        then {'Layout'.'Tabbars'.'Tab5', 'Layout'.'Tabbars'.'Tab6'}
        else {}
    )
    
    -
    (
        if something you do not want here
        then {'Layout'.'Tabbars'.'Tab0'}
        else {}
    )
    +

/*finally, always the info as latest item*/
    {'Layout'.'Tabbars'.'TabInfo'}