HowTo: Using Tab Control in Panels

Official Content
This documentation is valid for:

The Tab control is used to display a set of controls grouped in different tabs. So, you can use this control when you need to organize your information in different tabs.

In this article, you will see an example of how to use this control.

Properties (each Tab)

Caption Sets the name that will be shown to the user at the top of the tab.
Image

Sets an Image beside the caption.

If the Caption field is filled, the image's size will be 24x24dips. Otherwise, the size will be 44x44dips

 

Example

Create a User Transaction object as shown below.

UserTabControl

First, apply the Work With Pattern to the Transaction (see Applying Work With Pattern).

PatternWWSDTabControl

In the General Section, below the Detail node, change how the information is displayed by including a tab control in your Layout. To do so, drag the Tab control from the toolbox:

PatternTabControl

After doing this you should obtain something similar to the following:

PatternTabControl1

Now you have the tab control in your layout. Customize it to your needs.

Using the Caption property enter "Personal" to name the first tab and "Enterprise" for the second tab. Also, delete the 3rd tab (not necessary for this example). Now you have to add the Attributes/Variables you want to show on your tabs and to do so you simply drag each control to any tab you want.

Drag "UserName" and "UserAddress" to the Personal Tab, and "UserEnterprise" and "UserJobCharge" to the Enterprise Tab.

You can also insert a Tab control into another Tab control, taking into account the spacing for both controls.

PatternTabControl2

Create a Menu object and add the WorkWith from User Transaction to it.

DashboardTabControl

Done! You have your attributes grouped.

Apple

iOSTabControl1 iOSTabControl2
iOSTabControl3
iOSTabControl4 iOSTabControl5