L'éditeur de texte de Service Apps : Tags avancés

Modifié le 28/05/2022 10:53

Tag Page

Ouvre une page de l'application depuis un lien hypertexte ou un bouton d'action.

Remarques

  • Vous pouvez utiliser le widget Page qui permet l'ouverture d'une page via un bouton d'action.
  • Pour insérer un lien vers une page web, une autre application ou la messagerie, utilisez la gestion des liens hypertextes via Apps - Text Editor - Hyperlink icon.png.

Procédure : Comment insérer un lien / bouton ouvrant une page

Étape 1 : Ouverture du tag Page

1. Positionnez le curseur où vous souhaitez insérer le lien / bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Page.

  • Pour ouvrir la page de l'application dans l'onglet courant/la fenêtre courante (en remplacement de la page courante) : cliquez sur la sous-catégorie Page Link.
  • Pour ouvrir la page de l'application dans une fenêtre superposée (popup) : cliquez sur la sous-catégorie Page Popup.
             Apps - Text Editor - Advanced tags Page - Page popup.png  Apps - Text Editor - Advanced tags Page - Page link.png
     

Étape 2 : Saisie des informations

1. Renseignez les informations sur la page à ouvrir.

  • Select page : Nom de la page de l'application à ouvrir.
  • Link title : Texte cliquable du lien / bouton.
  • Modal title : Titre de la fenêtre superposée (popup).
  • Choose button type : Mode d'ouverture, qui peut être un lien hypertexte (option Link) ou un bouton d'action (option Button).

2. (optionnel) Renseignez les couleurs particulières pour un bouton d'action.

  • Background Color : Couleur de fond du bouton d'action.
  • Background Color On Hover : Couleur de fond du bouton lorsqu'il est survolé avec la souris.
  • Text Color : Couleur du texte affiché dans le bouton d'action.
  • Text Color On Hover : Couleur du texte affiché dans le bouton lorsqu'il est survolé avec la souris.

3. Cliquez sur Apps - Add icon.png.
Le lien hypertexte / bouton est inséré sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Tag Data Picker

Insère des valeurs d'un datasource (valeur d'une colonne ou d'une cellule, résultat d'un calcul statistique).

Remarques

  • Les données provenant de Service Manager sont affichées sous forme de texte enrichi dans le Data Picker (le texte est formaté avec des options de mise en forme via des balises). Pour travailler sur les données brutes et supprimer la mise en forme du texte enrichi, vous devez utiliser la fonction Plain Text au lieu de la fonction Field.

    exemple  #[FIELD('TABLE.COLUMN')]#  ==>  #[PLAINTEXT('TABLE.COLUMN')]#

Note : Pour des raisons de sécurité, la fonction Plain Text n'apparaît pas dans les fonctionnalités du Data Picker. Vous devez l'insérer via l'éditeur de code Html de l'éditeur de texte  - Open url.png voir Procédure

Procédure : Comment utiliser le Data Picker

Étape 1 : Ouverture du tag Data Picker

1. Positionnez le curseur où vous souhaitez insérer la colonne du datasource.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Data Picker.
La liste des colonnes du datasource est affichée.
         Apps - Text Editor - Advanced tags Data Picker.png
 

Étape 2 : Saisie des informations

1. Cliquez sur la colonne du datasource souhaitée.

