Getting access to the current tab name in the Lightswitch html client

Introduction

Imagine we have a screen with several tabs and every tab contains data driven by the same query but the query needs as input parameter the name of the current tab. So, we take the path of a kind of convention. A typical example could be we have tabs on which we visualize tags (e.g. of a Customer entity), but a tag is organised in tag categories. Our tab names are the names of these different tag categories.

By using the type of convention I described, we can drastically limit the amount of code.

The way how to do this, is very easy.

The screen layout

In order to keep it simple, I just focus in this article on a way to know under every condition, the name of the current tab. I’ll not demonstrate how to use the tab name in a query or other plumbing.

So, My screen has 3 tabs and every tab provides some info regarding the customer and has also a button, which simply shows a message box with the current tab name.

We have on the View Model also a string variable called “ActiveTab”.

So, the button click event on tab x will give:

msls.showMessageBox("active tab is " + screen.ActiveTab);

Seeding the Active tab view model property

We simply hook up a post render event on the first tab. We take the first because that’s the one which is opened when the screen opens:

myapp.AddEditCustomer.Tab1_postRender = function (element, contentItem) {
     //we don't have yet a click event so, we need to set the ActiveTab property once manually for the first tab
     contentItem.screen.ActiveTab = contentItem.name;

    $(element).closest("div[data-role='page']").find(".msls-tabs-container li").click(function (e) {
         var activeTab = $(this).data().mslsTabName;
         contentItem.screen.ActiveTab = activeTab;
     });
};

A very simple Jquery selector finds the tab list items and hooks up a click event which sets the ActiveTab view model property.

Simple comme bonjour, n’est-ce-que pas?