Menu Widget
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 
.
- 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
See General remarks on widgets.
- By default, graphic properties defined at higher levels are inherited by lower levels. 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
- 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.
List of properties
Content
Data Source For New Request: Name of the data source pointing to the 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.
- 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. 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 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Label Position (Inherit) | Position of the label as regards the icon |  |
||||||||||||||||||||
| (1) | Top: Top | |||||||||||||||||||||
| (2) | Bottom: Bottom | |||||||||||||||||||||
| (3) | Left: Left | |||||||||||||||||||||
| (4) | Right: Right | |||||||||||||||||||||
Graphic properties of the label
PageGeneralFormat
|
||||||||||||||||||||||
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 
next to the item to modify its properties. 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 ].
- : 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.
: Used to duplicate a menu item used as a template. You should then click to customize the menu item.
: Used to delete a menu item.
: Used to modify the order of items in the menu.
General tab
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 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). 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.
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
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.
Position of the indicator marker as regards the icon. 
 |
 |
Distance: Distance between the indicator marker and the icon or label of the menu item.
| Distance = -1 | Distance = 0 | Distance = 1 |
|---|---|---|
 |
 |
 |
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 |
|---|---|
 |
 |
Font size: Font size of the indicator value.
ThresholdsStatus
Threshold Status: Used to define 1 to 4 quantitative thresholds using a scale of values (2 to 5 intervals). Each new threshold will be displayed in a different color.
Thresholds determine the display color of the trend value.
See the Procedure.DefineThresholds
| Reduce display mode | Expand display mode |
|---|---|
|
You can define three color segments with two thresholds.
|
You can define five color segments with four thresholds.
|
Theme
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 :
- 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. 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.
- In the General tab:
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
to duplicate it and then click 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 .
- To delete an item, click .
4. Switch to execute mode 
to view the app as it will appear on users' smartphones.
Procedure: How to define threshold values
ProcedureDefineThresholds
Step 1: Specifying the number of thresholds
1. Click 
in the Thresholds Editor Properties > Ranges domain field to switch to the Reduce mode with three thresholds.
2. Click 
to switch to the Expand mode with five thresholds.
Step 2: Specifying the threshold values
1. Enter the value for the threshold of each segment in the Status Thresholds field.
2. Select the color of each segment.
- Move the cursor over the threshold color, click
and select the color you want from the Color Picker.
- You can also enter the hexadecimal code of the color directly in the color field.
3. (optional) Click [ ON ] in Thresholds Editor Properties > Symmetric colors if you want colors to be symmetrical based on the color of the central segment.