2. Sélectionnez la valeur à insérer.

  • Cell value : Permet d'afficher la valeur de l'enregistrement courant.
    • Pour afficher la valeur d'un enregistrement précis, sélectionnez-le via la liste #Row.
               Apps - Text Editor - Advanced tags Data Picker - detail.png
  • Special link tags : Permet d'indiquer la nature de la colonne à insérer. Automatiquement, une balise Html est insérée.
    • tag Image : Colonne définissant une image
      balise : <img src="#[FIELD('xxxxxxx')]#" class="fr-draggable">
    • tag Mail to : Colonne définissant un lien vers la messagerie
      balise : <mailto:#[FIELD('xxxxxxx')]#>
    • tag Tel : Colonne définissant un numéro de téléphone
      balise : <tel:#[FIELD('xxxxxxx')]#>
    • tag Skype : Colonne définissant une adresse Skype
      balise : <skype:#[FIELD('xxxxxxx')]#>
  • Fonctions d'agrégation statistiques : Disponibles en fonction de la colonne/enregistrement sélectionné dans le datasource.
    • Max : Valeur maximale de la colonne/enregistrement
    • Min : Valeur minimale de la colonne/enregistrement
    • Average : Valeur moyenne de la colonne/enregistrement
    • Sum : Somme des valeurs de la colonne/enregistrement
    • Count : Nombre de valeurs contenues dans la colonne/enregistrement
  • Decimals to show : Pour les valeurs numériques, sélectionnez le nombre de décimales à afficher.

3. Cliquez sur Apps - Add icon.png.
Les instructions correspondant à la valeur sélectionnée sont insérées sur l'éditeur de texte  - Open url.png voir Description
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.
 

Étape 4 (optionnelle) : Insertion du code Html pour les images

1. Ouvrez l'éditeur de code Html via Apps - Text Editor - Html Editor icon.png.

2. Encadrez l'instruction #[FIELD('Image')]# avec la balise < img src="..." >.

3. Ajoutez les attributs Html height et width pour définir la taille de l'image.

exemple  < img src="#[FIELD('Image')]#" height="150" width="100" /" >


Étape 5 (optionnelle) : Insertion du code Html pour utiliser la fonction Plain Text

1. Ouvrez l'éditeur de code Html via Apps - Text Editor - Html Editor icon.png.

2. Remplacez l'instruction #[FIELD('TABLE.COLUMN')]# par l'instruction #[PLAINTEXT('TABLE.COLUMN')]#.

          Apps - Text Editor - Data Picker - PlainText function.png

Instructions insérées dans l'éditeur de texte

  • Pour une colonne du datasource : #[FIELD('ColumnName')]#
  • Pour une cellule particulière du datasource : #[CELL(x,y),DIGITS ( n)]#  ==>  cellule à l'intersection de la xème ligne et de la yème colonne (Note : La numérotation commence à 0), suivie du nombre de décimales (DIGITS n).

    exemple  Cellule à l'intersection de la 2ème ligne et 6ème colonne, sans décimale  ==>  #[CELL(1,5),DIGITS(0)]#

  • Pour une cellule avec une fonction d'agrégation statistique :
    • #[FunctionName_COLUMN( x),DIGITS ( n)]#  ==>  fonction appliquée à la colonne x, suivie du nombre de décimales.
    • #[FunctionName_COLUMN( x),DIGITS ( n)]#  ==>  fonction appliquée à l'enregistrement x, suivie du nombre de décimales.

exemple 

  • Sélection de la moyenne des valeurs de la 2ème colonne avec 2 décimales  ==>  #[AVERAGE_COLUMN(1),DIGITS(2)]#
  • Sélection de la somme des valeurs du 1er enregistrement sans décimale  ==>  #SUM_ROW(1),DIGITS(0)]#

 

Tag Workflow

Insère des boutons de commande permettant de valider / terminer les actions liées aux incidents / demandes de service sans ouvrir Service Manager.
         Apps - Text Editor - Advanced tags Workflow - detail.png

Remarques

  • Suivant le type d'action, 3 boutons de commande peuvent être paramétrés, correspondant aux boutons affichés dans Service Manager lorsque l'assistant Terminer est lancé : Accepté, Refusé, Demande d'informations  - Open url.png voir Liste des types d'action
  • Les boutons de commande peuvent être insérés dans tous les modes d'un widget Data Viewer : Liste (Line), Mosaïque (Tile), Fiche (Form).

