La gestion multilingue dans Service Apps


La gestion multilingue des applications Service Apps se fait au travers de mots-clés (ou keywords).

  • Chaque mot-clé est associé à une information textuelle de l'application. Cette information peut être traduite dans l'ensemble des langues supportées par l'application.
  • Un mot-clé peut être ajouté dans n’importe quelle zone de texte d’un widget via le tag avancé Translation tag... ou via le Translation Tags Picker. Son libellé est ensuite affiché dynamiquement sur l'application en fonction de la langue de l'utilisateur connecté.
  • Un mot-clé peut également être ajouté sur certains messages de datasources.
  • Les mots-clés sont répertoriés dans un fichier .csv propre à chaque application. Ce fichier est géré via un datasource dédié Translation et un éditeur de traduction.

Exemple

Le fichier .csv associé à cet exemple utilise les mots-clés suivants.
        Example - CSV file.png

Instructions < keyword> en mode Conception Application en mode Exécution

Les informations textuelles sont affichées sous la forme #[TRANSLATION.< keyword>]#, quelle que soit la langue de l'utilisateur connecté.

Elles sont automatiquement converties dans la langue de l'utilisateur connecté à partir des libellés contenus dans le fichier .csv.

  • Placement des mots-clés via le Translation Tags Picker pour les informations descriptives   - Open url.png voir Procédure

    exemple Nom de la page

    Example - Keyword instruction in descriptive information.png

  • Placement des mots-clés via l'éditeur de texte pour les zones de code Html   - Open url.png voir Procédure

    exemple Dataviewer affichant les tickets

    Example - Keyword instruction in text editor.png

  • Application ouverte par un utilisateur US : les libellés sont affichés en anglais

    Example - App in Run mode - EN.png

  • La même application ouverte par un utilisateur FR : les libellés sont affichés en français

    Example - App in Run mode - FR.png

Remarques

  • Le fichier .csv doit être encodé au format CSV UTF-8 afin d’éviter tout conflit avec les accents et les caractères spéciaux.
  • Tous les modèles disponibles dans la bibliothèque Service Apps sont livrés avec un fichier multilingue contenant la traduction de toutes les informations textuelles dans les 6 langues de base : anglais, français, espagnol, portugais, italien, allemand.
    • Cette traduction est maintenue par EasyVista sur l'ensemble des modèles.
    • Les mises à jour effectuées dans le fichier .csv à l'occasion d'un changement de version d'un modèle ne sont pas reportées sur les applications existantes qui utilisent le modèle.
  • Lorsqu'une application est créée à partir de l'un des modèles de la bibliothèque, elle hérite automatiquement du fichier multilingue.
    • Vous pouvez modifier les traductions effectuées dans les 6 langues standard.
    • Vous pouvez ajouter les langues supplémentaires supportées par votre application dans les colonnes L1 à L6, sous réserve que celles-ci aient été configurées au préalable dans Service Manager.
    • Vous pouvez ajouter ou supprimer des mots-clés.
  • Lorsqu'une nouvelle application vide de contenu est créée, aucun fichier multilingue n'est rattaché.
    • Si vous souhaitez en créer un, téléchargez le modèle ci-dessous contenant les entêtes de colonnes.
              Download icon.png  Modèle fichier .csv
  • Les mots-clés contenus dans le fichier .csv sont disponibles pour l'ensemble des pages de l'application.
  • Les mots-clés peuvent être ajoutés sur toutes les zones de saisie ou descriptives des widgets et sur certains messages des datasources.
    • Sur les propriétés Html Code, Label, Header / Footer permettant la saisie de code Html, les mots-clés sont ajoutés via un tag avancé dédié de l'éditeur de texte.
    • Sur les propriétés descriptives ne permettant pas de saisie de code Html (nom des pages, titre des graphiques ou des légendes, messages des datasources, ...,), les mots-clés sont ajoutés via le Translation Tags Picker. 
  • Les libellés des mots-clés sont affichés sous la forme #[TRANSLATION.<keyword>]# dans l'éditeur de texte des widgets. Ils sont affichés dans la langue de l'utilisateur connecté dans le volet Conception de l'éditeur graphique et en mode Exécution.

