Propriétés Theme des widgets


La section Theme est disponible sur chaque widget, via l'inspecteur de propriétés. Elle regroupe toutes les propriétés graphiques du widget.

Remarques

  • Les propriétés s'appliquent à tous les types de widgets, sauf indications contraires mentionnées au niveau de chaque groupe de propriétés.

Attention

  • Les widgets Html Script permettent d'intégrer des scripts possédant leur propre feuille de styles ; en conséquence, certaines propriétés du thème éventuellement défini au niveau widget, page ou application peuvent ne pas être appliquées.
  • Le comportement des propriétés peut varier selon les navigateurs.

Bonnes pratiques

  • Utilisez l'icône Reset properties icon.png disponible sur certaines propriétés pour les réinitialiser à leur valeur par défaut.

Spécificités des versions 2016 et antérieures

  • Les propriétés générales affichent 2 propriétés Hide on Small Devices et On Small Devices Only. Elles permettent de gérer le mode Responsive widget par widget  - Open url.png voir Description

Description des propriétés

Propriétés générales

Propriété Description Représentation
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

PageGeneralFormat_LineHeight
Line-Height (Inherit) Hauteur de la ligne contenant l'objet, en pixels
ColorOnHover
Lorsque le titre de l'objet est survolé avec la souris
Background Color On Hover (Inherit) (1) Couleur de fond de l'objet Object on hover.png
Text Color On Hover (Inherit) (2) Couleur du texte de l'objet
Widget Height Hauteur du widget, en pixels

Notes :

  • Vous pouvez également modifier la hauteur depuis le volet Conception, en positionnant le curseur sur le bas de l'emplacement du widget et en glissant la barre grise vers le bas ou vers le haut.
EVApps - GUI - Toolbar Object Height.png
  • Lorsque les propriétés Use Content Height et Use Available Height sont présentes (widgets Data Viewer, Html Script, Secured Html, Html Composer), la hauteur peut être saisie uniquement si les 2 cases sont décochées.
  • Un ascenseur vertical est automatiquement affiché dans le widget si tout le contenu n'est pas visible.

Best Practice icon.png    Pour ajuster précisément plusieurs widgets d'une même ligne avec la même hauteur, renseignez la valeur en pixels de chacun des widgets.

