HOWTO create Client Side Tabs in OutSystems applications

HOWTO create Client Side Tabs in OutSystems applications

  

OutSystems makes available a Web UI library called the RichWidgets. One of the behaviors that you can find in this library are client side tabs. With the client side tabs widget, you can create a tabbed screen in which the whole content is loaded on the first request (see the screenshot below).

The benefit of client side tabs is the fact that switching between tabs is extremely fast (it is a client side operation). On the other hand, you can expect for the first screen load to be a heavier operation due to the fact that all the tabs content has to be loaded.

The goal of this HowTo is to give you an overview of how you can use the OutSystems client side tabs widget.

This HowTo includes an example implementation of client side tabs in the attached eSpace ClientTabs_Sample.oml.

Using the Client Side Tabs widget

To explain the usage of the OutSystems client side tabs widget, I will use a simple example. In this example we want to do the following:

  • Create a Employee_Edit screen in with 3 tabs;
  • The first tab is the Employee tab, in which we can edit the general employee data.
  • The second tab is the Departments tab, in which we can define the association of the employee to the several company departments.
  • The third tab is the General Information tab. This tab should be disabled.

You can see the implementation of this example in the attached eSpace ClientTabs_Sample.oml (developed in Service Studio 5.1). To see it working, simply publish the eSpace in your community edition.

From a high level perspective, to implement the tabs of the Employee_Edit screen, we simply have to create a container structure like the one depicted below. A detailed description of how the example is implemented follows.

To implement the Employee_Edit screen client side tabs, we have to do the following:

 

  1. In the preparation of the screen, retrieve all the data needed for each of the tabs.

  2. In your page, create the main container for your tabs - it must have the style Tabs_Wrapper;

  3. Add the Tabs_ClientSide web block (of the RichWidgets library) to the top of the Tabs_Wrapper container;

  4. For each tab that you want to create, insert a container with style Tabs_TabBody inside the Tabs_Wrapper container and after the Tabs_ClientSide web block. Each container of these will generate a tab in the user interface:

    • Specify the name of the tab generated for each container by setting it in the title advanced property of the container.
    • You can specify if the tab is active or inactive by setting the enabled property as "true" or "false".

     

  5. The result of this example can be seen in the screenshot below.

Kind Regards,

Daniel Lourenço
OutSystems

Is there a way to execute an action on switching a tab? (we're using OS4.2)

Kind regards,
Matthias Preuter
Hi Mathias,

The Tabs_ClientSide web block has some parameters that let you specify the javascript that is executed on certain events (being one of them, the tab activation). The parameters of the Tabs_ClientSide web block are the following:
  • InitialActiveTab - The Id or the title extended property of the tab that will be activated when the screen is first loaded. If there is more than one tab with the same title, the first one is used. Defaults to the first tab.
  • RememberActiveTab - When set to True, and the InitialActiveTab parameter is not specified, when the screen is first loaded the tab that will be active will be the one that last tab that was active during the same session. Defaults to True.
  • OnLoading - The JavaScript to be called before the rendering of the tab controller.
  • OnLoaded - The JavaScript to be called after the rendering of the tab controller.
  • OnTabActivation - The JavaScript to be called when the active tab changes. Receives a parameter named 'title' with the title of the active tab.
  • IgnoreErrors - When set to True, disables the display of error messages.
If you want to introduct a piece of logic when a Tab is selected, you should use the OnTabActivation parameter. From your description, I understand that you want to execute a Screen Sction (that is a server side operation). To do that, you will simply have to put in the OnTabActivation parameter the javascript code that activates a Button on your screen that executes the desired Screen Action. In order to avoid having your screen refreshing due to the fact that you are invoking a Screen Action, you have to make sure that the screen action method is set to Ajax.

Attached an augmented version of the example ClientTabs_Sample.oml eSpace in which you can see how this can be done. In the example, when you change tab, a screen action OnTabActivation is called that updates with Ajax a line in the header that says Tab <name of tab> was opened at <open date time>.

You will need Service Studio 5.1 to open the example, but you can do exactly the same thing in the version 4.2 . The screenshot below gives you an overview of the solution.




Kind Regards,

Daniel Lourenço
OutSystems
Could you send a 4.2 version of the ClientTabs_sample.oml
Hi Mathias. Unfortunately there is no downgrade functionality, but you can install Service Studio 5.1 to see how it works and replicate the behavior in your application.

Please fell free to post any difficulties you may have here.

Regards,

Daniel Lourenço
OutSystems
Is it possible to activate a tab based upon results from a table within the tab_wrapper block? In the oml provided, when you activate the department associate button, returns value ListRecords3.Current.Department.Department which has value "Sales". Setting an IF function in either the display or the enable parameters works fine if you click results from top of the list down, but overwrites the tabs when going from bottom up, or various. Possibly a way to refresh the tab title bar?
Hi Daniel,

Could you give me some help on this topic:

http://www.outsystems.com/NetworkForums/ViewTopic.aspx?Topic=Tabs_ClientSide_SetNextActiveTab-doesn't-work-on-OS-5.0%3f

Thanks a lot.

Regards,
Pedro Domingues
I am basically showing/hiding a table list outside the edit record widget with client side tabs and this post help me solve the problem.

Thanks!
Is the issue with 8 already fixed?
somehow the automatic adding of for example OSInline etc. will screw up the javascript