Attention

  • Vous ne devez pas modifier les entêtes de colonnes du fichier .csv. Ces informations sont en effet indispensables au processus de traduction.
  • La modification du nom d'un mot-clé dans le fichier .csv n'est pas reportée sur l'application : vous devez modifier le nom dans tous les widgets qui l'utilisent  - Open url.png voir Procédure
  • Si vous supprimez le fichier .csv, les informations textuelles de l'application ne peuvent plus être traduites. Elles sont alors remplacées par des instructions #[TRANSLATION.<keyword>]#.

Règles de nomenclature des noms des mots-clés

  • Saisissez des noms exclusivement en minuscules.
  • N'insérez pas d'espace dans les noms des mots-clés. Utilisez à la place le caractère _.

    exemple  mot-clé : creation_date  /  et non : creation date

  • N'insérez pas de caractères spéciaux.

Bonnes pratiques

  • Effectuez une sauvegarde du fichier .csv avant toute modification de son contenu. Vous pourrez ainsi revenir à la version antérieure en rechargeant le fichier.
  • Utilisez le tag avancé Translation Tags, via l'éditeur de texte, ainsi que le Translation Tags Picker pour éviter toute erreur dans l'instruction #[TRANSLATION.<keyword>]# relative au mot-clé à utiliser.
  • Évitez au maximum de modifier les noms des mots-clés une fois qu'ils sont utilisés dans l'application. Les modifications ne sont en effet pas reportées automatiquement sur les widgets qui les utilisent.
  • Si vous souhaitez créer un fichier .csv multilingue, téléchargez le modèle ci-dessous contenant les entêtes de colonnes. Vous pouvez ensuite y ajouter votre liste de mots-clés et de libellés pour chacune des langues supportées par votre application.
            Download icon.png  Modèle fichier .csv

Description des écrans

Le datasource Translation

La gestion multilingue repose sur un datasource dédié Translation qui permet de récupérer les mots-clés du fichier .csv (Comma-Separated Values, format structuré de données textuelles). Une fois téléchargé, tous les mots-clés deviennent disponibles dans l'ensemble de l'application.

         Translation datasource.png

Accès : via Apps - Translation icon.png dans le volet Objets de l'éditeur graphique

CSV Data Editor : Ouvre l'éditeur de traduction, permettant de saisir les libellés multilingues des mots-clés.

  • Le bouton Edit Translation est remplacé par la mention No Translation tant qu'aucun fichier .csv n'est associé à l'application.
     

CSV Upload / Update Time : Date de dernier téléchargement ou de dernière modification du fichier .csv.

ChooseFile

Choose A File : Permet de sélectionner le fichier via la boîte de dialogue Ouvrir. Note : Vous pouvez également sélectionner le fichier via un cliquer-glisser dans la zone.

Export Translation : Permet d'enregistrer le fichier .csv en local, afin de le modifier plus facilement. Il peut ensuite être rechargé dans l'application : automatiquement, toutes les informations textuelles de l'application sont réactualisées.

Remove Translation : Supprime le fichier .csv.

Best Practice icon.png  Effectuez une sauvegarde du fichier avant de le supprimer, via Export Translation. Cela vous permettra de récupérer les traductions si nécessaire. 

L'éditeur de traduction

L'éditeur de traduction permet de vérifier directement les libellés des mots-clés dans l'ensemble des langues utilisées dans Service Manager, et de les corriger si nécessaire, sans ouvrir le fichier .csv dans Excel.

         Translation editor.png

Accès : bouton Edit Translation sous le champ CSV Data Editor

Note : Les modifications effectuées dans le tableau sont prises en compte en validant via le bouton OK.

KeyWord : Colonne affichant l'ensemble des mots-clés contenus dans le fichier .csv.

