The Theme section is available on each widget via the properties inspector. It groups all the graphic properties of the widget.

Modifications are automatically reflected in the Design pane of the graphic editor.

Notes

      See General remarks on widgets.

• The theme that defines the style guide, e.g. background color, borders, fonts, etc. of the app is selected via the general properties.

• Properties apply to all types of widgets, except if mentioned otherwise for a specific group of properties.

• Most properties have an Inherit checkbox. This is used to manage inherited or context-specific graphic properties for the widgets.  See Principles of inheritance and context-specific for graphic properties.

Caution

• HTML Script widgets are used to integrate scripts with their own stylesheet. As such, certain theme properties defined in the widget, page or app may not be applied.
• The behavior of certain properties may vary depending on the Web browser.

Best Practice

• You can use the  icon available in certain properties to reset all of their settings to their default value.

Characteristics specific to versions 2016 and earlier

• The General properties section display two properties, Hide on Small Devices and On Small Devices Only. They are used to manage the Responsive mode for each widget.  See the description.

Properties description

General properties

Propertie		Description	Representation
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor
PageGeneralFormat_LineHeight Line-Height (Inherit) Height of the row containing the object in pixels
ColorOnHover When you move the cursor over the title of the object: Background Color On Hover (Inherit) (1) Background color of the object Text Color On Hover (Inherit) (2) Color of the object title
Widget Height		Height of the widget, in pixels
Notes:
Not applicable to Breadcrumbs widgets.
You can also modify the height in the Design pane by placing the cursor at the bottom of the widget position and moving the gray bar up or down to adjust its height.
If the Use Content Height and Use Available Height properties are present (applicable to the Data Viewer, HTML Script, Secured HTML and HTML Composer widgets), you can enter a value for the height only if the two boxes are not checked. A vertical scroll bar will appear within the widget if its contents are partially displayed.    To place several widgets with the same height in a given row, we recommend that you specify the height in pixels for each widget.
Enable Entry Animation		Used to indicate whether an animation is present on the widget (box is checked - the animation will be run every time the page is loaded) or if no animation is present (box is not checked). See the procedure How to define an animation on a widget	example   You want to display the widget with a fade effect when the page is loaded.
Note: Specific behavior of the Data Viewer widget
In Tile and List display modes, you can insert an animation in cells using the Enable Custom … Animation property. If this is the case, you should not use animations in the Theme section.

Data Viewer, HTML Script, Secured HTML and HTML Composer widgets

Note: Specific behavior of the Data viewer widget

• The same principle is applied to the height, apart from the vertical scrollbar used to view records.
• When the Use Available Height property is enabled, the widget uses the standard browser scrollbar.
• When the Use Content Height property is enabled, the widget uses an integrated scrollbar whose width is thinner.            
   

Header / Footer

HeaderFooter_CommonProperties

Properties of the widgets header and footer.

(1)   Header section: Properties of the widgets header (2)   Footer section: Properties of the widgets footer

Property		Description	Representation
Height (Inherit)		Height of the element in pixels
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

EndHeaderFooter_CommonProperties

Display		Used to indicate if the widget header or footer should be displayed (box is checked) or hidden (box is not checked).
Data source		Data source linked to the widget header or footer. Click to modify it.
Note: Each widget can point to three data sources, - one data source linked to the header, one linked to the footer and one linked to the widget itself. See General remarks on widgets.
Header/Footer		Content of the widget header or footer. You can enter the content directly in the field or click to use the text editor.
Note: Format the text using graphic properties, e.g. font, color, etc. To display data source fields, open the Data Picker in the text editor.   See How to define the widget header and footer.
Display Evse Link		If the app is implemented in Service Manager, this is used to indicate if the details of information retrieved by the widget can be displayed in the relevant Service Manager screen (box is checked) or not (box is not checked). If the details are to be displayed, the relevant screen can be accessed via a text link or an icon link.	example An app is implemented in Service Manager to display incidents using a graphic widget that points to an EasyVista data source. Click to display the List of incidents screen in Service Manager.
Note: The property is available only for widgets pointing to an EasyVista data source. Only users with the appropriate display rights for this information can access the functionality in Service Manager. By default, the link appears as an icon . Caution: The functionality will appear in Service Manager only if the Header > Display box is checked in the widget header.    You should use this functionality if you want to display data using filters and views and if these filters and views are not available in the Service Apps app.

Border

Border_CommonProperties

Properties for formatting borders around the widget

Property		Description	Representation
Style (Inherit)		Border style, e.g. dotted, solid line, double solid line
Color (Inherit)		Border color
Size (Inherit)		Border width
Define the general properties of all borders (1). You can then define the properties specific to each border if required (2): Top: Top border Bottom: Bottom border Left: Left border Right: Right border
Radius (Inherit)		Rounded corners for the border in pixels: Top Corner Left: Top left corner Top Corner Right: Top right corner Bottom Corner Left: Bottom left corner Bottom Corner Right: Bottom right corner
Notes :
Enter 0 if you want the corner of the border to be a right angle (1). The higher the value, the more rounded the corner (2).

EndBorder_CommonProperties

Box Shadow

BoxShadow_CommonProperties

Properties for formatting the shadow of the widget border

Note: Not applicable to Breadcrumbs widgets.

