Remarques générales sur les widgets


Généralités

  • Vous pouvez ajouter des types de widgets uniquement dans les catégories Custom widgets (types de widgets personnalisés et publics, accessibles à tous) et My Custom widgets (types de widgets personnalisés et privés, accessibles uniquement à leur créateur). Tous ceux des autres catégories de la bibliothèque sont définis par EasyVista : vous ne pouvez pas en créer de nouveaux.
        Open url.png  voir Bibliothèque des widgets
  • Les widgets sont définis au niveau de chaque page de l'application : ils n'interagissent pas entre eux sur les différentes pages.
  • Chaque widget possède des propriétés qui lui sont propres, définies via l'inspecteur de propriétés.
    • Les propriétés obligatoires sont regroupées dans la section Content.
    • Les propriétés graphiques sont regroupées dans la section Theme. Par défaut, elles sont héritées des propriétés définies au niveau supérieur ; chaque propriété peut ensuite être surchargée dans un contexte particulier -  Open url.png  voir Principe de l'héritage
  • Le formatage des dates/heures, des séparateurs des milliers et des décimales dépend des paramètres de configuration définis dans la fenêtre d'informations personnelles de l'utilisateur connecté, ou à défaut des paramètres de configuration de la plate-forme utilisée par l'utilisateur connecté (sous Windows : Panneau de configuration > Paramètres Région et langue).

Bonnes pratiques

  • Dès que vous créez un widget, renommez-le afin d'identifier rapidement sa fonction. À la création, le nom par défaut est le type du widget suivi du numéro d'incrément ( n ) du widget du même type pour la page active.
            exemple   Data Viewer ( 3 )  ==>  3ème widget "Data Viewer" sur la page active
PropertiesInherit

Principe de l'héritage et des surcharges des propriétés graphiques

  • Les valeurs par défaut des propriétés d'un thème sont celles définies dans la feuille de style standard livrée à l'installation de Service Apps (feuille de style CSS de Foundation).
  • Les valeurs des propriétés héritées sont les valeurs définies au niveau supérieur, suivant la hiérarchie ci-dessous.
EVApps - Graphic Properties - Inherit.png

(1)     Recherche d'une configuration particulière appliquée au widget dans l'application

(2)     À défaut, recherche d'une configuration particulière appliquée au type de widget dans le thème lié à l'application

(3)     À défaut, recherche d'une configuration particulière appliquée à l'ensemble des widgets dans la page de l'application

(4)     À défaut, recherche d'une configuration particulière appliquée à l'ensemble des widgets du thème lié à l'application

(5)     À défaut, configuration de la feuille de styles standard de Service Apps (feuille CSS de Foundation)

  • La majorité des propriétés sont suivies d'une case à cocher Inherit, permettant de gérer l'héritage / la surcharge.
Héritage (case cochée) Surcharge (case non cochée)

La valeur de la propriété est héritée du niveau supérieur.

Properties Inherit - Inherit property.png

La valeur de la propriété est surchargée dans un contexte particulier, qui remplace la valeur héritée du niveau supérieur.

Properties- Inherit - Specific context property.png

  • Le nom de la propriété est affiché dans un bandeau gris.
  • Le nom de la propriété est affiché dans un bandeau bleu.
  • La provenance (thème, page, …) et la valeur de la propriété héritée sont affichées en survolant la case à cocher (plusieurs informations peuvent être affichées dans le cas de surcharges en cascade - ex. : surcharge du thème puis de la page).

exemple   Une application comprend un tableau de bord Incidents dont tous les widgets héritent des couleurs définies pour le thème. Le titre du widget Major Incidents est mis en évidence à la fois en surchargeant la couleur de fond et celle du texte.
         EVApps - Graphic Properties - Example Inherit 1.png

EndPropertiesInherit

Liste des unités de mesure

Les unités de mesure sont disponibles sur les propriétés Height, Size, Padding, Margin des widgets et dans les thèmes.