Colonnes en, fr, sp, po, it, de : Traductions dans les 6 langues standard (anglais, français, espagnol, portugais, italien, allemand) sur l'ensemble des modèles.

Colonnes L1 à L6 : Emplacements disponibles pour les traductions dans 6 langues supplémentaires.

Add New Row : Ajoute une ligne en bas du tableau, pour la saisie d'un nouveau mot-clé.

Delete Row : Supprime du fichier .csv la ligne active du tableau.
Note : Vous pouvez sélectionner plusieurs lignes contiguës.

Download CSV : Télécharge le tableau tel qu'il est affiché à l'écran.
Note : À la différence du téléchargement via l'option Export Translation, le fichier téléchargé reflète toutes les modifications apportées dans le tableau même si elles ne sont pas encore validées.

Autres fonctionnalités

  • Utilisez la zone de recherche pour filtrer les mots-clés.
    • La recherche se déclenche dès le premier caractère.
    • La chaîne de caractères est recherchée dans l'ensemble des colonnes.
              Translation editor - Search functionality.png
  • Double-cliquez sur l'entête d'une colonne pour trier les mots-clés sur cette colonne, et modifier l'ordre de tri alphabétique ascendant Up icon.png ou descendant Down icon.png.
  • Double-cliquez sur une cellule, ou cliquez dans la cellule puis appuyez sur la touche <F2>, pour modifier le contenu.

Le Translation Tags Picker

Le Translation Tags Picker permet la saisie d'un mot-clé sur une zone descriptive : nom d'une page, titre d'un graphique, texte affiché par défaut dans une zone de recherche (Search Placeholder), ...
Note : À la différence des zones permettant la saisie de code Html, un seul mot clé peut être sélectionné dans une zone descriptive.

         Translation tags picker.png

Accès : clic sur l'icône Translation tags picker icon.png présente sur une propriété descriptive

Item Label : Mot-clé qui doit être appliqué à la zone descriptive.
 

Autres fonctionnalités

  • Utilisez la zone de recherche pour filtrer les mots-clés.
    • La recherche se déclenche dès le premier caractère.
    • La chaîne de caractères est recherchée dans l'ensemble des mots-clés.
              Translation tags picker - Search functionality.png
  • Cliquez sur Deactivate keyword icon.png pour désélectionner le mot-clé.
            Translation tags picker - Cancel keyword.png

Procédure : Comment traduire une application

Étape 1 (optionnelle) : Sélection du fichier multilingue .csv

Note : Si vous avez créé votre application à partir d'un modèle de la bibliothèque, le fichier .csv est automatiquement associé à l'application.

1. Allez sur l'éditeur graphique.

2. Cliquez sur Apps - Translation icon.png dans le volet Objets.
L'inspecteur de propriétés du datasource Translation est ouvert.

3. Cliquez sur la zone Choose A File et sélectionnez le fichier .csv, ou cliquez-glissez le fichier dans cette zone.
Tous les mots-clés du fichier deviennent disponibles sur l'ensemble de l'application.

Étape 2 (optionnelle) : Ajustement du contenu du fichier .csv

Note : Si vous avez créé votre application à partir d'un modèle de la bibliothèque, les traductions dans les 6 langues de base sont automatiquement renseignées.

1. Ouvrez l'éditeur de traduction via Edit Translation sous le champ CSV Data Editor.
Le fichier .csv est ouvert.

2. Effectuez les ajustements nécessaires.

Best Practice icon.png  Utilisez la zone de recherche pour filtrer le tableau.

Modification des traductions d'un mot-clé

  • Double-cliquez sur la cellule à modifier.
    ou
    Cliquez sur la cellule puis appuyez sur la touche <F2>.
  • Saisissez la traduction du mot-clé dans la langue sélectionnée.
     

Ajout d'un mot-clé

  • Cliquez sur Add New Row.
    Une nouvelle ligne est insérée en bas du tableau.
  • Saisissez le mot-clé dans la colonne KeyWord.
  • Renseignez les traductions dans chacune des langues supportées par votre application.
     