Enable Entry Animation Indique si une animation est présente sur le widget (case cochée - l'animation est jouée à chaque ouverture de la page), ou si aucune animation n'est présente (case non cochée).

Open url.png voir procédure Comment définir une animation sur un widget

exemple   Afficher le widget avec un effet de fondu à chaque ouverture de la page

Note : Comportement particulier du widget Data Viewer

  • Sur les modes Mosaïque (Tile) et Liste (Line), vous pouvez animer les cellules via une propriété Enable Custom ... Animation.
  • Dans ce cas, n'utilisez pas les animations de la section Theme.

Types de widgets Data Viewer, Html Script, Secured Html, Html Composer

Note : Comportement particulier du widget Data Viewer :

  • Le fonctionnement pour la hauteur est le même, mis à part l’ascenseur vertical permettant de visualiser les enregistrements.
  • Lorsque la propriété Use Available Height est activée, le widget utilise l’ascenseur global du navigateur.
  • Lorsque la propriété Use Content Height est activée, le widget utilise un ascenseur intégré (visuellement, plus fin en largeur).    
     
Propriété Description Représentation
Use Content Height Indique si la hauteur du widget doit s'adapter automatiquement pour rendre visible tout le contenu sans affichage de l'ascenseur vertical (case cochée) ou si la hauteur du widget est fixée (case non cochée) :
  • soit par la propriété Use Available Height si celle-ci est activée ;
  • soit par la propriété Widget Height si la propriété Use Available Height est également désactivée.

exemple   Case cochée

Apps - Theme - Use content height On.png

exemple   Case non cochée ==> Utilisation de la propriété Widget Height

Apps - Theme - Widget height.png

Notes :

  • La case est automatiquement décochée si la propriété Use Available Height est activée.
  • Lorsque la case est cochée, la taille du widget n’est plus modifiable via la propriété Widget Height.
  • Lorsque la case est cochée, les propriétés Widget Minimal Height et Widget Maximal Height sont affichées.
Widget Minimal Height Valeur minimale de la hauteur du widget

exemple   Espace blanc en bas du widget

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

Notes :

  • Propriété affichée uniquement lorsque la case Use Content Height est cochée.
  • Si la hauteur minimale est supérieure à la hauteur du contenu du widget, le bas du widget est rempli par un espace vide.
  • Si la hauteur minimale est inférieure à la hauteur du contenu du widget, la hauteur du contenu est prioritaire.

Best Practice icon.png   Pour éviter que le widget soit invisible, renseignez une hauteur minimale pour forcer l'affichage de l'emplacement même si le contenu est vide.

Widget Maximum Height Valeur maximale de la hauteur du widget

exemple   Bas du contenu du widget tronqué

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

Notes :

  • Propriété affichée uniquement lorsque la case Use Content Height est cochée.
  • Si la hauteur maximale est inférieure à la hauteur du contenu du widget, l'ascenseur vertical n'est pas affiché. Le texte dépassant la hauteur maximale n'est alors pas visible.
  • Si la hauteur maximale est supérieure à la hauteur du contenu du widget, la hauteur du contenu est prioritaire.
Use Available Height Indique si le widget doit être étiré automatiquement pour remplir toute la hauteur disponible jusqu'au bas de la page (case cochée) ou si la hauteur du widget est fixée (case non cochée) :
  • soit par la propriété Use Content Height si celle-ci est activée ;
  • soit par la propriété Widget Height si la propriété Use Content Height est également désactivée.

exemple   Case cochée

Apps - Theme - Use available height On.png

exemple   Case non cochée

Apps - Theme - Use available height Off.png

Notes :

  • La case est automatiquement décochée si la propriété Use Content Height est activée.
  • Lorsque la case est cochée, la taille du widget n’est plus modifiable via la propriété Widget Height.

Header / Footer

HeaderFooter_CommonProperties

Propriétés de l'entête et du pied des widgets

(1)   section Header : Propriétés de l'entête du widget

(2)   section Footer : Propriétés du pied du widget

EVApps - widgets Properties - Theme - Header-Footer.png
Propriété Description Représentation
Height (Inherit) Hauteur de l'élément, en pixels
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndHeaderFooter_CommonProperties
Display Indique si l'entête (Header) / pied (Footer) du widget doit être affiché (case cochée), ou non (case non cochée)
Datasource Datasource lié à l'entête / pied du widget. Cliquez sur Apps - Edit icon.png pour le modifier.

Note : Chaque widget peut utiliser 3 datasources : un datasource lié à l'en-tête, un datasource lié au pied et un datasource lié au widget lui-même   - Open url.png voir Remarques générales sur les widgets

Header / Footer Contenu de l'entête / pied du widget, qui peut être saisi dans la zone ou dans l'éditeur de texte via Apps - Edit Html icon.png. Header Footer - Example.png

Notes :

Display Evse Link Lorsque l'application est implémentée dans Service Manager, indique si les informations affichées par le widget peuvent être détaillées dans l'écran dédié de Service Manager (case cochée - l'écran est ouvert via un lien de type icône ou texte), ou non (case non cochée - aucun lien n'est disponible)

exemple

  • Une application est implémentée dans Service Manager pour afficher les incidents via un widget graphique pointant sur un datasource EasyVista.
  • Un clic sur l'icône Display popup icon.png ouvre l'écran Liste des incidents de Service Manager.
Header display evse link.png

Notes :

  • La propriété est disponible uniquement sur un widget lié à un datasource EasyVista.
  • Seuls les utilisateurs ayant les droits d’affichage du détail de leurs informations peuvent accéder à la fonctionnalité dans Service Manager.
  • Par défaut, le lien est affiché sous la forme de l'icône Display popup icon.png.
  • Attention: La fonctionnalité est affichée dans Service Manager uniquement si la case Header > Display est cochée (affichage de l'entête du widget).

Best Practice icon.png    Utilisez cette fonctionnalité si vous souhaitez agir sur les données au travers de filtres et de vues, qui ne sont pas disponibles sur l'application Service Apps.

Border

Border_CommonProperties

Propriétés pour le formatage des bordures du cadre délimitant le widget

Propriété Description Représentation
Style (Inherit) Style des bordures (pointillés, trait plein, trait double...)

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

Color (Inherit) Couleur de la bordure
Size (Inherit) Épaisseur de la bordure

Best Practice icon.png    Définissez les propriétés générales de toutes les bordures du cadre (1) puis affinez-les via les propriétés propres à chaque bordure (2) :

  • Top : bordure haute
  • Bottom : bordure basse
  • Left : bordure gauche
  • Right : bordure droite

Radius (Inherit) Arrondi appliqué aux angles de chaque coin du cadre, en pixels :
  • Top Corner Left : coin haut gauche
  • Top Corner Right : coin haut droit
  • Bottom Corner Left : coin bas gauche
  • Bottom Corner Right : coin bas droit
EVApps - widgets Properties - Theme - Border corner.png

Notes :

  • Saisissez la valeur 0 pour un angle droit (1)
  • Plus la valeur est élevée, plus l'angle est arrondi (2)
EndBorder_CommonProperties

Box Shadow

BoxShadow_CommonProperties

Propriétés pour le formatage de l'ombre appliquée au cadre délimitant le widget

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Horizontal Position Épaisseur de l'ombre partant de la gauche (valeur négative) ou de la droite (valeur positive) du cadre délimitant le widget
Vertical Position Épaisseur de l'ombre partant du haut (valeur négative) ou du bas (valeur positive) du cadre délimitant le widget
Blur Radial Intensité de l'effet de flou appliqué à l'ombre
Spread Distance Décalage de l'ombre par rapport au cadre délimitant le widget
Valeur négative (- 40 px) Valeur positive (40 px)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

Color (Inherit) Couleur de l'ombre
Opacity Degré de transparence de l'ombre (plus la valeur est élevée, plus l'ombre est visible)

Exemples de paramétrage de l'ombre

Exemple Paramétrage Exemple Paramétrage
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

Marges du contenu du widget par rapport au cadre le délimitant

Propriété Description Représentation
Padding Top (Inherit) (1) Marge entre le bord supérieur du contenu et l'extrémité haute du cadre délimitant le widget EVApps - widgets Properties - Theme - Padding.png
Padding Bottom (Inherit) (2) Marge entre le bord inférieur du contenu et l'extrémité basse du cadre délimitant le widget
Padding Left (Inherit) (3) Marge entre le bord gauche du contenu et l'extrémité gauche du cadre délimitant le widget
Padding Right (Inherit) (4) Marge entre le bord droit du contenu et l'extrémité droite du cadre délimitant le widget
EndPadding_CommonProperties

Margin

Margin_CommonProperties

Marges du widget par rapport à son emplacement (ligne / colonne)

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Margin Top (Inherit) (1) Marge entre le bord supérieur de la ligne sur laquelle est positionné le widget et l'extrémité haute du cadre le délimitant EVApps - widgets Properties - Theme - Margin.png
Margin Bottom (Inherit) (2) Marge entre le bord inférieur de la ligne sur laquelle est positionné le widget et l'extrémité basse du cadre le délimitant
Margin Left (Inherit) (3) Marge entre le bord gauche de la colonne dans laquelle est positionné le widget et l'extrémité gauche du cadre le délimitant
Margin Right (Inherit) (4) Marge entre le bord droit de la colonne dans laquelle est positionné le widget et l'extrémité droite du cadre le délimitant
EndMargin_CommonProperties

Cell Style

Formatage des cellules d'une grille (mode Grid)

Type de widgets Data Viewer

Propriété Description Représentation
Cell Template Border Color (Inherit) Couleur de la bordure des cellules
Cell Template Padding (Inherit) Espace entre le contenu de la cellule et chaque bord du cadre délimitant le widget, en pixels :
  • Top : bord haut
  • Bottom : bord bas
  • Left : bord gauche
  • Right : bord droit

Type de widgets Menu

Propriété Description Représentation
Cell Background Color (Inherit) Couleur de fond de chaque élément de menu 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) Degré de transparence de chaque élément de menu lorsqu'il est survolé avec la souris
Background Color On Hover (Inherit) Couleur de fond de chaque élément de menu lorsqu'il est survolé avec la souris
Text Color On Hover (Inherit) Couleur du texte de chaque élément de menu lorsqu'il est survolé avec la souris
Cell Height (Inherit) Hauteur de chaque élément de menu. Note : Lorsque la hauteur du widget est inférieure, l'ascenseur vertical est automatiquement affiché
Cell Width (Inherit) Largeur de chaque élément de menu
Cell Border Radius (Inherit) Rayon de chaque élément de menu, permettant de les représenter de façon circulaire EVApps - widgets Properties - Theme - Cell Style border radius.png
Cell Margin (Inherit) Espace entre chaque élément de menu et chaque bord du cadre délimitant le widget, en pixels.
  • Top : bord haut
  • Bottom : bord bas
  • Left : bord gauche
  • Right : bord droit