Property		Description	Representation
Horizontal Position		Width of the shadow starting from the left (negative value) or from the right (positive value) of the widget border
Vertical Position		Width of the shadow starting from the top (negative value) or from the bottom (positive value) of the widget border
Blur Radial		Intensity of the blur applied to the shadow
Spread Distance		Distance of the shadow from the widget border	Negative value (- 40 px) Positive value (40 px)
Color (Inherit)		Color of the shadow
Opacity		Transparency of the shadow (the higher the value, the more visible the shadow)

Examples of shadow settings

Example	Setting		Example	Setting
	Horizontal Position = -5px Vertical Position = -5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px
	Horizontal Position = -5px Vertical Position = -5px Blur Radial = 0px Spread Distance = 5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px Spread Distance = 5px
	Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 0px			Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 5px

EndBoxShadow_CommonProperties

Padding

Padding_CommonProperties

Padding between the widget content and its border

Property		Description	Representation
Padding Top (Inherit)	(1)	Padding between the top edge of the widget content and the widget's top border
Padding Bottom (Inherit)	(2)	Padding between the bottom edge of the widget content and the widget's bottom border
Padding Left (Inherit)	(3)	Padding between the left edge of the widget content and the widget's left border
Padding Right (Inherit)	(4)	Padding between the right edge of the widget content and the widget's right border

EndPadding_CommonProperties

Margin

Margin_CommonProperties

Widget margins as regards its position (row/column)

Note: Not applicable to Breadcrumbs widgets.

Property		Description	Representation
Margin Top (Inherit)	(1)	Distance between the top edge of the row in which the widget is positioned and the widget's top border
Margin Bottom (Inherit)	(2)	Distance between the bottom edge of the row in which the widget is positioned and the widget's bottom border
Margin Left (Inherit)	(3)	Distance between the left edge of the column in which the widget is positioned and the widget's left border
Margin Right (Inherit)	(4)	Distance between the right edge of the column in which the widget is positioned and the widget's right border

EndMargin_CommonProperties

Cell Style

Used to define the formatting of table cells (Grid mode)

Data Viewer widgets

Menu widgets

Property		Description	Representation
Cell Background Color (Inherit)		Background color of each menu item	(1)   Cell Background Color (2)   Background Color On Hover (3)   Icon Color On Hover (4)   Text Color On Hover
Opacity On Hover (Inherit)		Transparency of the menu item when the cursor moves over it
Background Color On Hover (Inherit)		Background color of the menu item when the cursor moves over it
Text Color On Hover (Inherit)		Color of the text of each menu item when the cursor moves over it
Cell Height (Inherit)		Height of each menu item. Note: When the height of the widget is less than the height of the menu item, a vertical scroll bar is automatically displayed.
Cell Width (Inherit)		Width of each menu item
Cell Border Radius (Inherit)		Radius of each menu item, for displaying them in a circle
Cell Margin (Inherit)		Padding between the menu item and the widget border in pixels. Top: Top border Bottom: Bottom border Left: Left border Right: Right border
Cell Padding (Inherit)		Padding between the menu item and the widget border in pixels. Top: Top border Bottom: Bottom border Left: Left border Right: Right border

Icon

Menu widgets

Property		Description	Representation
Icon Size (Inherit)		Size of each icon associated with the menu item in pixels. Note: This property is applicable only to images in the icon gallery defined by EasyVista.
Icon Color (Inherit)		Color of each icon associated with the menu item. Note: This property is applicable only to images in the icon gallery defined by EasyVista.
Icon Color On Hover (Inherit)		Color of each icon associated with the menu item when the cursor moves over it. Note: This property is applicable only to images in the icon gallery defined by EasyVista.

Grid Style

Used to define the formatting of the table (Grid mode)

Data Viewer widgets

Property		Description	Representation
Element: Object to format	(1)	Header: Header row
	(2)	Even Line: Even-numbered rows
	(3)	Odd Line: Odd-numbered rows
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

Procedures

How to access graphic properties

Step 1: Select the widget.

1. Go to the App Gallery.

2. Click  in the app toolbar.
The graphic editor will appear.

3. Select the widget you want to configure.

• Click the widget in the Design pane.

     or

• Go to the Objects pane.
• Click  and then click  next to the widget.

Properties specific to the widget will appear.

Step 2: Define the graphic properties of the widget.

1. Go to Theme section in the Properties Inspector.

2. Define the graphic properties.

3. Click  to run the app and check that the widget is correctly configured.

How to define an animation for a widget

1. Select the Enable Entry Animation box.
        

2. Click the button below the Select Entry Animation property and define the attributes of the animation in the editor.

How to define the header or the footer of a widget

1. Select the Display box in the relevant Header / Footer section depending on the object you want to define.

2. (optional) Select the data source linked to the widget header / footer.

• To modify the data source or to view its contents, you should click .
• To define a new data source, click Add Data Source in the Objets pane.

3. Enter the HTML code directly in the field or click  to open the text editor.

4. Select the datasource values you want to insert in the widget header/footer via the Data Picker: click  and select the Data Picker category.

Example		Html code
		Header: Incidents title <div class="title-header">      <h3 style="text-align: center;"><b>Incidents</b></h3>      <hr style="width:90%; margin-left: 5%; margin-right: 5%;" /> </div>
		Footer: Create Incident button <div class="title-footer">      <hr style="width:90%; margin-left: 5%; margin-right: 5%;" />      <p style="text-align: center;">          <button pagelink="537db18ac0fbc" style="width:90%;">Create Incident</button>      </p> </div>