L'éditeur de texte des applications


Accès

L'éditeur de texte est accessible depuis l'éditeur graphique, sur une propriété Label, Header/Footer, Html Code d'un widget.

Description de l'éditeur de texte

L'éditeur de texte se décompose en 2 zones :

  • (1) la barre d'outils ;
  • (2) la zone d'édition.
             Apps - Text Editor.png

Remarques

  • Une info-bulle est disponible sur chaque icône de la barre d'outils.
  • Certaines icônes de la barre d'outils peuvent être masquées suivant la propriété depuis laquelle l'éditeur de texte est ouvert.
  • Une barre d'outils contextuelle peut être disponible sur certains objets, affichée en cliquant sur l'objet (image, lien hypertexte, tableau).
  • La traduction en code Html est effectuée automatiquement lorsque la fenêtre de l'éditeur est sauvegardée.
  • Le formatage du texte défini via l'éditeur est prioritaire sur les couleurs définies au niveau des propriétés Theme > Text Color.

Attention

  • Si l'adresse URL d'une page web ou d'une application est modifiée alors qu'un lien hypertexte pointe vers celle-ci, le lien ne fonctionnera plus. Dans ce cas, pensez à modifier le lien via l'éditeur de texte.
  • Le comportement de certaines balises Html peut changer suivant le navigateur Internet utilisé.

Best Practice big icon.pngBonnes pratiques

  • Pour afficher un tableau encadré, utilisez l'attribut Html style et non les attributs border car ceux-ci ne sont pas interprétés en dehors de l'éditeur de texte.
Exemple Code Html
Apps - Text Editor - Example Border style.png
<table style="border: outset 2px grey ;" cellpadding="1" cellspacing="1">
    <tbody>
         <tr>
              <td><strong>Month: #[FIELD('Creation Date')]#</strong><br/>
                    Incidents: #[FIELD('Incidents')]#<br/>
                    Service Requests: #[FIELD('Service Requests')]#
              </td>
         </tr>
    </tbody>
</table>

Description de la barre d'outils

         Apps - Text Editor - Toolbar.png

         Note : Ci-dessous, les icônes sont regroupées suivant leur fonctionnalité.

Édition du document

Apps - Text Editor - Undo toolbar.png  Annuler / Revenir à la dernière modification

Apps - Text Editor - Select all icon.png  Sélectionner tout le texte

Apps - Text Editor - Html Editor icon.png  Éditeur de code Html : Bascule entre l'éditeur de code Html et l'aperçu Wysiwyg.
         Apps - Text Editor - Html Editor detail.png

Apps - Text Editor - Full screen icon.png  Plein écran : Bascule entre le plein écran et la taille réduite de la fenêtre.

Mise en forme du texte

Apps - Text Editor - Police toolbar.png  Gras / Italique / Souligné / Barré

Apps - Text Editor - Fonts and Color toolbar.png  Indice / Exposant / Police / Taille de police / Couleur de texte

Apps - Text Editor - Text remove format icon.png  Annuler la mise en forme du texte : Sélectionnez le texte formaté et cliquez sur l'icône pour revenir au texte brut, sans aucune mise en forme.
 

Présentation du texte

Apps - Text Editor - Paragraph toolbar.png  Styles de paragraphe / Type d'alignement (Gauche / Centrer / Droite / Justifier)

Apps - Text Editor - Tabulation toolbar.png  Diminuer / Augmenter le retrait (tabulation)
 

Texte enrichi

Apps - Text Editor - Bullets toolbar.png  Insérer / Supprimer une liste numérotée / à puces

Apps - Text Editor - Quote icon.png  Insérer une citation

Apps - Text Editor - Line icon.png  Insérer une ligne horizontale

Apps - Text Editor - Table icon.png  Insérer un tableau : Déplacez ensuite la souris sur le nombre de lignes / colonnes souhaité
         Apps - Text Editor - Table detail.png

Pour modifier les propriétés d'un tableau affiché dans l'éditeur de texte, cliquez dessus : une barre d'outils contextuelle est affichée.

Apps - Text Editor - Table toolbar.png

Apps - Text Editor - Table - Table header icon.png Définir la ligne d'en-tête du tableau
Apps - Text Editor - Table - Row icon.png Insérer ou supprimer une ligne du tableau
  • Insert row above : insère une ligne au-dessus de la ligne courante
  • Insert row below : insère une ligne sous la ligne courante
  • Delete row : supprime la ligne courante
