Vertical Tab Widget

Last modified on 2023/01/23 12:12

Note: This type of widget is not available any more since Service Apps 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.

Notes

     Open url.png  see General remarks on widgets

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

Best 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.

Example

    EVApps - widget Vertical tab - Example.png

List of properties

Content

Tabs: List of tabs, each with a title and content. Click Add Item to add a new tab.

Theme

 Open url.png  see Properties description

Procedures

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.

Tags:
Powered by XWiki © EasyVista 2022