Theme Properties of Widgets

Last modified on 2022/11/08 13:22

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

     Open url.png 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.

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 Reset properties icon.png 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. Open url.png 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 Graphic properties - General format.png
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 Object on hover.png
Text Color On Hover (Inherit) (2) Color of the object title
Widget Height Height of the widget, in pixels

Notes:

  • 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.
EVApps - GUI - Toolbar Object Height.png
  • 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.

Best Practice icon.png    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).

Open url.png 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.            
     
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).
  • Using the Use Available Height property if it is enabled.
  • Using the Widget Height property if the Use Available Height is also disabled.

example   Box is checked.

Apps - Theme - Use content height On.png

example   Box is not checked ==> The Widget Height property is specified.

Apps - Theme - Widget height.png

Notes:

  • The box is automatically unchecked if the Use Available Height property is enabled.
  • If the box is checked, you will not be able to modify the widget height using the Widget Height property.
  • If the box is checked, the Widget Minimal Height and Widget Maximal Height properties will be displayed.
Widget Minimal Height Minimum widget height.

example   White space at the bottom of the widget.

Apps - Theme - Use content height On - Minimal value superior Widget height.png

Notes :

  • This property will be displayed only if the Use Content Height box is checked.
  • If the minimum height is greater than the widget content height, the bottom of the widget will contain white space.
  • If the minimum height is less than the widget content height, the height of the content will have priority.

Best Practice icon.png   To force the display of the widget even if there is no content and avoid invisible widgets, you should specify a minimum height.

Widget Maximum Height Maximum widget height.

example   Bottom of the widget content is truncated.

Apps - Theme - Use content height On - Maximal value inferior Widget height.png

Notes:

  • This property will be displayed only if the Use Content Height box is checked.
  • If the maximum height is less than the widget content height, the vertical scroll bar will not be displayed. Any text exceeding the maximum height will be truncated.
  • If the maximum height is greater than the widget content height, the height of the content will have priority.
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).
  • Using the Use Content Height property if it is enabled.
  • Using the Widget Height property if the Use Content Height is also disabled.

example   Box is checked.

Apps - Theme - Use available height On.png

example   Box is not checked.

Apps - Theme - Use available height Off.png

Notes:

  • The box is automatically unchecked if the Use Content Height property is enabled.
  • If the box is checked, you will not be able to modify the widget height using the Widget Height property.

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

EVApps - widgets Properties - Theme - Header-Footer.png
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 Graphic properties - General format.png
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 Apps - Edit icon.png 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. Open url.png 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 Apps - Edit Html icon.png to use the text editor. Header Footer - Example.png

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

  • An app is implemented in Service Manager to display incidents using a graphic widget that points to an EasyVista data source.
  • Click Display popup icon.png to display the List of incidents screen in Service Manager.
Header display evse link.png

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 Display popup icon.png.
  • Caution: The functionality will appear in Service Manager only if the Header > Display box is checked in the widget header.

Best Practice icon.png    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

EVApps - widgets Properties - Theme - Border style-color-size.png

Color (Inherit) Border color
Size (Inherit) Border width

Best Practice icon.png    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
EVApps - widgets Properties - Theme - Border corner.png

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)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

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
EVApps - widgets Properties - Theme - Shadow Example A.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
EVApps - widgets Properties - Theme - Shadow Example B.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
EVApps - widgets Properties - Theme - Shadow Example C.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 0px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example D.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example E.png
  • Horizontal Position = 0px
  • Vertical Position = 0px
  • Blur Radial = 5px
  • Spread Distance = 0px
EVApps - widgets Properties - Theme - Shadow Example F.png
  • 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 EVApps - widgets Properties - Theme - Padding.png
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 EVApps - widgets Properties - Theme - Margin.png
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:
  • Top: Top border
  • Bottom: Bottom border
  • Left: Left border
  • Right: Right border

Menu widgets

Property Description Representation
Cell Background Color (Inherit) Background color of each menu item EVApps - widgets Properties - Theme - Cell Style.png
  • (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 EVApps - widgets Properties - Theme - Cell Style border radius.png
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 properties - Icon size.png
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 EVApps - widgets Properties - Theme - Grid Style.png
(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 Graphic properties - General format.png
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 Apps - Application properties icon.png in the app toolbar.
The graphic editor will appear.

3. Select the widget you want to configure.

     or

  • Go to the Objects pane.
  • Click Apps - Manage widgets icon.png and then click Apps - Edit icon.png 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 EVApps - GUI - Execute icon.png 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.
        Apps - widget Data Viewer - Animations Editor.png

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 Apps - Play animation icon.png to run the animation again.
    • Click x in the drop-down list to delete the effect.
  • Delay (0 - 4)s: Time in seconds before the animation is run.
  • Duration (0 - 4)s: Duration in seconds required for running the animation.           
     

Best Practice icon.png  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 Apps - Edit icon.png.
  • To define a new data source, click Apps - Add datasource icon.png Add Data Source in the Objets pane.

3. Enter the HTML code directly in the field or click Apps - Edit Html icon.png to open the text editor.

4. Select the datasource values you want to insert in the widget header/footer via the Data Picker: click Apps - Text Editor - Advanced tags icon.png and select the Data Picker category.

Example Html code
EVApps - widgets Properties - Theme - Header-Footer Example.png 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>
Tags:
Powered by XWiki © EasyVista 2022