Widget Data Viewer

Modifié le 01/06/2023 11:53

Apps - Widget - Data Viewer icon.png Ce type de widget appartient à la catégorie Basic de la bibliothèque des widgets. Il permet de sélectionner une liste d'enregistrements via un datasource et de l'afficher (sur écran ou smartphone) sous différents mode : mode Grille (données brutes), mode Mosaïque (Line), mode Liste (Line), mode Fiche (Form). 

  • Chaque mode peut être personnalisé grâce à un formatage Html.
  • Des animations peuvent être ajoutées en mode Mosaïque et Liste : affichage différent des cellules lors du survol avec la souris ou lors du passage d'un doigt, effet d'animation joué à chaque ouverture de la page.

Remarques

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

  • En mode Exécution, des icônes spécifiques (situées à la droite du widget) permettent à l'utilisateur de basculer entre les différents modes d'affichage : Grille (Grid) Grid mode icon.png, Mosaïque (Tile) Tile mode icon.png, Liste List mode icon.png.
    • Les icônes sont visibles uniquement si une autorisation est donnée à l'utilisateur (via la propriété Authorize View Change) et si un formatage Html a été défini pour le mode (via les propriétés Cell Format).
    • Le mode d'affichage actif est représenté par une icône bleue ; les modes inactifs par une icône noire.
    • Le mode d'affichage Grille est accessible uniquement s'il s'agit du mode d'affichage par défaut.
    • Le mode d'affichage Fiche n'est pas soumis à autorisation et est toujours accessible en double-cliquant sur l'un des enregistrements présentés en mode Liste ou en mode Mosaïque. Via la propriété Embedded Form, le formulaire de détail peut être affiché sous l'enregistrement (tout en restant sur la liste), ou en plein écran (en remplacement de la liste) -  Open url.png  voir Exemples
    • Pour l'affichage en mode Grille, sélectionnez les colonnes souhaitées via le Data Transformer. Sinon, toutes les colonnes sont affichées.
  • Sur un smartphone :
    • Si aucun formatage Html n'est défini, l'affichage se fait suivant le formatage Html défini pour le mode Liste (propriété Line Cell Format).
    • Le formatage de l'affichage sous forme de fiche est celui défini via la propriété Form Cell Format.
  • La fonctionnalité drill-down est disponible uniquement en mode Grille.

Best Practice big icon.pngBonnes pratiques

  • En mode Grille, utilisez les propriétés Theme > Cell Style et Grid Style pour formater le tableau d'enregistrements (mise en page personnalisée pour la ligne d'en-tête, les lignes paires et les lignes impaires).
  • Définissez des tableaux pour la mise en page des différents modes d'affichage, afin d'afficher des mosaïques ou des listes de taille identique pour chaque enregistrement du datasource.
  • Pour afficher une image référencée dans le datasource, insérez la colonne correspondante via le Data Picker de l'éditeur de texte (Tags avancés Apps - Text Editor - Advanced tags icon.png) et ajoutez la balise Html <img src="Image_name">. Vous pouvez définir sa taille via les paramètres height et width de la balise.
  • Si vous ajoutez une animation en mode Mosaïque ou en mode Liste, n'utilisez pas les animations de la section Theme.

Exemples

Affichage du catalogue des services

        Open url.png  voir Procédure pour le code Html correspondant aux différents modes

Mode Grille (Grid)

EVApps - widget Data Viewer - Example Grid.png

Mode Mosaïque (Tile) Mode Liste (Line)
EVApps - widget Data Viewer - Example Tile.png EVApps - widget Data Viewer - Example Line.png
Mode Fiche (Form)
Embedded Form : case cochée Embedded Form : case non cochée
EVApps - widget Data Viewer - Example Form - Embedded.png EVApps - widget Data Viewer - Example Form - Not Embedded.png

Affichage des résultats d'une recherche dans la base de connaissance

        Open url.png  voir Procédure du widget Knowledge Base 

Implémentation de la zone de recherche (1)

via un Custom widget Global Search in KB ou un widget Knowledge Base

EVApps - Knowledge base search.png

Détail des résultats
en mode Mosaïque (Tile) en mode Liste (Line)
EVApps - widget Data Viewer - Example Line.png EVApps - Knowledge base search - Detail.png

Liste des propriétés

Content

DataSource

DataSource : Source de données externes liée au widget. 

  • La liste déroulante affiche tous les datasources disponibles dans l'application. 
  • Pour modifier le datasource ou visualiser son contenu, cliquez sur Apps - Edit icon.png. Le bouton Apps - datasources Properties - Preview button.png sous la propriété Configure Field Types affiche le nombre de lignes (maximum 15) et de colonnes extraites.
  • Pour définir un nouveau datasource, cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets.
  • Note : En mode Exécution, le widget affiche uniquement les 30 premiers enregistrements. Les enregistrements suivants sont ensuite affichés par lot de 30, via l'ascenseur ou la roulette de la souris.
DataTransformer

