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.
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:
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.
In the preparation of the screen, retrieve all the data needed for each of the tabs.
In your page, create the main container for your tabs - it must have the style Tabs_Wrapper;
Add the Tabs_ClientSide web block (of the RichWidgets library) to the top of the Tabs_Wrapper container;
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:
The result of this example can be seen in the screenshot below.