Saisie d'un commentaire lors d'une action de validation

  • Par défaut, les boutons de commande Accepté, Demande d'informations, Refusé demandent la saisie d'un commentaire à l'utilisateur pour justifier sa réponse.
             Apps - Text Editor - Advanced tags Workflow - Rejected comment.png
  • Un questionnaire de validation, de refus ou de demande d’informations peut également être affiché au niveau de Service Manager sur une étape de validation du worfklow pilotant l'incident / demande.
  • Pour éviter que la demande de saisie d'un commentaire soit doublonnée, vous pouvez masquer la zone de saisie du commentaire dans votre application Service Apps via la propriété Hide Default Fields de chaque type de bouton.
  • Le paramétrage des boutons de commande s'applique à toutes les actions de type Validation.

Attention

  • Si vous désactivez la saisie d'un commentaire sur un bouton de commande Refusé dans votre application Service Apps, des refus de validation non volontaires ou sans explication peuvent être faits par les utilisateurs. Pour éviter cela, effectuez le paramétrage suivant dans Service Manager :
    • ajoutez une étape de gestion des refus sur les workflows des incidents / demandes contenant une étape de validation ;
    • rattachez à cette étape un questionnaire de refus permettant la saisie d'un commentaire explicatif du refus.
               Apps - Text Editor - Advanced tags Workflow - Workflow with rejected step.png
    • configurez l'étape de gestion des refus sur tous les workflows des incidents / demandes contenant une étape de validation.

Procédure : Comment insérer les boutons de clôture / validation

Étape 1 : Ouverture du tag Workflow

1. Allez sur le widget pointant vers le datasource lié à la table AM_ACTION

2. Ouvrez l'éditeur de texte via Apps - Edit Html icon.png depuis la propriété ...Cell Format d'un widget Data Viewer (sections Tile, Line ou Form) ou la propriété Html Code d'un widget Secured Html.

3. Positionnez le curseur où vous souhaitez insérer les boutons de commande.

4. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Workflow.
         Apps - Text Editor - Advanced tags Workflow.png
 

Étape 2 : Ajout des boutons de commande

1. Renseignez les informations pour les 3 boutons.

  • Hide Button : Indique si le bouton de commande est masqué (case cochée) ou affiché (case non cochée).
  • Custom Label : Libellé du bouton de commande.
    • Les libellés sont multilingues.
    • Valeurs par défaut : Accepté / Demande d'informations / Refusé.

2. Cliquez sur Apps - Add icon.png.
L'instruction #[EZVTAG-ACTIONS... ]# est ajoutée sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de texte

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur OK.

  • L'éditeur de texte est fermé.
  • Les libellés des boutons de commande sont mis à jour dynamiquement en mode Exécution en fonction du type d'action.

Tags EasyVista

Tag Document Upload

Insère un bouton d'action pour télécharger des documents.
         Apps - Text Editor - Advanced tags EasyVista - Upload detail.png

Remarques

  • Le libellé du bouton est identique au libellé de Service Manager.

Procédure : Comment insérer un bouton de téléchargement des documents

Étape 1 : Ouverture du tag EasyVista > Document Upload

1. Positionnez le curseur où vous souhaitez insérer le bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie EasyVista > Document Upload.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Étape 2 : Insertion du bouton

1. Cliquez sur Apps - Add icon.png.
L'instruction #[EZVTAG-UPLOAD_DOC]# est ajoutée sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Tag New Request

Ajoute un bouton de commande pour générer une nouvelle demande (service / changement) sans ouvrir Service Manager. Le questionnaire associé est ouvert automatiquement.

Exemples

  • Depuis la liste des incidents en cours, afficher un bouton pour générer une demande de changement relative à l'incident sélectionné
  • Depuis la liste des entrées du catalogue des demandes de service, afficher un bouton pour générer une demande de service associée à l'entrée sélectionnée
             Apps - Text Editor - Advanced tags EasyVista - New request detail.png