Suppression d'un mot-clé

  • Cliquez sur la ligne du mot-clé à supprimer.
  • Cliquez sur Delete Row.
     

3. Cliquez sur OK pour sauvegarder vos modifications.
L'éditeur de traduction est fermé.

Étape 3 : Placement des mots-clés dans les widgets de l'application

1. Activez le widget dans lequel vous souhaitez insérer un mot-clé.
L'inspecteur de propriétés est ouvert.

2. Suivez la procédure ci-dessous en fonction du type de zone sur laquelle vous souhaitez ajouter un mot-clé.


Placement d'un mot-clé sur une zone descriptive

a. Cliquez sur Translation tags picker icon.png en regard de la propriété descriptive.
        Active widget - Open Translation tags picker.png

Le Translation Tags Picker est ouvert.

b. Cliquez sur le mot-clé à insérer dans la zone descriptive.

         Active widget - Translation tags picker - Keyword selection.png

c. Cliquez sur OK.

  • Le Translation Tags Picker est fermé.
  • L'instruction #[TRANSLATION.<keyword>]# est ajoutée dans la zone descriptive.
  • Le libellé du mot clé est affiché dans le volet Conception dans la langue de l'utilisateur connecté.
    Active widget - Translation tags picker - View keyword code.png


Placement d'un mot-clé sur une zone permettant la saisie de code Html

a. Cliquez sur Apps - Edit Html icon.png en regard de la propriété permettant l'insertion de code Html.
        Active widget - Open Editor text.png

L'éditeur de texte est ouvert.

b. Positionnez le curseur où vous souhaitez insérer le mot-clé.

c. Ouvrez le panneau des tags avancés via Apps - Text Editor - Advanced tags icon.png, puis cliquez sur la catégorie Translation Tag....
Le panneau des mots-clés est affiché.

d. Cliquez sur le mot-clé souhaité.
L'instruction #[TRANSLATION.<keyword>]# est insérée dans l'éditeur de texte.
        Active widget - Editor text - Translation advanced tag.png

e. Répétez l'opération pour chaque mot-clé à ajouter.

f. Cliquez sur Apps - Text Editor - Advanced tags icon.png pour refermer le panneau des mots-clés

g. Cliquez sur OK.

  • L'éditeur de texte est fermé.
  • L'instruction #[TRANSLATION.<keyword>]# est ajoutée dans le code Html du widget.
  • Le libellé du mot clé est affiché dans le volet Conception dans la langue de l'utilisateur connecté.
    Active widget - Translation editor - View keyword code.png

Étape 4 (optionnelle) : Correction des noms des mots-clés déjà placés dans l'application

Note : Si vous avez corrigé certains noms de mots-clés dans l'éditeur de traduction, vous devez reporter les modifications manuellement sur tous les widgets qui utilisent l'ancien nom du mot-clé.

1. Activez le widget dans lequel vous devez corriger le nom du mot-clé.
L'inspecteur de propriétés est ouvert.

2. Corrigez les instructions #[TRANSLATION.<keyword>]# dans les zones concernées.

Correction sur une zone descriptive

  • Ouvrez le Translation Tags Picker via Translation tags picker icon.png.
  • Sélectionnez le nouveau mot-clé.
  • Cliquez sur OK.
    La zone descriptive est mise à jour.
     

Correction sur une zone permettant la saisie de code Html

  • Ouvrez l'éditeur de texte via Apps - Edit Html icon.png.
  • Supprimez l'instruction #[TRANSLATION.<keyword>]# erronée.
  • Ouvrez le panneau des mots-clés via Apps - Text Editor - Advanced tags icon.png, puis cliquez sur la catégorie Translation Tag....
  • Cliquez sur le nouveau mot-clé.
    Le code Html est mis à jour.
  • Refermez l'éditeur de texte via OK.
Tags :

Raccourcis

Portail client

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

Powered by XWiki © EasyVista 2022