Horizontal Tab Widget

Note: This type of widget is not available any more since Product name - ev sas.png version H2.2015 and is replaced by the widget Tab. Nevertheless, it continues to work on all the applications which use it.

Apps - Widget - Horizontal Tab icon.png This type of widget belongs to the Basic category in the widget library. It enables you to create a horizontal 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 amount of pages.


    Open url.png  see General remarks on widgets

  • Define the width of the widget so that all of the tabs are displayed.

Best Practice big icon.pngBest Practice

  • You should use the Horizontal Tab widget to group information in tabs that are displayed horizontally.
    • To display tabs vertically, you should use the Vertical Tab widget. 
    • To group information within sections in a multilevel menu, you should use the Accordion widget.
  • Because the length of the tab titles is limited, you should use the Accordion widget if the titles are long.


        EVApps - widget Horizontal tab - Example.png

List of properties


Tabs: List of tabs, each with a title and content. Click [ ADD ITEM ] to add a new tab. See the procedure.


    Open url.png  see Properties description


How to create a horizontal tab bar

1. Click [ ADD ITEM ]. In the Tabs field, enter the title of the first tab and specify its content. You can enter the code directly in the field or click Apps - Edit icon.png to open the text editor.

2. Repeat this procedure for the other tabs in the order in which you want to display them.

  • To change the order in the Tabs list, 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.

3. Switch to execute mode EVApps - GUI - Execute icon.png to view the horizontal tab bar as it will appear to users.

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.
Last modified by Unknown User on 2017/07/24 12:07
Created by Administrator XWiki on 2014/11/12 20:40


Recent changes
•  EV Service Manager
•  Service Apps
•  EV Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021