Procédure : Comment insérer un bouton de création d'une demande

Étape 1 : Ouverture du tag EasyVista > New Request

1. Positionnez le curseur où vous souhaitez insérer le bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie EasyVista > New Request.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Étape 2 : Saisie des informations

1. Saisissez le libellé du bouton via le champ Button Label.

  • Les caractères spéciaux < > ‘ / etc. ne sont pas autorisés.
             Apps - Text Editor - Advanced tags EasyVista - New request Properties.png

2. Définissez les propriétés graphiques du bouton via l'onglet Style.

         Apps - Text Editor - Advanced tags EasyVista - New request Style.png  New request - Button - Style properties.png

  • (1) Background Color : Couleur de fond du bouton.
  • (2) Text Color : Couleur du texte du bouton.
  • (3) Background Color on Hover : Couleur de fond du bouton lorsque le titre de l'objet est survolé avec la souris.
  • (4) Text Color on Hover : Couleur du texte du bouton lorsque le titre de l'objet est survolé avec la souris.
  • Font Size : Taille de la police de caractères.
  • (5) Border Radius : Rayon appliqué aux angles du bouton, permettant de le représenter de façon circulaire.

3. (optionnel) Renseignez les informations qui n'ont pas été mises à jour lors de la création de la demande dans Service Manager, via l'onglet Properties.
         Apps - Text Editor - Advanced tags EasyVista - New request - Properties selected.png

  • Service : Entrée au catalogue des demandes de service / demandes de changement.
    • Une fois l'entrée sélectionnée, cliquez sur + Add Parameter.
    • Lorsque le bouton de commande est placé sur un widget pointant sur le catalogue des demandes de service, le champ est grisé. L'entrée au catalogue en cours est sélectionnée (CATALOG_GUID) et ne peut pas être modifiée.
  • Destination field (SD_REQUEST) : Champ destination dans la table SD_REQUEST.
    • Tous les champs clé ou associés à la clé, les champs AVAILABLE_FIELD_... et les éventuels champs E_xxx sont proposés.
  • Parameter type : Source de l'information à stocker dans le champ destination. Les éléments à renseigner varient en fonction du type de paramètre.
    • Field : La source est un champ du datasource sur lequel pointe le widget.
      • Sélectionnez le champ souhaité via la liste Column qui contient tous les champs autorisés.
      • Lorsque le champ destination est une clé, sélectionnez dans la liste Column la clé primaire de la table source (champ PK).
          
    • Other Datasources : La source est un champ d’un autre datasource de l’application.
      • Sélectionnez le champ souhaité via la liste Datasource qui contient tous les datasources de l'application.
      • Sélectionnez ensuite le champ du datasource via la liste Column qui contient tous les champs du datasource autorisés.
         
    • Tag : La source est un tag dédié.
      • Sélectionnez le tag souhaité via la liste Select tag qui contient des valeurs prédéfinies.
      • Note : Vous ne pouvez pas ajouter de tags. Ceux-ci sont définis par EasyVista.
         
    • Value : La source est une valeur.
      • Renseignez la valeur alphanumérique dans la zone Enter value.

4. Cliquez sur + Add.
Le nouveau paramètre s'affiche en bas de l'écran, avec une signalétique de couleur rappelant chaque liste déroulante.
         Apps - Text Editor - Advanced tags EasyVista - New request - Parameter added.png

  • Survolez la zone de couleur avec la souris pour afficher la totalité de l'information.
  • Cliquez sur Delete icon.png pour supprimer un paramètre.

5. (optionnel) Ajoutez les paramètres supplémentaires via Add Parameter.

6. Cliquez sur Apps - Add icon.png.
Le bouton de commande est ajouté sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Modification du bouton de commande

  • Cliquez sur le bouton dans l'éditeur de texte.
  • Cliquez sur Apps - Text Editor - New request - Modify icon.png.
             Apps - Text Editor - New request - Modify.png
     

