Menu Widget


Apps - Widget - Menu icon.png This widget belongs to the Basic category in the widget library. It is used to create an interface easily with button bars that provide direct access to an app page, a HTML page, another app, or a form for creating an incident, service request or change request without opening Product name - ev itsm.png.

  • Each menu is made up of a set of items.
  • Each item is made up of a label that may be associated with an icon visually representing the item contents and a link to the object to be opened. You can customize its colors. An indicator, dynamically calculated using the values of a data source, can also be linked to a menu item.

Notes

    Open url.png See General remarks on widgets.

  • By default, graphic properties defined at higher levels are inherited by lower levels. Open url.png See the principles of inheritance
  • You can modify the properties for all menu items in the Content section of the general properties and customize each menu item in the Data section of the item.

Caution

  • When a menu item provides a link to another app, you should ensure that users have the corresponding rights to access it. If this is not the case, then an error message will be displayed when the app is run.
  • When a menu item is used to create an incident or service request, you should ensure that users have the corresponding profile to access it. If this is not the case, then an error message will be displayed when the app is run.

Best Practice big icon.pngBest practice

  • We recommend that you use big buttons for touchscreen navigation in smartphones. 
  • In the Windows Desktop interface with a list of links to websites, we recommend that you use small icons.

Example

You want to create an app that groups a set of items together via 3 menus.

  • (1): menu consisting of 6 items displayed in 1 column.
  • (2): menu consisting of 3 items displayed in 3 columns.
  • (3): menu consisting of 4 items displayed in 2 columns.

        Apps - widget Menu - Example.png

List of properties

Content

Data Source For New Request: Name of the data source pointing to the Product name - ev itsm.png Incident, Service Request or Change Catalog.

  • You should complete this field only if you want to allow users to create an incident/service request using one of the menu items.
  • In the Data properties, edit the menu item. In the General tab, select Link Type = New Request Button.

    Example documentation icon EN.png  

  • Operation > Catalogs > Incident Catalog (List view)
  • Operation > Catalogs > Service Request Catalog (List view)
  • Operation > Service Request > New Request (IT Store List view)

Columns Number: Used to indicate the number of columns for displaying items in the menu. Open url.png See the example.

  • All columns have the same width. 
  • When there is one column, this means that items will be displayed vertically.
  • When modifications are made, items are automatically updated in the Design pane.

Label

Note: You can modify the properties of each menu item individually in the Data section.

LabelContentMenu

Properties of each menu element label 

Property Description Representation
Position of the label as regards the icon: Label Position (Inherit) (1) Top: Top EVApps - Graphic Properties - Label Position.png
(2) Bottom: Bottom
(3) Left: Left
(4) Right: Right

PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels

Data

Menus: List of items in the menu. Each item is made up of a label and, if required, an icon that visually represents its contents. Click [ADD ITEM ] to add a new one. Click Apps - Edit icon.png next to the item to modify its properties. Open url.png See the procedure.

  • Label: Name of the menu item.
    • To associate an icon, click O (1) to open the icon gallery and select the most appropriate one for the item. Once you have selected an icon, its thumbnail will appear (2).
    • To delete the associated icon, open the icon gallery and click [ CLEAR ICON ].
               Apps - widget Menu - Access to icon library.png
  • Apps - Edit icon.png : Used to modify the graphic properties or the properties of the associated indicator for the menu item in the Edit Menu Item Properties dialog box.
  • Apps - Duplicate icon.png : Used to duplicate a menu item used as a template. You should then click Apps - Edit icon.png to customize the menu item.
  • Apps - Delete icon.png : Used to delete a menu item.
  • Apps - Order objects icon.png : Used to modify the order of items in the menu.

General tab

         EVApps - widget Menu - General Properties.png

You can modify the label of the menu item (1) as well as its icon (2):

  • Click the icon to open the icon gallery.
  • Modify its colors using the Color... properties below.
     

Link Type: Type of link to be opened by the menu item.

  • Page Link: Used to open a page in the app. You should select it from the Select Page drop-down list.
  • Href (New Window): Used to open a HTML page in a new tab or window. You should indicate the URL in the Link field.
  • Href (Replace Window): Used to replace the current page by opening a HTML page in the current tab or window. You should indicate the URL in the Link field.
  • Application Button: Used to open another app. You should select it from the Select Application drop-down list. Caution: No control will be run to check that users are authorized to access the app.
  • New Request Button (Note: Only if there is a data source pointing to the Product name - ev itsm.png Incident, Service Request or Change Catalog): Used to open a form for creating an incident, service request or change request. Caution: No control will be run to check the user domain.
    • Select the category of the new incident/request from the Catalog drop-down list.
    • If the category is associated with a questionnaire, then the questionnaire will automatically open in execute mode.
  • Logout: Used to exit the app.
  • Disabled: Used to disable the hyperlink associated with the menu item.
     

Note:

InheritProperty
  • By default, Color properties are inherited from those defined at a higher level (Inherit box is checked). You can modify each property in its specific context (box is not checked). Open url.png See the principles of inheritance for graphic properties.

Cell Background Color (1): Background color of the menu item.

Icon Color (2): Color of the icon associated with the menu item.