Apps - Text Editor - Table - Column icon.png Insérer ou supprimer une colonne du tableau
  • Insert column before : insère une colonne à gauche de la colonne courante
  • Insert column after : insère une colonne à droite de la colonne courante
  • Delete column : supprime la colonne courante
Apps - Text Editor - Table - Delete icon.png Supprimer le tableau
Apps - Text Editor - Table - Cell icon.png Diviser et fusionner des cellules
  • Horizontal split : divise la cellule courante en 2 lignes
  • Vertical split : divise la cellule courante en 2 colonnes
  • Merge cells : fusionne les cellules sélectionnées
Apps - Text Editor - Table - Style icon.png Définir la mise en page du tableau Apps - Text Editor - Table - Style detail.png

Gestion des liens hypertextes

Apps - Text Editor - Hyperlink icon.png  Insérer un lien hypertexte

Un lien peut pointer vers une page web, une autre application, une page de l'application courante, un document d'un site, la messagerie.
         Apps - Text Editor - Hyperlink detail.png

Procédure : Comment insérer un lien hypertexte

1. Copiez-collez l'adresse du lien dans la zone URL.

Note : Vous pouvez également le sélectionner via la liste Apps - Text Editor - Image - Hyperlink Select icon.png.

2. Renseignez le texte cliquable du lien dans la zone Text.

Notes : Si aucun texte n'est sélectionné, le lien est inséré sous la forme de l'URL ou de l'adresse e-mail. Pour insérer le lien sur une image, positionnez auparavant le curseur sur celle-ci.

3. Cochez la case Open in a new tab pour ouvrir le lien dans un nouvel onglet/nouvelle fenêtre ou décochez-la pour l'ouvrir dans l'onglet courant/la fenêtre courante (en remplacement de la page courante).

4. Cliquez sur Insert.

5. Utilisez les nouvelles icônes pour modifier les propriétés du lien.

         Apps - Text Editor - Image - Hyperlink toolbar.png  : Ouvrir le lien / Modifier le lien / Supprimer le lien

Créer un lien vers une autre application

1. Revenez sur la galerie. Cliquez sur Apps - Application properties icon.png en regard de l'application souhaitée.

3. Copiez l'URL de lancement de l'application.

4. Revenez sur votre application et ouvrez l'éditeur de texte.

5. Cliquez sur Apps - Text Editor - Hyperlink icon.png et collez l'URL de lancement de l'application dans la zone URL.

Créer un lien vers une autre page de l'application
1. Utilisez les tags avancés Page via Apps - Text Editor - Advanced tags icon.png

Créer un lien vers la messagerie

1. Faites précéder le lien de l'instruction mailto.

2. Indiquez l'adresse e-mail du destinataire.

3. Renseignez le sujet et l'objet du message.

Note : N'insérez pas d'espace dans l'instruction.

         Example documentation icon FR.png

mailto:recipient_name@gmail.com?subject=Your incident I20161106&cc=recipient1_name@gmail.com
&ccc=recipient2_name@gmail.com&body=Your incident has been solved

Modification des propriétés d'un lien hypertexte

Cliquez sur le lien : une barre d'outils contextuelle est affichée.

Apps - Text Editor - Hyperlink toolbar.png

Apps - Text Editor - Hyperlink - Open icon.png Tester l'ouverture du lien, en appliquant l'option de la case Open in a new tab
Apps - Text Editor - Hyperlink - Style icon.png Sélectionner le style du lien hypertexte :
  • Green : affichage de couleur verte ou bleue
  • Thick : affichage en caractères gras ou normaux
Apps - Text Editor - Hyperlink - Edit icon.png Modifier les propriétés du lien hypertexte - Open url.png voir Description ci-dessus Apps - Text Editor - Hyperlink detail.png
Apps - Text Editor - Hyperlink - Unlink icon.png Supprimer le lien hypertexte

 

Gestion des images

Apps - Text Editor - Image icon.png  Insérer une image : Insère une image de la bibliothèque.

Procédure : comment insérer une image

1. Cliquez sur Apps - Text Editor - Image icon.png.

2. Sélectionnez l'image.

3. Cliquez sur Close.

Modification des propriétés d'une image affichée dans l'éditeur de texte

Note : Uniquement pour les images téléchargées manuellement dans la bibliothèque.