Modification du libellé du bouton de commande

Tag Embed Questionnaire

Ajoute un bouton d'action ouvrant une fenêtre de création d'une nouvelle demande de service, avec tous les éléments de l'entrée au catalogue et les questionnaires.
         Apps - Text Editor - Advanced tags EasyVista - Embed questionnaire detail.png

Procédure : Comment ouvrir une fenêtre de création d'une demande

Étape 1 : Ouverture du tag EasyVista > Embed Questionnaire

1. Positionnez le curseur où vous souhaitez insérer le bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie EasyVista > Embed Questionnaire.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Étape 2 : Insertion du bouton

1. Cliquez sur Apps - Add icon.png.
L'instruction #[EZVTAG-NEW-REQUEST question="embed"]# est ajoutée sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Tag Status Notification

Affiche un bandeau vert de notification indiquant le statut de la demande créée.
         Apps - Text Editor - Advanced tags EasyVista - Status notification detail.png

Procédure : Comment afficher le bandeau de notification

Étape 1 : Ouverture du tag EasyVista > Status Notification

1. Positionnez le curseur où vous souhaitez insérer le bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie EasyVista > Status Notification.
         Apps - Text Editor - Advanced tags EasyVista.png
 

Étape 2 : Insertion du bandeau de notification

1. Cliquez sur Apps - Add icon.png.
L'instruction #[EZVTAG-NEW-REQUEST-STATUS]# est ajoutée sur l'éditeur de texte.
 

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Tag Star Rating

Affiche les étoiles de notation sur les articles de la base de connaissance.
         Apps - Text Editor - Advanced tags Star rating - detail.png

Remarques

  • Ce tag est disponible uniquement lorsque l'éditeur de texte est ouvert depuis un widget utilisant un datasource EasyVista pointant vers la base de connaissance.

Procédure : Comment afficher les étoiles de notation

Étape 1 : Ouverture du tag EasyVista > Star Rating

1. Positionnez le curseur où vous souhaitez insérer le bouton.

2. Cliquez sur Apps - Text Editor - Advanced tags icon.png puis sur la catégorie Star Rating.
         Apps - Text Editor - Advanced tags Star rating.png
 

Étape 2 : Insertion des étoiles de notation

1. Cliquez sur Apps - Add icon.png.
L'instruction #[DSTAG-star-rating ratingValue ="#[FIELD('...')]# est ajoutée sur l'éditeur de texte.

2. Renseignez les informations.

  • Authorized modification : Indique si le contenu du champ peut être modifié (case cochée - la mise à jour est effectuée dans Service Manager) ou s'il est uniquement en consultation (case non cochée).
     

Étape 3 : Fermeture de l'éditeur de tags

1. Cliquez sur Apps - Text Editor - Advanced tags icon.png.
Le panneau dédié est refermé. Vous revenez sur l'éditeur de texte.

Tag Translation Tag...

Affiche la liste des mots-clés traduits de l'application. Un clic sur l'un des mots-clés permet de l'ajouter dans n’importe quelle zone de saisie d’un widget  - Open url.png voir Gestion multilingue des applications

         Active widget - Editor text - Translation advanced tag.png

Remarques

  • Toutes les informations textuelles d'une application sont répertoriées dans un fichier .csv, encodé en UTF-8 afin d’éviter tout conflit avec les accents et les caractères spéciaux.
    Note :  Les 6 langues de base sont gérées par EasyVista. Il s'agit de l'anglais, le français, le portugais, l'espagnol, l'allemand, l'italien.
  • Tous les modèles disponibles dans la bibliothèque Service Apps sont livrés automatiquement avec un fichier multilingue répertoriant tous les mots-clés de l'application dans les 6 langues de base.

Procédure : Comment traduire les libellés d'une application

    Open url.png voir Procédure

Tags :
Powered by XWiki © EasyVista 2022