General remarks

• You can create different types of widgets only in the Custom Widgets and My Custom Widgets categories. These categories respectively contain customized public widgets accessible to all users, and customized private widgets accessible only to their creator. Widgets in the other categories in the widget library are defined by EasyVista. You cannot create new ones.
       See the widget library.

• Widgets are defined for each page of the app. Widgets in different pages are not linked to each other.

• Each widget has specific properties that are defined using the Properties Inspector.
  • Mandatory properties are grouped in the Content section.
  • Graphic properties are grouped in the Theme section. By default, properties defined at higher levels are inherited by lower levels. You can modify each property in its specific context.  See the principles of inheritance.

• The date/time format, thousands separator and decimal separator depend on the configuration settings defined in the user information zone of the logged-in user. If these settings have not been defined, then these properties will depend on the configuration settings of the platform used by the logged-in user. In Windows, this is specified in the Control Panel > Regional and Language Options.

Best Practice

• Once you create a widget, you should rename it so you can identify its function easily. When a widget is created, its default name is the type of widget incremented by  based on the number of the same widget type in the current page.
          example   Data Viewer (3)  ==> third Data Viewer widget in the current page

PropertiesInherit

Principles of inheritance and context-specific for graphic properties

• The default values of properties in a theme are those defined in the standard stylesheet shipped with the Service Apps setup, i.e. the Foundation CSS stylesheet.
• Inherited properties values are the values defined at higher level according to the following hierarchy.

(1)     Specific configuration defined for the widget in the app (2)     In its absence, specific configuration defined for the type of widget in the theme related to the app (3)     In its absence, specific configuration defined for all widgets in the app page (4)     In its absence, specific configuration defined for all widgets in the theme associated with the app (5)     In its absence, configuration of the Service Apps standard stylesheet, i.e. the Foundation CSS stylesheet

• The Inherit box, used to manage inherited or context-specific properties, is found next to most properties.

Inherit (box is checked)		Context-specific (box is not checked)
The property is inherited from a higher level.		The property is defined for a specific context and has priority over any property defined at a higher level.
The name of the property is grayed out.		The name of the property is highlighted in blue. The context (e.g. theme or page) of the property and the property value are displayed when the cursor moves over the checkbox. Several items of information may be shown if the property was defined at different levels, e.g. for the theme as well as for the page.

example  An app contains the Incidents dashboard whose widgets inherit the colors defined for the theme. The title in the Major Incidents widget is highlighted as regards the background color and the text color because these properties are context-specific.
         

EndPropertiesInherit

List of measurement units

Measurement units are applicable to the Height, Size, Padding and Margin properties in widgets and in themes.

Note: Certain of these measurement units are not available in the Self Help widget.

• Absolute measurement units
  • px: Pixel
  • in: Inch
  • cm: Centimeter
  • mm: Millimeter 
  • %: Percentage relative to the parent item

    example  If a parent item's size is 50px, the size of the child item defined as 50% will be 25px.

• Measurement units relative to the screen size (viewport)
  • vh: Unit based on the screen height. 100vh corresponds to the entire screen height.
  • vw: Unit based on the screen width. 100vw corresponds to the entire screen width.

• Measurement units relative to fonts
  • pt: Point
  • em: Unit proportionate to the parent item's font size, or document font size if the font size is not specified. 1em = 16px if no font size is specified.
  • rem: Unit referring to the font size of the root item. This depends on the default font size defined in the <body> tag.

• Measurement units that calculate values using mathematical operators, e.g. multiplication, division, addition, subtraction, as well as all measurement units available.
  • These units can be used as variables and are fully compatible with CSS variables in the __Root widget.
  • Spaces between operators are mandatory.
  • The measurement unit must be specified in the formula. The default unit is pixel.

Widgets using a data source

General remarks

• When you delete a widget linked to a data source, the data source will remain available in the library.
• Widgets linked to dynamic data sources are automatically updated each time the app is run and each time the page is redisplayed, regardless of whether it is in execute mode or edit mode. You can also use the Auto Refresh property to define the automatic refreshment interval.

Data sources linked to widget headers / footers

