Tab Widget

Last modified on 2023/07/27 12:46

Apps - Widget - Horizontal Tab icon.png 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

  Open url.png 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
Apps - widget Tab - Example Horizontal.png Apps - widget Tab - Example Vertical.png

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 Apps - Application properties icon.png 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 Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
    • To define a new data source, click Apps - Add datasource icon.png 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. Open url.png 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.

Apps - widget Tab - Example Scrollable On.png

Tabs that exceed the horizontal space available are displayed in the next row.

Apps - widget Tab - Example Scrollable Off.png

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)

Apps - widget Tab - Device native style On.png

Apps - widget Tab - Device native style Off.png

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.

Apps - widget Tab - Tabs size - Default size.png

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.

Apps - widget Tab - Tabs size - Adjust width.png

Used to specify the tab size using the Tabs Width property displayed in the drop-down list.

Apps - widget Tab - Tabs size - Custom.png

Space Between Tabs: Used to define padding between tabs.

space = 0 space = 20

Apps - widget Tab - Space between tabs Off.png

Apps - widget Tab - Space between tabs On.png

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.

  • If Content Type = Page, click Apps - Edit icon.png to open the app page in the Design pane.
  • If Content Type = HTML, click Apps - Application properties icon.png to define the HTML code in the text editor.
  • Apps - Delete icon.png : Used to delete a tab.
  • Apps - Order objects icon.png : Used to modify the order of items in the tab bar.

Theme

    Open url.png See the description of properties.

GeneralElements
Graphical representation Configurable element Properties to be filled in
Graphic Properties - General elements.png (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 Apps - Application properties icon.png to open the text editor. Click Apps - Text Editor - Image icon.png 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 Apps - Order objects icon.png.
  • To delete a tab, click Apps - Delete icon.png.
  • If Content Type = Page, click Apps - Edit icon.png 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 Apps - Application properties icon.png to open the text editor.

How to retrieve the launch URL of an app

1. In the App Gallery, click Apps - Application properties icon.png next to the app you want to run.

2. In the graphic editor, click EVApps - GUI - Share icon.png in the toolbar.

            EVApps - GUI - Share Apps.png

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 Apps - Text Editor - Hyperlink icon.png 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.
Tags:
Powered by XWiki © EasyVista 2022