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.

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.