Cell Padding (Inherit) Espace entre chaque élément de menu et chaque bord du cadre délimitant le widget, en pixels.
  • Top : bord haut
  • Bottom : bord bas
  • Left : bord gauche
  • Right : bord droit

Icon

Type de widgets Menu

Propriété Description Représentation
Icon Size (Inherit) Taille de chaque icône associée aux éléments de menu. Note : Cette propriété s'applique uniquement aux images de la bibliothèque fournie par EasyVista Icon properties - Icon size.png
Icon Color (Inherit) Couleur de chaque icône associée aux éléments de menu. Note : Cette propriété s'applique uniquement aux images de la bibliothèque fournie par EasyVista
Icon Color On Hover (Inherit) Couleur de chaque icône associée aux éléments de menu lorsqu'ils sont survolés avec la souris. Note : Cette propriété s'applique uniquement aux images de la bibliothèque fournie par EasyVista

Grid Style

Formatage d'une grille (mode Grid)

Type de widgets Data Viewer

Propriété Description Représentation
Element : Objet à formater (1) Header : Ligne d'entête EVApps - widgets Properties - Theme - Grid Style.png
(2) Even Line : Lignes paires
(3) Odd Line : Lignes impaires
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Procédures

Comment configurer les propriétés graphiques d'un widget