Note : Certaines de ces unités de mesure ne sont pas disponibles sur le widget Self Help.

  • Unités de mesure absolues
    • px : Pixel
    • in : Pouce
    • cm : Centimètre
    • mm : Millimètre 
    • % : Pourcentage relatif à l'élément parent

      exemple  Un élément avec une taille de 50% dont l'élément parent a une taille de 50px aura une taille de 25px.

  • Unités de mesure relatives à la taille de l'écran (viewport)
    • vh : Unité se basant sur la hauteur de l'écran. 100vh correspond à la totalité de la hauteur d'écran.
    • vw : Unité se basant sur la largeur de l'écran. 100vw correspond à la totalité de la largeur d'écran.
  • Unités de mesure relatives aux polices
    • pt : Point
    • em : Unité proportionnelle à la taille de la police de l'élément parent ou du document si la taille n'est pas renseignée. 1em = 16px si aucune taille de police n'est définie.
    • rem : Unité faisant référence à la taille de la police de l'élément racine. Elle dépend de la taille de la police définie par défaut sur la balise <body>.
  • Unités de mesure avec calculs de valeurs, pouvant utiliser les opérateurs mathématiques (multiplication, division, addition, soustraction) et toutes les unités de mesure disponibles.
    • Ces unités sont variabilisables et totalement compatibles avec les variables CSS du widget __Root.
    • Les espaces entre les opérateurs sont obligatoires.
    • L'unité de mesure doit être renseignée dans le calcul. À défaut, l'unité utilisée est le pixel.

exemple  calc ((100vh / 2) – (200px * 3 – 3px) – 30px)

Widgets utilisant un datasource

Généralités

  • Lorsque vous supprimez un widget utilisant un datasource, ce dernier reste disponible dans la bibliothèque.
  • Les widgets utilisant des datasources dynamiques sont automatiquement réactualisés à chaque lancement de l'application et à chaque réaffichage de la page, à la fois en mode Exécution et en mode Édition. Vous pouvez également définir une fréquence de rafraîchissement automatique via la propriété Auto Refresh.

Datasources liés à l'entête / pied des widgets

Chaque widget peut utiliser 3 datasources : un datasource lié à l'entête, un datasource lié au pied et un datasource lié au widget lui-même. Cela permet d'afficher des informations issues de sources différentes dans un même widget.
         Header - Footer - Widget datasources.png

  • Les datasources liés à l'entête / pied des widgets sont sélectionnés via la propriété Theme > Header / Footer de chaque widget.

Datasource pointant sur une base de données

Tous les widgets utilisant le même datasource sur la même page sont synchronisés :

  • Lorsque vous naviguez au travers des enregistrements de l'un des widgets, tous les autres sont automatiquement rafraîchis et affichent les informations relatives au nouvel enregistrement sélectionné.
  • Suivant le widget, l'enregistrement courant peut être mis en évidence : cadre vert pour un widget Data Viewer, bulle d'information pour un widget Google Maps.

Bonnes pratiques

  • Utilisez de préférence les alias pour associer un datasource à une base de données. 
  • Pointez sur un connecteur lorsque la base de données ne change pas, quelle que soit l'étape de mise en production.
     

exemple 

1. Affichage d'une liste d'interventions via un widget Data Viewer (1).

2. Affichage de diverses informations utilisant le même datasource (2) :

  • fiche de l'intervenant via un widget Secured Html ;
  • plan de l'adresse d'intervention via un widget Google Maps ;
  • vue Street View via un widget Secured Html.

3. Changement d'intervention via le widget Data Viewer (3) : l'enregistrement courant est mis en évidence avec un cadre vert  ==>  les 3 autres widgets sont automatiquement rafraîchis et affichent les informations de la nouvelle intervention sélectionnée.

4. Changement de localisation en cliquant sur une pastille Google map icon.png du plan affiché via le widget Google Maps  ==>  les 3 autres widgets sont automatiquement rafraîchis et affichent les informations de la nouvelle localisation sélectionnée.
         Relations datasource.png

Datasource pointant sur une base de données EasyVista

Diverses fonctionnalités sont proposées en fonction de la table/colonne utilisée :

  • Datasource pointant sur la table AM_ACTION : des boutons de traitement des actions EasyVista peuvent être ajoutés via l'éditeur de texte : Tags avancés Apps - Text Editor - Advanced tags icon.png > catégorie Workflow.
  • Datasource pointant sur une vue liée à la table AM_LOCATION : un champ virtuel de localisation est ajouté automatiquement, permettant de rendre exploitable l'adresse des localisations éclatée sur plusieurs champs dans Service Manager
    • Champ nommé Full Address (<Table_Name>), qui concatène tous les champs adresse Service Manager.
    • Automatiquement hérité par les localisations enfants qui ne possèdent pas d'adresse renseignée exactement.

Bonnes pratiques

  • Utilisez ce champ avec le widget Google Maps (zone Content > Address), pour positionner les enregistrements sur la carte.
     

exemple 

Service Manager Service Apps

Annuaire des localisations pointant sur la table AM_LOCATION

Datasource - Virtual Address field.png

Datasource pointant sur la requête Operation>Incidents>Tous les incidents et une vue liste contenant le bénéficiaire et sa localisation

