A TabControl with one line of code in the LightSwitch HTML Client

    General discussion

  • The current Microsoft LightSwitch HTML client (or CBA app) includes top level tabs for each screen, but sometimes you need lower level tab controls to use inside those top level tabs. LightSwitch is an amazing tool and with a bit of javascript and CSS you can achieve almost anything. In this blog post I will show you how to add a simple javascript library file with a little bit of CSS which will then allow you to create tab controls like the following with one single line of javascript code in a _postRender() event to get the following effect:

    The above is achieved using the following screen design:

    The TabControl group control gets the following one line of code:

    myapp.CustomerEdit.TabControl_postRender = function (element, contentItem) {
        // select the first tab by default (index = 0)
        // add a left margin of 10px to left-align the tab control with the other controls above
        LSU.renderTabStrip(element, contentItem, 0, 10, 0);  

    Read more here (LightSwitch project also available for download from there): A TabControl with one line of code in the LightSwitch HTML Client 

    Regards, Xander. My Blog

    Thursday, July 31, 2014 10:30 AM

All replies