Label Color (3): Color of the label of the menu item.
         EVApps - widget Menu - Label Icon color properties.png

Cell Background Color Hover: Background color of the menu item when the cursor moves over it.

Icon Color Hover: Color of the icon associated with the menu item when the cursor moves over it.

Label Color Hover: Color of the label of the menu item when the cursor moves over it.

Indicator tab

         EVApps - widget Menu - Indicator Properties.png

Show Indicator: Used to specify whether the indicator is associated with the menu item (box is checked) or not (box is not checked). If it is, you should define the properties below.

Note: The properties below are displayed only if the Show Indicator box is checked.

Data source: Data source used to calculate the indicator of the menu item.

Field: Used to specify how the indicator of the menu item is calculated. Click [ # ] to access the Data Picker. You can then select the data source columns or statistical aggregate functions you want.

Position: Used to define the position of the indicator marker as regards the menu item icon or label.

         Example documentation icon EN.png  Position of the indicator marker as regards the icon. EVApps - widget Menu - Indicator Position - Icon example.png

EVApps - widget Menu - Indicator Position.png EVApps - widget Menu - Indicator Position - Example.png

Distance: Distance between the indicator marker and the icon or label of the menu item.

Distance = -1 Distance = 0 Distance = 1
EVApps - widget Menu - Indicator Position - Distance Negative 1.png EVApps - widget Menu - Indicator Position - Distance 0.png EVApps - widget Menu - Indicator Position - Distance Positive 1.png

Background Color: Background color of the indicator marker.

Color: Color of the value displayed in the indicator marker.

Type: Type of marker in which the indicator value is displayed.

Circle Square
EVApps - widget Menu - Indicator Circle.png EVApps - widget Menu - Indicator Square.png

Font size: Font size of the indicator value.

Thresholds Editor Properties / Status Thresholds: Used to define 1 to  4 quantitative thresholds using a scale of values (2 to 5 intervals). Each new threshold segment will be displayed in a different color. Thresholds determine the display color of the trend value. Open url.png See the procedure.

DefineThresholds
Reduce display mode Expand display mode

You can define three color segments with two thresholds.

EVApps - widgets Dashboards - Thresholds Reduce.png

You can define five color segments with four thresholds.

EVApps - widgets Dashboards - Thresholds Expand.png

Theme

    Open url.png  See the description of properties.

Procedures

How to add a menu to an app

1. Specify the general properties of the app in Content.

2. In the Data section, click [ ADD ITEM ].

  • Enter the name of the first menu item in the Label field.
  • If you want to associate an icon, click O and select the one you want from the icon gallery.
  • Define the properties of the item using Apps - Edit icon.png:
    • In the General tab:
      • Specify the link to be opened by the item in the Link Type field.
      • Modify the graphic properties if required. By default, graphic properties defined at higher levels are inherited by lower levels. Open url.png See the principles of inheritance.
    • To associate a dynamic indicator with a menu item, select the Indicator tab.
      • Select the Show Indicator box.
      • Select the data source and specify the fields that will be used to calculate the indicator.
        • If the indicator is calculated using the values of several columns, click [ EDIT ] below the Data Transformer field and select the ones you want (Note: Not operational in version H2.2015).
        • If the indicator is calculated using the value of only one field, click [ # ] next to Field and select the one you want in the Data Picker.
      • Define the position and graphic properties of the indicator.
      • Specify thresholds to highlight the indicator value.

3. Repeat this procedure for the other menu items in the order in which you want to display them.

  • To use a menu item as a template, you should click Duplicate icon.png to duplicate it and then click Apps - Edit icon.png to customize the menu item.
  • To change the order in the Menus list, click and drag the item you want to its new position using Apps - Order objects icon.png.
  • To delete an item, click Apps - Delete icon.png.

4. Switch to execute mode EVApps - GUI - Execute icon.png to view the app as it will appear on users' smartphones.

Procedure: How to define threshold values

ProcedureDefineThresholds

1. In the Ranges domain field, select the number of thresholds you want:

  • Three thresholds: Click Apps - widgets Dashboards - Thresholds Reduce thumbnail icon.png to switch to the Reduce display mode.
  • Five thresholds: Click Apps - widgets Dashboards - Thresholds Expand thumbnail icon.png to switch to the Expand display mode.
     

2. In the Status Thresholds field, specify the threshold values:

  • Enter the value for the threshold of each segment.
             EVApps - widgets Dashboards - Thresholds Value Select.png 
  • Select the color of each segment:
    • Move the cursor over the threshold color, click EVApps - Color Palet icon 2.png and select the color you want from the Color Picker.
               EVApps - widgets Dashboards - Thresholds Color Select - Picker.png 
    • You can also enter the hexadecimal code of the color directly in the color field.
               EVApps - widgets Dashboards - Thresholds Color Select - Code.png 
  • If you want colors to be symmetrical based on the color of the central segment, select [ ON ] in Symmetric colors edition.

Example of an integration

Cisco WebEx Logo - Cisco WebEx.png 

Tags:
Last modified by Unknown User on 2017/09/15 16:36
Created by Administrator XWiki on 2014/12/15 08:30

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018