Cliquez sur l'image : Une barre d'outils contextuelle est affichée.
 

Apps - Text Editor - Image contextual toolbar.png

Apps - Text Editor - Image - Replace icon.png Remplacer l'image courante - Open url.png voir Description des icônes ci-dessous Apps - Text Editor - Image toolbar.png
Apps - Text Editor - Image - Delete icon.png Supprimer l'affichage de l'image. Note : Seul le widget courant est impacté. L'image reste disponible dans l'application et est toujours affichée sur les autres widgets.
Apps - Text Editor - Image - Style icon.png Définir la mise en page de l'image Apps - Text Editor - Image - Style detail.png

Apps - Text Editor - Image toolbar.png

Apps - Text Editor - Image - Back icon.png Annuler le remplacement de l'image et revenir sur la barre d'outils contextuelle précédente
Apps - Text Editor - Image - Select via Upload icon.png Sélectionner la nouvelle image depuis l'explorateur de fichiers :
  • soit cliquez sur le cadre Drop image et sélectionnez celle souhaitée via l'explorateur de fichiers ;
  • soit glissez l'image depuis l'explorateur vers le cadre Drop image.
Apps - Text Editor - Image - Select via Hyperlink icon.png Sélectionner la nouvelle image depuis Internet. Dans la nouvelle fenêtre :
  • copiez-collez l'URL de l'image dans la zone http: ;
  • cliquez sur [ REPLACE ].
Apps - Text Editor - Image - Select via Hyperlink detail.png
Apps - Text Editor - Image - Select via Browse icon.png Sélectionner la nouvelle image parmi celles déjà présentes dans l'application.
  • Survolez l'image souhaitée et cliquez sur Apps - Text Editor - Image - Select via Browse Add icon.png pour l'insérer.
  • Note : Vous pouvez également supprimer une image, via Apps - Text Editor - Image - Select via Browse Delete icon.png. Attention : La suppression s'applique sur tous les widgets utilisant l'image.
Apps - Text Editor - Image - Select via Browse detail.png

Best Practice icon.png  Pour connaître le nom d'une image, ouvrez l'éditeur de code Html via Apps - Text Editor - Html Editor icon.png et repérez son nom dans la balise <img>, attribut src.
Example documentation icon FR.png  Apps - Text Editor - Image - Example name.png

Images de fond (Background images)

Apps - Text Editor - Background image icon.png  Background image : Définit les propriétés graphiques de l'arrière plan.

Procédure : Comment définir les propriétés de l'arrière plan

1. Cliquez sur Apps - Select image icon.png.

2. Sélectionnez l'image souhaitée dans la bibliothèque d'images.

3. Cliquez sur Close.

4. Définissez les propriétés de l'image et de l'arrière-plan.

  • La couleur de fond est appliquée uniquement si une image est sélectionnée.
     

Suppression de l'image

  • Cliquez sur Apps - Delete icon.png.

Propriétés de l'arrière plan

BackgroundImageProperties

Repeat : Définit la façon dont l'image est répétée dans la zone dédiée à l'arrière-plan.

no-repeat repeat repeat-x repeat-y

Aucune répétition de l'image

Image - Repeat property - No Repeat.png

Répétition horizontalement et verticalement

Image - Repeat property - Repeat.png

Répétition horizontalement

Image - Repeat property - Repeat x.png

Répétition verticalement

Image - Repeat property - Repeat y.png

L'image est répétée autant de fois que nécessaire pour recouvrir la zone. La dernière image est rognée si nécessaire.

Size : Définit la taille de l'image.

Initial size Scale to fit Scale to cover

Taille originale

Image - Size property - Initial.png

Image agrandie pour s'ajuster à la hauteur de la zone dédiée à l'arrière-plan, tout en conservant ses proportions hauteur/largeur

Image - Size property - Scale to fit.png

Image agrandie en largeur et en hauteur pour recouvrir entièrement la zone dédiée à l'arrière-plan. Note : Une partie de l'image peut être masquée.

Image - Size property - Scale to cover.png

Position (H/V) : Définit la position de l'image dans la zone dédiée à l'arrière plan.

  • La première valeur indique le positionnement horizontal de l'image dans la zone : par rapport au bord gauche (left), au bord droit (right) ou au centre (center).
  • La seconde valeur indique le positionnement vertical de l'image dans la zone : par rapport au haut (top), au bas (bottom) ou au centre (center).
  • Si l'image est répétée sur toute la surface (Repeat = repeat), la propriété Position provoque simplement un décalage du motif.

