Properties of Widget Types in the Theme Editor

Last modified on 2022/05/28 10:53

The graphic properties of widget types defined in a theme will apply to all apps associated with this theme. 

You can define them using the theme editor (Widgets tab). The properties are grouped into different sections: 

  • The Theme section is available for each widget type.
  • Other sections are specific to the widget type.

Notes

  • You can define the properties of widgets in an app, using the graphic editor. In this case, the properties will be defined only for the selected widget and will apply only to this app.

Properties description

Menu widget type

    Open url.png See the description.

Content > Label

LabelContentMenu

Properties of each menu element label.

Property Description Representation
Label Position (Inherit) Position of the label as regards the icon EVApps - Graphic Properties - Label Position.png
(1) Top: Top
(2) Bottom: Bottom
(3) Left: Left
(4) Right: Right
Graphic properties of the label
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

Content > Icon

IconContentMenu

Properties of the icon associated with each menu element.

Property Description Representation
Icon Size (Inherit) Size of the icon in pixels Apps - widget Menu - Icon Size.png
Icon Color (Inherit) (1) Color of the icon EVApps - Graphic Properties - Icon Color.png
Icon Background Color (Inherit) (2) Background color of the menu element
EndContentMenu

Bar Chart and Line Chart widget types

    Open url.png See Bar Chart ; Line Chart.

Chart Label -/- Legend

ChartLabelLegendBarLineChart

Properties of the legends.

Property Description Representation
Element Object to format EVApps - Graphic Properties - Chart Label Element Bar Line Chart.png
(1) Axis: Values of the axis
(2) Axis Legend: Legend of the axis
(3) Legend: Legend displayed at the top right of the chart
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

EndChartLabelLegendBarLineChart

Benchmark Chart widget type

    Open url.png See the description.

Chart Label -/- Legend

ChartLabelLegendBenchmarkChart

Properties of the legends.

Property Description Representation
Element Object to format EVApps - Graphic Properties - Chart Label Element Benchmark Chart.png
(1) Axis: Values of the measures
(2) Legend: Legend of the axis
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

EndChartLabelLegendBenchmarkChart

Gauge widget type

    Open url.png See the description.

Chart Label -/- Legend

ChartLabelLegendGauge

Properties of the legends.

Property Description Representation
Element Object to format EVApps - Graphic Properties - Chart Label Element Gauge.png
(1) Legend: Title of the chart
(2) Values: Values of the measures
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

EndChartLabelLegendGauge

Pie/Donut Chart widget type

    Open url.png See the description.

Chart Label -/- Legend

ChartLabelLegendPieDonutChart

Properties of the legends.

Property Description Representation
Element Object to format EVApps - Graphic Properties - Chart Label Element Pie Donut Chart.png
(1) Label: Legend of the segments
(2) Legend: Legend displayed at the top right of the chart
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

EndChartLabelLegendPieDonutChart

KPI widget type

    Open url.png See the description

Chart

Format of the indicators.

ChartKpi
Property Description Representation
Element Object to format EVApps - Graphic Properties - Chart Element Kpi.png
(1) Delta: Trend icon and percentage change
(2) KPI: Value of the indicator
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

EndChartKpi

For all types of widget: Theme

Failed to execute the [display] macro. Cause: [Cannot find section [HWidgetsProperties] in document [wiki:Documentation.Service Apps - All Menus.Apps.Apps - GUI.Apps - Pages.WebHome]]. Click on this message for details.

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

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

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

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

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

Procedure: How to define the properties of a widget type in the theme editor

Step 1: Open the theme editor.

1. Go to the App Gallery.

2. Click Apps - Gallery - Theme design icon.png Theme Design in the toolbar.
The theme editor will appear.

Step 2: Select the theme.

1. Click Apps - Manage themes icon.png in the Objects pane.

2. Click the theme whose graphic properties you want to define for the widget type.

  • The Properties Inspector will appear in the Objects pane > Current Theme.
  • The Application tab will display the graphic properties of pages.

Step 3: Select the widget type.

1. Click the Widgets tab.

2. Select the widget type.
Properties specific to the widget type will appear.

Step 4: Define the properties of the widget type.

1. Define the graphic properties.

2. Preview the visual aspect of your modifications from an app associated with the theme.

  • Select the app from the Preview on list in the toolbar.
  • Select the app page.

The Preview pane will automatically be refreshed.

Tags:
Powered by XWiki © EasyVista 2022