La bibliothèque des widgets


Apps - Manage widgets icon.png  La bibliothèque des widgets regroupe l'ensemble des types de widgets disponibles dans l'éditeur graphique pour créer une application.

Les types de widgets sont classés par catégorie. Ils peuvent permettre de :

  • définir l'aspect visuel de l'application : implémentation de boutons, menus, diaporamas, ... ;
  • de lire des données à partir de datasources et de visualiser les informations sous la forme de graphiques, tableaux, listes, rapports, ... ;
  • d'implémenter des fonctionnalités des produits Service Manager / Self Help / Service Bots.
     

Chaque widget créé à partir d'un type de widgets possède des propriétés contextuelles à sa catégorie, qui sont décrites sur la page du wiki dédiée.

Remarques

    Open url.png  voir Remarques générales sur les widgets

  • Les types de widgets sont créés et maintenus par EasyVista.
  • Seuls les Custom widgets (modèles de widgets) peuvent également être définis par les utilisateurs.

Liste des types de widgets

Catégorie Layout

Permet de définir les emplacements des widgets sur l'application.

Icônes Type de widgets Fonctionnalité
Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png Layout Créer des emplacements sur 12, 6, 4 , 3 ou 2 colonnes

Catégorie Basic

Permet de définir des widgets agissant sur l'aspect visuel de l'application.

Icône Type de widgets Fonctionnalité
Apps - Widget - Accordion icon.png Accordion Regrouper des informations dans des sections d'un menu dépliable
Apps - Widget - Authentication icon.png Authentication Positionner la zone d'authentification Apps - Authentication zone.png n'importe où sur l'écran
Apps - Widget - Button icon.png Button Implémenter un bouton d'action provoquant l'exécution d'une autre application, l'accès à une page (page web, de l'application ou d'une autre application), l'ouverture de la messagerie, ...
Apps - Widget - Data Viewer icon.png Data Viewer Visualiser des données provenant d'un datasource sous forme de tableau, liste, mosaïque, fiche
Apps - Widget - Embedded Page icon.png Embedded Page Appeler une page enfant depuis une page de la même application (dite page parente), et l'afficher à l'intérieur de la page parente
Apps - Widget - Html icon.png Html Script Insérer du code Html permettant l'affichage de pages, de composants externes, de scripts...
Apps - Widget - Menu icon.png Menu Implémenter un menu regroupant des catégories de liens vers d'autres pages, des commandes, ...
Apps - Widget - Page icon.png Page Implémenter un bouton d'action permettant l'accès à une page de l'application
Apps - Widget - Secured Html icon.png Secured Html Insérer du code Html permettant l'affichage d'informations et de données d'un datasource, sans utilisation de scripts
Apps - Widget - Sidebar icon.png Sidebar Appeler une page enfant depuis une page de la même application (dite page parente), et l'afficher dans un volet horizontal ou vertical
Apps - Widget - Sliding Image icon.png Sliding Image Implémenter un diaporama d'images
Apps - Widget - Sliding Page icon.png Sliding Page Implémenter un diaporama de pages de l'application
Apps - Widget - Sliding Panel icon.png Sliding Panel Implémenter un diaporama de pages contenant du code Html, des images, des liens vers l'application ou une autre application...
Apps - Widget - Horizontal Tab icon.png Tab Regrouper des informations dans des onglets affichés sous la forme d'une barre horizontale ou verticale

Catégorie Dashboards

Permet de définir des widgets graphiques à partir de datasources, pour mettre en évidence des comparaisons / tendances que les données brutes ne laissent pas apparaître.

Note : Les widgets avancés (Advanced) offrent de nombreuses propriétés pour la mise en forme des graphiques : affichage et formatage du titre du graphique et des axes, positionnement de la légende, palette de couleurs des colonnes, formatage des étiquettes des axes, affichage d'info-bulles, ...

