Propriétés Theme des widgets


Les propriétés graphiques des widgets peuvent être définies en 2 endroits :

  • au niveau d'un thème : propriétés s'appliquant à tous les widgets d'un type donné, dans l'ensemble des applications liées à ce thème ;
  • au niveau d'une application : propriétés s'appliquant uniquement à un widget d'un type donné dans cette application.

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.
  • Un widget possède un en-tête et un pied qui font partie intégrante de l'objet.
  • Le formatage du texte défini via l'éditeur de texte est prioritaire sur les propriétés du thème appliquées au texte.
  • Les applications peuvent être conçues en mode Responsive, permettant une mise à l'échelle automatique suivant le support d'affichage : smartphone, tablette, écran PC, ...
  • Certaines propriétés sont suivies d'une case à cocher Inherit, permettant de gérer l'héritage/la surcharge des valeurs :
    • case cochée (par défaut) : la valeur de la propriété est héritée du niveau supérieur ;
    • case non cochée : la valeur de la propriété est surchargée dans un contexte particulier.
  • Reset properties icon.png disponible sur certaines propriétés permet de les réinitialiser à leur valeur par défaut.

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.

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

  • Le mode Responsive est géré widget par widget, au travers des 2 propriétés Hide on Small Devices et On Small Devices Only (section Theme > Propriétés générales) - Open url.png voir Description

Procédure : Comment accéder aux propriétés graphiques

Au niveau d'un thème

1. Allez sur l'éditeur de thème.

2. Sélectionnez le type de widget à configurer.

    ou

  • Allez sur le volet Objets.
  • Cliquez sur Apps - Current theme icon.png
  • Cliquez sur l'onglet Widgets.
  • Cliquez sur le type de widget à configurer.
     

Au niveau d'une application

1. Allez sur l'éditeur graphique.

2. Sélectionnez le type de 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.

Description des propriétés Theme

Propriétés générales

PageGeneralFormat
Font Family (Inherit) (1) Police de caractères du texte de l'objet, sélectionnée via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Taille de la police de caractères, qui peut être sélectionnée via la liste déroulante Select Size ou saisie directement dans la zone
Alignment (Inherit) (3) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) (4) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) (5) Couleur de fond de l'objet
Text Color (Inherit) (6) 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

Lorsque le titre de l'objet est survolé avec la souris

Background Color On Hover (Inherit) (1) Couleur de fond de l'objet EVApps - Graphic Properties - Title Bar Background Text Color.png
Text Color On Hover (Inherit) (2) Couleur du texte de l'objet
Widget Height Hauteur du widget, en pixels
Note : Non disponible pour le type de widget Breadcrumbs
EVApps - GUI - Toolbar Object Height.png
  • 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.
  • 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 Permet de définir une animation sur le widget, jouée à chaque ouverture de la page (case cochée).
Example documentation icon FR.png Afficher le widget avec un effet de fondu à l'ouverture de la page
Note : Comportement particulier du widget Data Viewer : Les cellules peuvent être animées via une propriété Enable Custom ... Animation disponible sur les modes Mosaïque (Tile) et Liste (Line). Dans ce cas, n'utilisez pas les animations de la section Theme.
Apps - widget Data Viewer - Animations Editor.png
  • Cochez la case Enable Entry Animation.
  • 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.

Cas particuliers

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

(case cochée)

Apps - Theme - Use content height On.png

(case non cochée - utilisation de la propriété Widget Height)

Apps - Theme - Widget height.png

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

(espace blanc en bas du widget)

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

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

(bas du contenu du widget tronqué)

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

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

(case cochée)(case non cochée)

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

  • 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

Propriétés de l'en-tête et du pied des widgets, pouvant contenir du texte, des données d'un datasource et des images

Objet à formater

Header (1) En-tête du widget

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

Footer (2) Pied du widget

1. Cochez la case Display dans la section Header / Footer souhaitée pour afficher l'en-tête / pied du widget.

2. (optionnel) Sélectionnez le datasource lié à l'en-tê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'en-tête / pied du widget via le Data Picker : cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Data Picker.

Height (Inherit) Hauteur de l'élément, en pixels
PageGeneralFormat
Font Family (Inherit) (1) Police de caractères du texte de l'objet, sélectionnée via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Taille de la police de caractères, qui peut être sélectionnée via la liste déroulante Select Size ou saisie directement dans la zone
Alignment (Inherit) (3) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) (4) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) (5) Couleur de fond de l'objet
Text Color (Inherit) (6) Couleur du texte affiché par l'objet.

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

Exemple Code Html de l'en-tête (Header) du widget Code Html du pied (Footer) du widget
EVApps - widgets Properties - Theme - Header-Footer Example.png

Libellé Incidents dans l'en-tête

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

Bouton [ CREATE INCIDENT ] dans le pied

<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

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

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

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

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

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

    Note : Non disponible pour le type de widget Breadcrumbs

    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

    Cell Style

    Formatage des cellules d'une grille (mode Grid)

    Type de widget Data Viewer

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

    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
    Icon Color On Hover (Inherit) Couleur de fond 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 Logo - EasyVista.png
    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
    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
    Inside 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
  • Grid Style

    Formatage d'une grille (mode Grid)

    Type de widget Data Viewer

    Objet à formater

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

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

    Margin

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

    Note : Non disponible pour le type de widget Breadcrumbs

    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

    Padding

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

    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
    Tags:
    Modifié par Utilisateur inconnu le 2019/09/10 18:51
    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 2019