Theme Properties of Widgets
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
|
||||||||||||||||||||||
PageGeneralFormat_LineHeight
|
||||||||||||||||||||||
ColorOnHover |
||||||||||||||||||||||
Widget Height | Height of the widget, in pixels | |||||||||||||||||||||
Notes: |
||||||||||||||||||||||
|
||||||||||||||||||||||
|
![]() |
|||||||||||||||||||||
|
||||||||||||||||||||||
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).
|
example You want to display the widget with a fade effect when the page is loaded. | ||||||||||||||||||||
Note: Specific behavior of the Data Viewer widget |
||||||||||||||||||||||
|
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.
Property | Description | Representation | |
---|---|---|---|
Use Content Height | Used to indicate whether the height of a widget will be resized automatically so that users can see all of its contents without using a vertical scroll bar (box is checked) or if the widget height will remain fixed (box is not checked).
|
example Box is checked. example Box is not checked ==> The Widget Height property is specified. |
|
Notes: |
|||
|
|||
Widget Minimal Height | Minimum widget height. |
example White space at the bottom of the widget. |
|
Notes : |
|||
|
|||
Widget Maximum Height | Maximum widget height. |
example Bottom of the widget content is truncated. |
|
Notes: |
|||
|
|||
Use Available Height | Used to indicate whether the widget will be resized automatically to occupy all of the available height down to the bottom of the page (box is checked) or if the widget height will remain fixed (box is not checked).
|
example Box is checked. example Box is not checked. |
|
Notes: |
|||
|
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
|
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 ![]() |
||
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. |
|||
Header/Footer | Content of the widget header or footer. You can enter the content directly in the field or click ![]() |
![]() |
|
Note:
|
|||
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
|
|
![]() |
|||
Note:
|
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 | ||
|
|||
Radius (Inherit) | Rounded corners for the border in pixels:
|
![]() |
|
Notes : |
|||
|
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 |
|
|||||||
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 | |
---|---|---|---|---|
![]() |
|
![]() |
|
|
![]() |
|
![]() |
|
|
![]() |
|
![]() |
|
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
Property | Description | Representation | |
---|---|---|---|
Cell Template Border Color (Inherit) | Color of the cell border | ||
Cell Template Padding (Inherit) | Padding between the cell contents and the widget border in pixels:
|
Menu widgets
Property | Description | Representation | |
---|---|---|---|
Cell Background Color (Inherit) | Background color of each menu item | ![]()
|
|
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.
|
||
Cell Padding (Inherit) | Padding between the menu item and the widget border in pixels.
|
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
|
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.
EnableAnimation_Procedure
- Select Animation: Click to show the drop-down list and select the category you want. Click to select the effect you want. The animation will automatically run in the preview pane.
- Click
to run the animation again.
- Click x in the drop-down list to delete the effect.
- Click
- Delay (0 - 4)s: Time in seconds before the animation is run.
- Duration (0 - 4)s: Duration in seconds required for running the animation.
If the page load time or network is slow, you should increase the value in Delay so that the users can view animation correctly.
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> |