Data Transformer : Permet de définir la structure et le périmètre du datasource, d'appliquer des fonctions d'agrégation statistiques et de modifier l'ordre d'affichage des mesures.

  • Cliquez sur Setup / Preview Data sous la propriété Data Transformer pour ouvrir la fenêtre dédiée -  Open url.png  voir Description

Default View : Mode d'affichage par défaut des données du datasource.

Authorize View Change: Indique si l'utilisateur peut changer (case cochée) ou non (case non cochée) le mode d'affichage par défaut des données du datasource. Le cas échéant, les icônes Tile mode icon.png (mode Mosaïque - Tile), List mode icon.png (mode Liste) et Grid mode icon.png (mode Grille ) sont affichées à la droite du widget. Note : Cochez la case uniquement si vous avez défini un formatage pour les modes Liste et/ou Mosaïque (Tile) via les propriétés Cell Format.

Show Current Record : Indique si l'enregistrement courant doit être mis en évidence sur le widget, via un encadré vert (case cochée) ou non (case non cochée). Note : Cette propriété s'applique à tous les modes d'affichage du widget.

EnableDrilldown

Enable Drilldown (Note : Uniquement sur un datasource EasyVista utilisant une vue avec ruptures) : Indique si les données sont agrégées (case cochée - la fonctionnalité de drill-down est activée), ou non (case non cochée).

exemple   Widget Breadcrumbs : Répartition des matériels par localisation

Best Practice icon.png  

  • Ne cochez pas la case lorsque vous souhaitez que le widget présente le détail d'un niveau de rupture.
  • Ajoutez un widget Breadcrumbs pour aider à la navigation entre les différents niveaux de rupture.

Tile

Tile Cell Min Width et Tile Cell Height : Mesures (Largeur / Hauteur) permettant de définir la taille minimale des cellules en mode Mosaïque, en pixels. Lorsque la taille de l'écran est modifiée, le système recalcule le nombre de cellules affichées sur une ligne afin que la largeur des cellules ne descende pas en deçà des valeurs indiquées.

Tile Cell Format : Formatage Html de l'affichage en mode Mosaïque. Saisissez directement le code dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte.

Enable Tile Html Hover : Permet de jouer une animation lors du survol avec la souris de chaque cellule affichée en mode Mosaïque (case cochée).

Enable Tile Html For Touch Devices : Permet de jouer une animation lors du passage d'un doigt sur chaque cellule affichée en mode Mosaïque, pour les appareils ne supportant pas la souris (case cochée).

ExampleHover

exemple Afficher une nouvelle miniature comportant un bouton Nouvelle demande lors du survol d'une vignette du catalogue

Contenu standard Contenu lors du survol de la zone avec la souris ou lors du passage d'un doigt
Représentation graphique

Apps - Text Editor - Example hover Off.png

Apps - Text Editor - Example hover On.png

  • Cochez les cases Enable Tile Html... souhaitées.
  • Cliquez sur Apps - Edit Html icon.png en regard de la propriété Tile Cell Format et définissez les animations via l'éditeur de texte (via les icônes Apps - Text Editor - Hover Touch toolbar.png) -  Open url.png voir Procédure
  • Si vous avez coché la case Enable Tile Html Hover, cliquez sur le bouton situé sous la propriété Choose Tile Hover Transition et définissez les caractéristiques du mode de transition via l'éditeur dédié.
             Apps - Text Editor - Hover - Transition editor.png
    • Select Transition : Cliquez sur la liste déroulante puis sur la catégorie d'effets. 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.
    • Background Color : Couleur de l'arrière plan de la zone sur laquelle l'animation est définie.
    • Opacity (0 - 1) : Réglette permettant de définir le degré de transparence de la couleur de fond, allant de 0 (totalement transparent) à 1 (totalement opaque).
Opacity = 0.2 Opacity = 0.5 Opacity = 0.9

Background image - Opacity 02.png

Background image - Opacity 05.png

Background image - Opacity 09.png


Enable Custom Tile Animation : Permet de définir une animation identique sur chaque cellule, jouée à chaque ouverture de la page en mode Mosaïque (case cochée).

Example documentation icon FR.png  Afficher chaque cellule avec un effet de fondu à l'ouverture de la page

          Apps - widget Data Viewer - Animations Editor.png

  • Cochez la case Enable Custom Tile Animation.
  • Cliquez sur le bouton situé sous la propriété Select Tile 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.

EndEnableAnimation_Procedure

Line

Line Cell Height : Hauteur des lignes en mode Liste, en pixels.

Line Cell Format : Formatage Html de l'affichage en mode Liste. Saisissez directement le code dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte.

Enable Line Html Hover : Permet de jouer une animation lors du survol avec la souris de chaque cellule affichée en mode Liste (case cochée).

Enable Line Html For Touch Devices : Permet de jouer une animation lors du passage d'un doigt sur chaque cellule affichée en mode Liste, pour les appareils ne supportant pas la souris (case cochée).

          Open url.png voir Exemple et Procédure identiques à la section Tile