Icône Type de widgets Fonctionnalité
Apps - Widget - Advanced Area Chart icon.png Advanced Area Chart Comparer des éléments via des aires remplies d'une couleur différente
Apps - Widget - Advanced Bar Chart icon.png Advanced Bar Chart Comparer des éléments à l'aide d'un diagramme à barres horizontales
Apps - Widget - Advanced Column Chart icon.png Advanced Column Chart Comparer des éléments à l'aide d'un diagramme à barres verticales
Apps - Widget - Advanced Line Chart icon.png Advanced Line Chart Représenter les évolutions / tendances d'éléments sous la forme d'un graphique linéaire
Apps - Widget - Advanced Multi Chart icon.png Advanced Multi Chart Combiner plusieurs types de graphiques, avec ajout d'un axe de mesure secondaire pour faciliter la lecture des données
Apps - Widget - Advanced Spline Chart icon.png Advanced Spline Chart Représenter les évolutions / tendances d'éléments sous la forme d'un graphique à courbes
Apps - Widget - Bar Chart icon.png Bar Chart Comparer des éléments à l'aide d'un diagramme à barres horizontales ou verticales
Apps - Widget - Benchmark Chart icon.png Benchmark Chart Comparer un élément de référence par rapport à d'autres éléments à l'aide d'un diagramme à barres horizontales
Apps - Widget - Bullet Chart icon.png Bullet Chart Comparer une valeur par rapport à une valeur de référence à l'aide d'un diagramme à barres horizontales
Apps - Widget - Funnel Chart icon.png Funnel Chart Visualiser des données en entonnoir ou en pyramide, avec des goulots d'étranglement
Apps - Widget - Gauge Chart icon.png Gauge Positionner une valeur sur une jauge en demi-cercle comportant des seuils quantitatifs de couleur
Apps - Widget - Google Maps icon.png Google Maps Géolocaliser sur une carte des emplacements liés à des données statistiques
Apps - Widget - KPI icon.png KPI Visualiser les performances d'un élément à partir d'indicateurs
Apps - Widget - Line Chart icon.png Line Chart Représenter les évolutions / tendances d'éléments sous la forme d'un graphique linéaire
Apps - Widget - Pie Donut Chart icon.png Pie/Donut Chart Visualiser les proportions des éléments sous la forme d'un diagramme à secteurs
Apps - Widget - Pyramid Chart icon.png Pyramid Chart Visualiser les données de manière hiérarchisée sous forme d’une pyramide à plusieurs étages
Apps - Widget - Tag Cloud icon.png Tag Cloud Visualiser graphiquement des données textuelles et analyser la fréquence de mots-clés
Apps - Widget - Treemap Chart icon.png Treemap Chart Visualiser les données de manière hiérarchisée sous forme de rectangles accolés les uns aux autres

Catégorie Social

Permet de définir des widgets intégrant des contenus sociaux (textes, images, vidéos).

Icône Type de widgets Fonctionnalité
Apps - Widget - Slideshare icon.png Slideshare Intégrer un document disponible sur Slideshare
Apps - Widget - Twitter icon.png Twitter Intégrer un fil d'actualité Twitter
Apps - Widget - Vimeo icon.png Vimeo Intégrer une vidéo publiée sur Vimeo
Apps - Widget - Youtube icon.png Youtube Intégrer une vidéo publiée sur YouTube

Catégorie EasyVista

Permet de définir des widgets intégrant des fonctionnalités des produits Service Manager / Self Help / Service Bots.