Background Color : Définit la couleur de l'arrière plan de l'image.

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

Animations au survol / toucher d'une zone (Hover)

Apps - Text Editor - Hover Touch toolbar.png  Code Html standard / Au survol / Au toucher : Ajoute des animations lors du survol d'une zone avec la souris ou lors du passage d'un doigt sur la zone pour les appareils ne supportant pas la souris.

ExampleHover

Example documentation icon FR.png  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

EndExampleHover

Code Html

Apps - Text Editor - Example hover Off - Code Html.png

Apps - Text Editor - Hover - Main Html icon.png - [ Main Html ]

Apps - Text Editor - Example hover On - Code Html.png

Apps - Text Editor - Hover - Hover Html icon.png - [ Hover Html ]

Remarques

  • La fonctionnalité est disponible via l'activation des propriétés Enable Html Hover et Enable Html For Touch Devices sur les widgets permettant l'accès à l'éditeur de texte (via une propriété Html Code) et sur les modes Mosaïque (Tile) et Liste (Line) d'un widget Data Viewer.
  • Lorsque ces propriétés sont activées, une barre d'outils dédiée est affichée.
    • Apps - Text Editor - Hover toolbar - Hover On.png : Permet de définir le contenu standard et le contenu lorsque la zone est survolée avec la souris.
       
    • Apps - Text Editor - Hover toolbar - Touch devices On.png : Permet de définir le contenu standard et le contenu au passage d'un doigt sur la zone.

Procédure : Comment mettre en oeuvre les animations

Étape 1 : Sélection des animations du widget

1. Allez sur le widget supportant les animations lors du survol de la souris.

2. Cochez les propriétés souhaitées pour les mettre en oeuvre.
 

Étape 2 : Définition du contenu des animations

1. Ouvrez l'éditeur de texte via Apps - Edit Html icon.png depuis la propriété Html Code du widget.
L'éditeur est ouvert en mode standard : icône Apps - Text Editor - Hover - Main Html icon.png active et mention [ Main Html ] à droite de la barre d'outils.

2. Définissez le contenu affiché lorsque l'animation est inactive.

  • La propriété Enable Html Hover est active (contenu de la zone lorsqu'elle est survolée avec la souris) : cliquez sur Apps - Text Editor - Hover - Hover Html icon.png.
    La mention [ Hover Html ] est affichée à droite de la barre d'outils.
  • La propriété Enable Html For Touch Devices est active (contenu affiché lors du passage d'un doigt sur la zone : cliquez sur Apps - Text Editor - Hover - On touch icon.png.
    La mention [ Touch Html ] est affichée à droite de la barre d'outils.

3. Cliquez sur OK.
L'éditeur de texte est fermé.
 

Étape 3 (optionnelle) : Sélection de l'animation au survol de la souris

Note : Uniquement si la propriété Enable Html Hover du widget est activé.

1. Cliquez sur le bouton situé sous la propriété Choose Hover Transition.

2. Sélectionnez le type d'animation via l'éditeur dédié.

Gestion des tags avancés

Apps - Text Editor - Advanced tags icon.png  Gestion des tags : Les tags sont regroupés dans plusieurs catégories disponibles en fonction du contexte.

    Open url.png voir Description

         Apps - Text Editor - Advanced tags detail.png

  • Tag Page : Ouvre une page de l'application depuis un lien hypertexte ou un bouton d'action.
  • Tag Data Picker : Insère des valeurs d'un datasource (valeur d'une colonne ou d'une cellule, résultat d'un calcul statistique).
  • Tags EasyVista
    • Document Upload : Insère un bouton d'action pour télécharger des documents.
    • New Request : Insère un bouton de commande pour générer une nouvelle demande (service / changement) sans ouvrir Product name - ev itsm.png. Le questionnaire associé est ouvert automatiquement.
    • Embed Questionnaire : Insère 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.
    • Status Notification : Affiche un bandeau vert de notification indiquant le statut de la demande créée.
    • Star Rating : Affiche les étoiles de notation sur les articles de la base de connaissance.
Tags:
Modifié par Utilisateur inconnu le 2019/07/09 12:36
Créé par Administrator XWiki le 2014/09/02 11:34

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020