==>    ajout d'un champ virtuel :

Full Address (AM_RECIPIENT_LOCATION) = Pine Street San Francisco, CA United States of America

Lien entre Service Apps et Service Manager

Une application Service Apps peut être implémentée dans Service Manager et afficher les données de la base Service Manager au travers de widgets pointant sur des datasources EasyVista.

Pour pouvoir utiliser les filtres et les vues qui ne sont pas disponibles sur l'application Service Apps, une fonctionnalité permet d'afficher le détail des informations dans l'écran dédié de Service Manager (Note : Accessible uniquement pour les utilisateurs ayant les droits d’affichage du détail de leurs informations).

Principe de mise en oeuvre

1. Ouvrez l'éditeur graphique de l'application.

2. Allez sur la section Theme > Header du widget pointant vers le datasource EasyVista &nbsp; Open url.png voir Description

3. Affichez l'entête du widget en cochant la case Display.

4. Activez la fonctionnalité en cochant la case Display Evse Link.

5. Configurez la forme du lien (texte, icône). Par défaut, il est affiché sous la forme de l'icône Display popup icon.png.

exemple

(1) Une application est implémentée dans Service Manager pour afficher les incidents via un widget graphique pointant sur un datasource EasyVista.

(2) Un clic sur l'icône Display popup icon.png ouvre l'écran Liste des incidents de Service Manager.

(3) Les listes Filtres et Vues sont disponibles pour afficher les incidents souhaités.

Datasource EasyVista - Link between SApps and SM.png

Datasource contenant des données agrégées : fonctionnalité de drill-down

Le drill-down permet de zoomer sur chaque niveau de rupture de la vue EasyVista associée au datasource, jusqu'au détail de l'information agrégée. Tous les widgets utilisant le même datasource sur la même page sont synchronisés : lorsque vous changez de niveau sur l'un des widgets, tous les autres sont automatiquement rafraîchis et affichent les informations relatives au nouveau niveau sélectionné.

  • Sur les widgets Data Viewer (Note : Uniquement en mode Grid), Bar Chart, Pie/Donut Chart, vous pouvez désactiver la fonctionnalité via la propriété Enable Drilldown.
  • Sur les widgets Dashboards, la fonctionnalité n'est pas disponible sur une statistique Autres (zone cumulant toutes les données non affichées sur le graphe).

Bonnes pratiques

  • Utilisez cette fonctionnalité pour la présentation des données statistiques via les widgets Dashboards, Data Viewer,...
  • Vous pouvez également ajouter une aide à la navigation au travers des niveaux sous forme d'une arborescence, via le widget Breadcrumbs.
     

exemple 

1. Affichage de la liste des localisations de la vue Matériels par localisation via un widget Data Viewer en mode Grid (1), permettant de naviguer au travers des différents niveaux des données agrégées ; ce widget est associé à un widget Breadcrumbs (2) qui affiche une aide à la navigation : les différents niveaux de rupture parcourus dans la liste sont affichés sous forme d'une arborescence.

2. Affichage du détail de la liste des matériels de la localisation sélectionnée via un widget Data Viewer en mode Grid (3) utilisant le même datasource.

3. Affichage des statistiques de répartition des matériels pour la localisation sélectionnée via 2 widgets Dashboards (4) utilisant le même datasource :

  • un widget Bar Chart ;
  • un widget Pie/Donut Chart.

4. Changement de localisation via le widget Data Viewer (1)  ==>  les 3 autres widgets sont automatiquement rafraîchis et affichent les informations de la nouvelle localisation sélectionnée.

5. Changement de localisation en cliquant sur une statistique de l'un des widgets Dashboards (4)  ==>  les autres widgets sont automatiquement rafraîchis et affichent les informations de la nouvelle localisation sélectionnée.

Relations drilldown - select location 1.png

====>

Relations drilldown.png

Relations drilldown - select location 2.png

====>

Relations drilldown - last level.png

Widgets utilisant l'éditeur de texte

Dans l'éditeur de texte :

  • pour insérer une image (nouvelle ou déjà présente dans l'application), cliquez sur Apps - Text Editor - Image icon.png ;
  • pour insérer un lien hypertexte (vers une autre application, une page d'une autre application, une page web, un document d'un site internet, la messagerie), cliquez sur Apps - Text Editor - Hyperlink icon.png ;
  • pour insérer un lien vers une page de l'application, utilisez les tags avancés Apps - Text Editor - Advanced tags icon.png > catégorie Page.
Tags :

Raccourcis

Powered by XWiki © EasyVista 2022