Étape 1 : Sélection du widget

1. Allez sur la galerie.

2. Ouvrez l'éditeur graphique via Apps - Application properties icon.png dans la barre d'outils de l'application.

3. Sélectionnez le widget à configurer.

    ou

  • Allez sur le volet Objets.
  • Cliquez sur Apps - Manage widgets icon.png puis sur Apps - Edit icon.png en regard du widget.

Les propriétés contextuelles au widget sont affichées.

Étape 2 : Définition des propriétés graphiques du widget

1. Allez sur la section Theme dans l'inspecteur de propriétés.

2. Définissez les propriétés graphiques.

3. Testez la bonne configuration du widget en exécutant l'application via EVApps - GUI - Execute icon.png.

Comment définir une animation sur un widget

1. Cochez la case Enable Entry Animation.
        Apps - widget Data Viewer - Animations Editor.png

2. Cliquez sur le bouton situé sous la propriété Select Entry Animation et définissez les caractéristiques de l'animation via l'éditeur.

EnableAnimation_Procedure
  • Select Animation : Cliquez sur la liste déroulante puis sur la catégorie souhaitée. Cliquez sur l'effet souhaité pour le sélectionner. Automatiquement l'animation est jouée dans la zone preview.
    • Cliquez sur Apps - Play animation icon.png pour rejouer l'animation.
    • Pour supprimer l'effet, cliquez sur x dans la liste déroulante.
  • Delay (0 - 4)s : Délai (en secondes) avant que l'animation soit jouée.
  • Duration (0 - 4)s : Durée (en secondes) durant laquelle l'animation est jouée.           
     

Best Practice icon.png  Si la page est particulièrement chargée ou si le réseau est lent, augmentez légèrement la valeur Delay afin de visualiser correctement l’animation.

Comment définir l'entête / pied d'un widget

1. Cochez la case Display dans la section Header / Footer suivant l'objet que vous souhaitez définir.

2. (optionnel) Sélectionnez le datasource lié à l'entête / pied du widget.

  • Pour modifier le datasource ou visualiser son contenu, cliquez sur Apps - Edit icon.png.
  • Pour définir un nouveau datasource, cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets.

3. Saisissez directement le code Html dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte.

4. Sélectionnez les valeurs du datasource à insérer dans l'entête / pied du widget via le Data Picker : cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Data Picker.

Exemple Code Html
EVApps - widgets Properties - Theme - Header-Footer Example.png Header : Libellé Incidents
<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 : Bouton Create Incident
<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:
Modifié par Utilisateur inconnu le 2020/03/24 12:22
Créé par Administrator XWiki le 2014/09/02 11:56

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Engine
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020