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


 Open url.png  see General remarks on widgets

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

Best Practice big icon.pngBest Practice

  • You should use the Vertical Tab widget to group information in tabs that are displayed vertically.
    • To display tabs horizontally, you should use the Horizontal 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 Vertical 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 vertical 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 vertical 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.



Powered by XWiki © EasyVista 2022