Theme Properties Widgets


You can define the graphic properties of widgets in two different places:

  • In a theme: Properties applicable to all widgets of a given type in all apps associated with the theme.
  • In an app: Properties applicable only to a given type of widget in this app.

Notes

  • Properties apply to all types of widgets, except if mentioned otherwise for a specific group of properties.
  • A widget contains a header and a footer that are both components of the object.
  • Priority is given to the font and color defined using the text editor as compared with theme properties defined.
  • Certain properties are followed by the Inherit box, used to manage inherited or context-specific properties:
    • Box is checked (by default): The property is inherited from a higher level.
    • Box is not checked: The property is defined for a specific context and has priority over inherited properties.
  • Reset properties icon.png available in certain properties to reset all of the settings to their default value.
  • Access graphic properties:
    • In a theme:
      • Open the theme editor.
      • Click the type of widget you want in the Design pane.
        or
        In the Objects pane, click Apps - Current theme icon.png and select the Widgets tab. Open the category of the widget type and select the one you want.
    • In an app:
      • Open the graphic editor.
      • Click the widget you want in the Design pane.
        or
        In the Objects pane, click Apps - Manage widgets icon.png and then click Apps - Edit icon.png next to the widget you want.

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.

General properties

Property Description Representation
PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels

When you move the cursor over the title of the object

Background Color On Hover (Inherit) (1) Background color of the object EVApps - Graphic Properties - Title Bar Background Text Color.png
Text Color On Hover (Inherit) (2) Color of the object text
For all types of widgets except Breadcrumb widgets
Widget Height Height of the widget, in pixels EVApps - GUI - Toolbar Object Height.png
  • 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.

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.

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

Open url.png See the specific behavior of the Data Viewer widget

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.

(box is checked

Apps - Theme - Use content height On.png

(box is not checked and the Widget Height property is specified)

Apps - Theme - Widget height.png

  • 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.

(white space at the bottom of the widget)

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

  • 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.

(bottom of the widget content is truncated)

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

  • Caution: 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.

(box is checked)(box is not checked)

Apps - Theme - Use available height On.pngApps - Theme - Use available height Off.png

  • 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.
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.
For all types of widgets

Open url.png See the specific behavior of the Data Viewer widget.

Enable Entry Animation Used to insert, in a widget, animation that will be run when the page containing the widget is loaded (box is checked).
Example documentation icon EN.png You want to display the widget with a fade effect when the page is loaded.
Apps - widget Data Viewer - Animations Editor.png
  • Select the Enable Entry Animation box.
  • 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.

Note: Specific behavior of the Data Viewer widget. You can insert an animation in cells using the Enable Custom ... Animation property available in the Tile and List display modes.
Best Practice icon.png   If you insert an animation using these properties, you should not define animations in the Theme section.
For all types of widgets
On Small Devices Only Used to configure a version of the widget for each type of device, e.g. PC, smartphone or tablet.
Hide on Small Devices Used to indicate if the widget should be hidden (box is checked) or displayed (box is not checked) on small device screens, e.g. smartphone or tablet. Note: On big device screens, e.g. PC or TV, all widgets are displayed, regardless of the option enabled.

Best Practice icon.png

  • To display a widget on all device screens, i.e. PC, smartphone and tablet, unselect both boxes.
  • In the graphic editor, click Apps - GUI - Mobile view icon.png (Mobile mode) to view only the widgets to be displayed on small devices. Click Apps - GUI - Desktop view icon.png (Desktop mode) to hide them.

Header / Footer

Properties of the widget header and footer that can contain text, data from a data source or images

Property Description Representation
For all types of widgets

Object to format:

Header (1) Widget header

EVApps - widgets Properties - Theme - Header-Footer.png

Footer (2) Widget footer
  • Select the Display box in the relevant section to display the widget header or footer.
  • Enter the HTML code directly in the field or click Apps - Edit Html icon.png to open the text editor.
Height (Inherit) Height of the element in pixels
PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels
Example HTML code in the widget header (Header) HTML code in the widget footer (Footer)
EVApps - widgets Properties - Theme - Header-Footer Example.png

Incidents title in the header

<div class="title-header">
    <h3 style="text-align: center;"><b>Incidents</b></h3>
    <hr style="width:90%; margin-left: 5%; margin-right: 5%;" />
</div>

[ CREATE INCIDENT ] button in the footer

<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>

Border

Properties for formatting borders around the widget

Property Description Representation
For all types of widgets
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

...Corner (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

  • 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).
  • Box Shadow

    Properties for formatting the shadow of the widget border

    Property Description Representation
    For all types of widgets except Breadcrumb widgets
    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

    Cell Style

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

    s
    Property Description Representation
    Only for Data Viewer widgets
    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
    Only for Menu widgets
    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
    Icon Color On Hover (Inherit) Background 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 Logo - EasyVista.png.
    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
    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
    Inside 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
  • Grid Style

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

    Property Description Representation
    Only for Data Viewer widgets

    Object to format:

    Element (1) Header: Header row EVApps - widgets Properties - Theme - Grid Style.png
    (2) Even Line: Even-numbered rows
    (3) Odd Line: Odd-numbered rows
    PageGeneralFormat
    For all types of widgets
    Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
    Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
    Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
    Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
    Background Color (Inherit) (5) Background color of the widget
    Text Color (Inherit) (6) Color of the text displayed by the widget

    Note: Priority is given to the font and color defined using the text editor

    Line-Height (Inherit) Height of the row containing the object in pixels

    Margin

    Widget margins as regards its position (row/column)

    Property Description Representation
    For all types of widgets except Breadcrumb widgets
    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

    Padding

    Padding between the widget content and its border

    Property Description Representation
    For all types of widgets
    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
    Tags:
    Last modified by Unknown User on 2018/04/14 10:13
    Created by Administrator XWiki on 2014/09/02 11:56

    Shortcuts

    Recent Updates

    Haven't been here in a while? Here's what changed recently:

    -   Product name - ev itsm.png
    -   Product name - ev sas.png

    Interesting Content

    How to Automate Integration
    Add a Shortcut to an App
    History
    Quick Dashboard
    Full text search - Stop Words

    Powered by XWiki ©, EasyVista 2018