Icône Type de widgets Fonctionnalité
Apps - Widget - Breadcrumbs icon.png Breadcrumbs Implémenter une aide à la navigation au travers de données Service Manager agrégées
Apps - Widget - Discussion icon.png Discussion Implémenter le module de discussions
Apps - Widget - Filter List icon.png Filter List Afficher une liste de filtres liés à un datasource pointant dans Service Manager et s'appliquant à l'ensemble des widgets de l'application basés sur ce même datasource
Apps - Widget - KB Base icon.png Knowledge Base Implémenter une recherche Full-text dans la base de connaissance
Apps - Widget - Search Filter icon.png Search Filter Afficher une zone de recherche liée à une colonne d'un datasource pointant dans Service Manager et s'appliquant à l'ensemble des widgets de l'application basés sur ce même datasource
Apps - Widget - Self Help icon.png Self Help Intégrer une procédure Self Help
Apps - Widget - Virtual Agent icon.png Virtual Agent Intégrer dans Service Apps un bouton d'appel d'un agent virtuel

Catégorie Custom widgets

Regroupe tous les Custom widgets publics (accessibles à tous). 

Pour faciliter leur gestion et leur classement, cette catégorie peut être découpée en sous-catégories.

         Open url.png  voir également Dictionnaire des Custom widgets

Catégorie My Custom widgets

Regroupe tous les Custom widgets privés (accessibles uniquement à leur créateur). 

Pour faciliter leur gestion et leur classement, cette catégorie peut être découpée en sous-catégories.

Procédures

Comment ajouter un widget dans une application

       Open url.png  voir Description de l'éditeur graphique

Étape 1 : Sélection de la page sur laquelle le widget doit être ajouté

  • Sélectionnez la page via la liste déroulante située dans la barre d'outils de l'éditeur graphique.

    ou

  • Cliquez sur Apps - Manage pages icon.png dans le volet Objets
  • Cliquez sur le nom de la page.

Le volet Objets affiche le contenu de la page.

Étape 2 : Ajout d'un emplacement (layout)

1. Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objets.

2. Cliquez-glissez l'un des widgets de la catégorie Layout Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png vers le volet Conception.
Note : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here.
         GUI - Procedure - Add widget 1.png

Étape 3 : Ajout du nouveau widget

1. Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objet.
Les types de widgets disponibles sont affichés par catégorie.
                 Apps - Types widgets.png

2. Cliquez-glissez le type de widget / Custom widget à créer vers le volet Conception. (Note : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here).

Best Practice icon.png  Vous pouvez filtrer les types de widgets à partir de leur nom, via la zone de recherche Apps - Search icon.png en haut de l'inspecteur de propriétés.

         GUI - Procedure - Add widget 2.png

3. Renommez le nouveau widget pour l'identifier rapidement.
 

Étape 3 : Saisie des propriétés du nouveau widget

1. Allez sur chaque section souhaitée dans l'inspecteur de propriétés.

2. Renseignez les propriétés du nouveau widget.
Les modifications sont automatiquement prises en compte et affichées dans le volet Conception.
         GUI - Inspector properties - Widget.png

Comment modifier un widget dans une application

Étape 1 : Sélection de la page sur laquelle le widget est positionné

  • Sélectionnez la page via la liste déroulante située dans la barre d'outils de l'éditeur graphique.

    ou

  • Cliquez sur Apps - Manage pages icon.png dans le volet Objets
  • Cliquez sur le nom de la page.

Le volet Objets affiche le contenu de la page.

Étape 2 : Sélection du widget à modifier

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
  • Cliquez sur le nom du widget.

    ou

  • Cliquez sur le widget dans le volet Conception.

L'inspecteur de propriétés affiche les informations du widget sélectionné.
 

Étape 3 : Modification des propriétés du widget

1. Allez sur chaque section souhaitée dans l'inspecteur de propriétés.

2. Modifiez les propriétés du widget.
Les modifications sont automatiquement prises en compte et affichées dans le volet Conception.

Comment supprimer un widget dans une application

Étape 1 : Sélection de la page sur laquelle le widget est positionné

  • Sélectionnez la page via la liste déroulante située dans la barre d'outils de l'éditeur graphique.

    ou

  • Cliquez sur Apps - Manage pages icon.png dans le volet Objets
  • Cliquez sur le nom de la page.

Le volet Objets affiche le contenu de la page.