Each widget can use 3 separate data sources: one for the Header, one for the Footer, and one for the widget itself. Various types of information from different sources can therefore be displayed in the same widget.
         

• You should select data sources linked to widget headers / footers via the Theme > Header / Footer properties of each widget.

Data source pointing to a database

All widgets linked to a given data source in the same page are synchronized.

• When you browse through the records in one of the widgets, the other widgets will automatically be refreshed and display the data corresponding to the selected record.
• Depending on the widget, the current record may be highlighted differently, e.g. a green box for Data Viewer widgets and an infotip for Google Maps widgets.

Best Practice

• We recommend that you use an alias to associate a data source with a database. 
• It should point to a connector when the database does not change, regardless of the step in the deployment process.
   

example 

Data source pointing to an EasyVista database

The functionalities proposed depend on the table or column used:

• Data source containing the Catalog_GUID column: Service requests can be created using the text editor: Advanced Tags  > EasyVista category > New Request.

• Data source pointing to the AM_ACTION table: EasyVista action buttons can be added using the text editor: Advanced Tags  > Workflow category.

• Data source pointing to a view linked to the AM_LOCATION table: A virtual address field is added automatically to enable you to concatenate different address fields in Service Manager.
  • The Full Address (<Table_Name>) field concatenates all Service Manager address fields.
  • This field is automatically inherited by child locations without a specific address.

Best Practice

• You can use this field together with the Google Maps widget in Content > Address to view locations on the map.
   

example 

Link between Service Apps and Service Manager

You can implement a Service Apps app in Service Manager and display data from the Service Manager database using widgets that point to EasyVista data sources.

To use filters and views that are not available in the Service Apps app, you can use a functionality to display the details of information in the relevant Service Manager screen (Note: Accessible only to users with the appropriate display rights).

Implementation principle

1. Open the graphic editor of the app.

2. Select the Theme section > Header of the widget pointing to the EasyVista data source.  See the description.

3. Check the Display box to display the header of the widget.

4. Check the Display Evse Link box to enable the functionality.

5. Configure the appearance of the link, i.e. text or icon. By default, it appears as an icon .

example

Data source containing aggregated data with the drill-down functionality

The drill-down functionality enables you to zoom in on each grouping level in the EasyVista view associated with the data source to view the complete breakdown of aggregated data. All widgets linked to a given data source in the same page are synchronized. When you change the grouping level in one of the widgets, the other widgets will automatically be refreshed and display the data corresponding to the selected level.

• In Data Viewer widgets (Note: Only in Grid mode), Bar Chart widgets and Pie/Donut Chart widgets, you can disable the drill-down functionality using the Enable Drilldown property.
• In the Dashboards widget, the functionality is not available for the Others dimension element that groups together all of the non-displayed data in the chart.

Best Practice

• You can use this functionality to present statistics in Dashboards or Data Viewer widgets.
• You can also facilitate navigation within grouping levels using the Breadcrumb widget.
   

example 

1. You use the Data Viewer widget in Grid mode to display a list of locations corresponding to the view called Equipment by location (1) and browse through different grouping levels of aggregated data. This widget is associated with the Breadcrumb widget (2) that facilitates navigation within the grouping levels displayed in a path.

2. You use the Data Viewer widget in Grid mode linked to the same data source to display the breakdown of the list of equipment for the selected location (3).

3. You display statistics on the breakdown of equipment for the selected location using two Dashboards widgets linked to the same data source (4):

• Bar Chart widget
• Pie/Donut Chart widget

4. If you change location in the Data Viewer widget (1) ==> the three other widgets will automatically be refreshed and display the data corresponding to the selected location.

5. Similarly, if you select another location by clicking another item of data in one of the Dashboards widgets (4) ==> the other widgets will automatically be refreshed and display the data corresponding to the selected location.

	====>
	====>

Widgets using the text editor

In the text editor:

• Click  to insert a new or existing image in the app.
• Click  to insert a link to another app, to a page in another app, to a web page, to a document on a website or to an email.
• Use the Advanced Tags  > Page category to insert a link to a page in the current app.