This widget belongs to the Basic category in the widget library. It enables you to create a horizontal or vertical tab bar that can contain text or images, point to a HTML page, or call a page from the app or from another app. This is used to display a maximum amount of information in the least number of pages.

Notes

   See General remarks on widgets.

• A Tab widget can only display one type of information, - app pages or other information.
• Each tab title can contain HTML code and/or an image defined in the text editor.

Best practice

• Define the height of the widget so that all of the tabs are displayed.
• Use the Theme > Set Full Height property to automatically display the maximum height of the tab contents in execute mode.
• If you want to group a small amount of information within sections in a multilevel menu, you should use the Accordion widget.
• To add an image to a tab title, you can use the icons found in the icon gallery provided by . You can then apply the same graphic properties to the tab title, i.e. size, font, or color.

List of properties

Content

Display Type: Used to indicate the orientation of the tab bar.

Horizontal	Vertical

Content Type: Origin of the information displayed in each tab. The properties displayed depend on the option selected.

• Page: Used to display the contents of another page in the app. Click [ ADD ITEM ] in the Tabs Page section to add a tab and select the page you want from the drop-down list.

• HTML: Used to display information using HTML code. Click [ ADD ITEM ] in the Tabs section to add a tab and click  to open the text editor and define the code.
   

  DataSource

  Data Source: External data source associated with the widget. 

  • The drop-down list displays all of the data sources available in the app. 
  • To modify the data source or to view its contents, you should click . The  button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define a new data source, click Add Data Source in the Objects pane.

  DataTransformer

  Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.

  • Click Setup / Preview Data below the Data Transformer property to open the dedicated window.  See the description.

Scrollable Tabs: If the resolution or screen of your device prevents the display of all tabs in a single row, this enables you to specify how the hidden tabs should be displayed.

DeviceNativeStyle

Box is checked (smartphone mode: Android or iPhone)	Box is not checked (standard mode)

Tabs Size: Used to define the width of tabs.

Space Between Tabs: Used to define padding between tabs.

Tabs/Tabs Page: List of items in the tab bar. Each item is made up of a label and, if required, an icon that visually represents the contents of the tab. Click [ ADD ITEM ] to add each tab.

• Title: Name of the tab. Click  to associate an icon. In the text editor, click  to open the icon gallery.

• If Content Type = Page, click  to open the app page in the Design pane.

• If Content Type = HTML, click  to define the HTML code in the text editor.

•  : Used to delete a tab.

•  : Used to modify the order of items in the tab bar.

Theme

     See the description of properties.

GeneralElements

Graphical representation	Configurable element	Properties to be filled in
	(1) Widget	General properties > Element = Widget Text Color: text color of the widget Background Color: background color of the widget
	(2) Section active	General properties > Element = Selection (Active) Text Color: title color of the active section Background Color: background color of the active section
	(3)Inactives sections	General properties > Element = Selection (Secondary) Text Color: title color of the inactive sections Background Color: background color of the inactive sections

Procedures

How to create a tab bar

1. Define the orientation of the tab bar in the Display Type field (Horizontal/Vertical). Define the origin of information to be displayed in the Content Type field (HTML/Page).

2. Click [ ADD ITEM ] and specify the information for the first tab in the Tabs Page section if Content Type = Page, or in the Tab section if Content Type = HTML.

• Enter the name of the tab in the Title field. To associate an icon, click  to open the text editor. Click  and select the image you want from the icon gallery.
• You can select the app page to display or you can define the HTML code.

3. Repeat this procedure to create other tabs.

• To change the order in which the tabs are displayed, click and drag the tab you want to its new position using .

• To delete a tab, click .

• If Content Type = Page, click  to display the app page contents in the Design pane. Any modification made will automatically be visible in the relevant tab.

• If Content Type = HTML, click  to open the text editor.

How to retrieve the launch URL of an app

1. In the App Gallery, click  next to the app you want to run.

2. In the graphic editor, click  in the toolbar.

3. Copy the app launch URL.

4. Return on your app and paste the URL:

• either in the URL property of a hyperlink inserted on a Label, Header/Footer or HTML Code properties of a widget (via  in the text editor);

• or in the URL to Load property of the Button widget ;

• or in the Data > Select Link Type property of the Menu widget.