Étape 2 : Suppression du widget

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
  • Cliquez sur Apps - Delete icon.png en regard du widget.

    ou

  • Survolez le widget dans le volet Conception.
  • Cliquez sur Wheel icon.png > option Apps - Delete icon.png Remove widget.
              GUI - Procedure - Delete widget.png
CreateSingleWidgetProcedure

Comment créer un Custom widget à partir d'un widget existant

Étape 1 : Ouverture de l'application dans l'éditeur graphique

1. Allez sur la galerie.

2. Cliquez sur Apps - Application properties icon.png dans la barre d'outils de l'application.
L'éditeur graphique est ouvert.
 

Étape 2 : Sélection du widget modèle

1. Affichez la page sur laquelle le widget est positionné.

2. Sélectionnez le widget devant servir de modèle à la création du Custom widget.
L'inspecteur de propriétés affiche les informations du widget.
 

Étape 3 : Création du Custom widget

1. Cliquez sur Apps - Duplicate 2 icon.png dans la barre de titre de l'inspecteur de propriétés.
L'écran de création du Custom widget est affiché.
         Apps - Custom widget - Creation from widget.png

2. Renseignez les propriétés du nouveau Custom widget  - Open url.png voir Description de l'écran

3. Cliquez sur OK.
Le nouveau Custom widget est disponible dans la bibliothèque des widgets de l'application, dans la catégorie My Custom Widgets.
         Apps - Custom widget - Library.png

CreateGroupWidgetsProcedure

Comment créer un Custom widget à partir d'un regroupement de widgets

Note : Les widgets doivent être positionnés dans une même colonne ou sur une même ligne.

Étape 1 : Ouverture de l'application dans l'éditeur graphique

1. Allez sur la galerie.

2. Cliquez sur Apps - Application properties icon.png dans la barre d'outils de l'application.
L'éditeur graphique est ouvert.
 

Étape 2 (optionnelle) : Modification de l'accès aux propriétés masquées pour l'un des widgets

Note : Les propriétés masquées des widgets (via la propriété Hidden) n'apparaissent plus dans la section concernée. Pour les rendre visibles sur le Custom widget, vous devez recréer un Custom widget à partir du widget modèle, puis le repositionner en lieu et place de celui-ci. Cette opération doit être réalisée avant la création du Custom widget de regroupement.

1. Affichez la page sur laquelle le widget modèle est positionné.

2. Sélectionnez le widget (1).
L'inspecteur de propriétés affiche les informations du widget.

3. Créez un nouveau Custom widget à partir du widget modèle.

  • Cliquez sur Apps - Duplicate 2 icon.png dans l'inspecteur de propriétés.
    La boîte de dialogue Custom Widget Creator est ouverte.
  • Modifiez les accès aux propriétés des sections souhaités.
  • Cliquez sur OK.
    Un nouveau Custom widget est créé dans la bibliothèque, dans la catégorie/sous-catégorie sélectionnée.

4. Positionnez le nouveau Custom widget en lieu et place du widget modèle.

  • Cliquez-glissez le nouveau Custom widget (2) sous l'emplacement du widget modèle (1).
  • Supprimez le widget modèle (1).
             Apps - Custom widget - Create example 2.png
     

Étape 3 : Création du Custom widget à partir du regroupement de widgets modèles

1. Survolez la barre de titre de la colonne/ligne contenant le regroupement de widgets modèles.

2. Affichez le menu contextuel via Wheel icon.png.
         Apps - Custom widget - Create example 1.png

3. Cliquez sur Apps - Duplicate 2 icon.png Create Custom Widget.
La boîte de dialogue Custom Widget Properties est ouverte.

4. Renseignez les propriétés du nouveau Custom widget.

5. Cliquez sur OK.
Le nouveau Custom widget est disponible dans la bibliothèque des widgets de l'application.

Tags:
Modifié par Christine Daussac le 2021/01/18 16:54
Créé par Administrator XWiki le 2014/09/02 11:42

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021