Enable Custom Line Animation : Permet de définir une animation identique sur chaque cellule, jouée à chaque ouverture de la page en mode Liste (case cochée).

          Open url.png voir Exemple et Procédure identiques à la section Tile

Form

Embedded Form : Lorsque le mode Liste ou le mode Mosaïque (Tile) est actif, indique où s'affiche le formulaire de détail d'un enregistrement (obtenu en double-cliquant dessus) : soit sous l'enregistrement sélectionné (case cochée – la liste reste affichée), soit en plein écran en remplacement de la liste (case non cochée ; le retour sur la liste se fait via Back blue icon.png) -  Open url.png  voir Exemples

Form Detail Datasource : Dans le cas d'une relation maître-détail, datasource détail dédié à l'affichage en mode Fiche, relié au datasource maître du widget. Note :  Il s'agit obligatoirement d'un datasource EasyVista.

Form Detail Data Transformer : Liste des champs à afficher en mode Fiche.

Form Cell Format : Formatage Html de l'affichage en mode Fiche. Saisissez directement le code dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte.

Mobile

Mobile Cell Format : Formatage Html de l'affichage sur un smartphone. Il s'agit d'un mode d'affichage sous forme de liste, donnant accès au détail d'un enregistrement en cliquant dessus. Saisissez directement le code dans la zone ou cliquez sur Apps - Edit Html icon.png pour ouvrir l'éditeur de texte. Note : Si aucun formatage Html n'est défini, l'affichage se fait suivant le formatage Html défini pour le mode Liste (propriété Line Cell Format).

Theme

Open url.png  voir Description des propriétés

Procédures

 

Comment afficher les différents modes du catalogue des services

1. Créez un datasource EasyVista pour l'extraction du catalogue des services :

  • option de menu Service Manager : Operation > Services Requests > New Request
  • filtre : Hardware 
  • vue : List IT Store

         EVApps - widget Data Viewer - Example DataSource.png

2. Saisissez le code Html suivant pour chacun des modes d'affichage. Le code fait référence à certaines données du datasource, via des instructions #[FIELD('columnName')#.

Mode Mosaïque (Tile Cell Format)
<style type="text/css">
   .hover:hover {
  cursor: pointer;
  border-style:solid;
  background: #ffffff;
  border-width:1px;
  border-color: #cccccc;
   }
</style>
<div class="hover" style="height: 280px"><img src="#[FIELD('Image')]#" /></div>
<div class="mix-details">
   <h4>#[FIELD('Service')]#</h4>
   <p style="margin-left: 20px; "><a class="news-block-btn white" href="#">==>  Read more</a></p>
</div>
Mode Liste (Line Cell Format)
<style type="text/css">
   .hover:hover {
  border-style:solid;
  border-width:1px;
  border-color: #cccccc;
  background-color: #ffffff; cursor: pointer;
   }
  table {border-width:0px;}
   .hover img {max-width: 139px; padding: 10px;
   }
</style>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="hover" style="width: 100%;">
   <tbody>
      <tr>
         <td width="70px"><img src="#[FIELD('Image')]#" /></td>
         <td align="left" class="description-list" width="75%">#[FIELD('Service')]#</td>
      </tr>
   </tbody>
</table>
Mode Fiche (Form Cell Format)
<div class="mix-details">
   <h4>#[FIELD('Service')]#</h4>
</div>
<div class="dtv-row">
<div class="dtv-cell small-12 medium-5 large-4 columns" style="text-align: center;">
   <div class="dtv-row"><img src="#[FIELD('Image')]#" style="min-height: 13em; max-height: 100px;" /></div>
   <div class="dtv-row">
      <div>#BTN_EZV_NEW_REQUEST#</div>
   </div>
</div>
<div class="dtv-cell small-12 medium-7 large-8 columns">
   <div class="dtv-row dtv-memo dtv-p">#[FIELD('Description')]#</div>
</div>

Comment afficher le portail Self Service

1. Créez un datasource EasyVista pour l'extraction du catalogue des services :

  • option de menu Service Manager : Operation > Services Requests > New Request
  • filtre : General Services 
  • vue : List IT Store

         EVApps - widget Data Viewer - Example DataSource 2.png

2. Saisissez le code Html du Mode Liste (Line Cell Format). Le code ci-dessous permet une présentation sans bordure et en insérant des espaces entre les colonnes.

Représentation Mode Liste (Line Cell Format)
EVApps - widget Data Viewer - Example Line 2.png
<table align="left" cellpadding="1" cellspacing="20" style="width: 100%; border:0px solid transparent;">
   <tbody>
      <tr>
         <td style="text-align:left" width="15%"><img height="100%" src="#[FIELD('Image')]#" width="100%" /></td>
         <td style="text-align:left" width="35%">#[FIELD('Service')]#</td>
         <td style="text-align:left" width="50%">#[FIELD('Description')]#</td>
      </tr>
   </tbody>
</table>

Comment implémenter une recherche dans la base de connaissance

        Open url.png  voir Procédure du widget Knowledge Base

Tags :
Powered by XWiki © EasyVista 2024