Tab Widget
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 EasyVista. 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.
Box is checked (Scrolling mode) | Box is not checked |
---|---|
If the number of tabs exceeds the horizontal space available, you can display the hidden tabs by clicking the arrow > at the end of the tab bar. Note: If your device has a touchscreen, you can also use a finger to scroll. |
Tabs that exceed the horizontal space available are displayed in the next row. |
DeviceNativeStyle
Device Native Style: For an app designed for use on a smartphone, this indicates if the widget should be displayed according to the style guide of the smartphone browser (box is checked) or according to the standard Service Apps style (box is not checked).
Box is checked (smartphone mode: Android or iPhone) | Box is not checked (standard Service Apps mode) |
---|---|
|
|
Tabs Size: Used to define the width of tabs.
Default Size option | Adjust Width option | Custom... option |
---|---|---|
Used to resize tabs automatically to fit the size of the name. |
Used to adjust the width of tabs automatically to occupy the entire width of the widget. Note: Lengthy text will be displayed across two or more rows. |
Used to specify the tab size using the Tabs Width property displayed in the drop-down list. |
Space Between Tabs: Used to define padding between tabs.
space = 0 | space = 20 |
---|---|
|
|
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
|
(2) Section active | General properties > Element = Selection (Active)
|
|
(3)Inactives sections | General properties > Element = Selection (Secondary)
|
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.