Exemple de modèle

Dans cet exemple, nous allons créer un modèle pour les notifications par e-mail des tickets.

Au final, ce modèle pourra être utilisé pour plusieurs événements de ticket :

• Nouveau ticket

• Ajout de suivi

• Ajout de tâche

• Résolution de ticket

• ...

---

Créer un modèle

1

Créer le modèle

Allez dans Configuration > Notifications > Modèles de notification.

2

Ajouter un modèle

Cliquez sur le bouton Ajouter.

3

Remplir les champs

Remplissez les champs :

• Nom : Tickets génériques avec chronologie par exemple

• Type : Ticket

• Commentaires : Modèle générique pour les tickets, utilisant la chronologie par exemple

• CSS : laissez vide pour l'instant

4

Enregistrer

Enregistrez pour être redirigé vers la traduction du modèle.

---

Données de base

Nous sommes maintenant en mode édition d'une traduction de modèle.

• Langue : Traduction par défaut Le minimum requis. Nous verrons plus tard comment ajouter d'autres langues.

• Objet : ##ticket.action##: ##ticket.title## "[GLPI <ticket_number>]" sera automatiquement ajouté à l'objet de l'e-mail

• ##ticket.action## : action qui a déclenché la notification

• ##ticket.title## : titre du ticket

• Corps de l'e-mail : laissez vide pour être rempli automatiquement

• Corps HTML de l'e-mail : c'est le champ que nous modifierons principalement dans les chapitres suivants

---

Cas : Nouveau ticket

Commençons par ajouter quelques données de base. Vous pouvez en ajouter d'autres en utilisant le bouton "Afficher la liste des balises disponibles" pour afficher les balises disponibles.

• Corps HTML de l'e-mail :

##ticket.action##: ##ticket.title##
##lang.ticket.status##: ##ticket.status##
##lang.ticket.url##: ##ticket.url##

##lang.ticket.description##:
##ticket.authors## - ##ticket.creationdate##
##ticket.description##

• ##lang.ticket.status## : texte "Statut" traduit automatiquement dans la langue du destinataire

• ##ticket.status## : statut du ticket

• ##lang.ticket.url## : texte "URL" traduit automatiquement

• ##ticket.url## : URL du ticket

• ##lang.ticket.description## : texte "Description du ticket" traduit automatiquement

• ##ticket.authors## : demandeurs du ticket séparés par ',' s'il y en a plus d'un

• ##ticket.creationdate## : date de création du ticket

• ##ticket.description## : texte de la description du ticket

---

Cas : Ajout de suivi, Ajout de tâche, Résolution de ticket

Les suivis, les tâches et les solutions sont des éléments de la chronologie d'un ticket, nous allons donc boucler sur "timelineitems" en utilisant FOREACHtimelineitems.

• Corps HTML de l'e-mail :

##ticket.action##: ##ticket.title##
##lang.ticket.status##: ##ticket.status##
##lang.ticket.url##: ##ticket.url##

##FOREACHtimelineitems##
 ##timelineitems.author## - ##timelineitems.date##
 ##timelineitems.description##
##ENDFOREACHtimelineitems##

##lang.ticket.description##:
##ticket.authors## - ##ticket.creationdate##
##ticket.description##

• ##FOREACHtimelineitems## : boucle sur tous les éléments de la chronologie

• ##timelineitems.author## : auteur de l'élément de la chronologie

• ##timelineitems.date## : date de l'élément de la chronologie

• ##timelineitems.description## : texte de description de l'élément de la chronologie

• ##ENDFOREACHtimelineitems## : fin de la boucle

---

Mise en page

Pour l'instant, nous n'avons récupéré que des balises mais il n'y a pas encore de mise en forme.

1

Mettre en gras

1. Sélectionnez du texte : par exemple ##ticket.authors##

2. Cliquez sur le bouton Gras

2

Lien cliquable

1. Sélectionnez le texte de l'URL : par exemple ##ticket.url##

2. Dans le menu contextuel, cliquez sur Lien...

3. Remplissez le champ URL = ##ticket.title##

4. Vous pouvez laisser les autres champs inchangés et Enregistrer

3

Ajouter des titres

1. Sélectionnez du texte : par exemple ##ticket.action##: ##ticket.title##

2. Cliquez sur la liste déroulante format et sélectionnez Titres > Titre 1

4

Ajouter un logo

1. Sans sélectionner de texte, cliquez à l'endroit où vous souhaitez placer votre image

2. Cliquez sur le bouton Insérer une image

3. Naviguez pour ajouter votre image

4. Si nécessaire, vous pouvez redimensionner via le menu clic droit > Image...

5

Ajouter un tableau

Ce tableau nous permettra d'afficher le logo à la même ligne que le titre du ticket et son URL.

1. Sans sélectionner de texte, cliquez à l'endroit où vous souhaitez placer votre tableau

2. Cliquez sur le bouton Insérer un tableau

3. Le tableau généré a 2 colonnes et 2 lignes, nous n'en voulons qu'une seule, supprimez-en une :

   • Faites un clic droit sur le tableau généré

   • Cliquez sur Ligne > Supprimer la ligne

4. Sélectionnez l'image ajoutée précédemment, pour la faire glisser dans la cellule de gauche

5. Sélectionnez le texte des balises ci-dessous, pour le faire glisser dans la cellule de droite

##ticket.action##: ##ticket.title##
##lang.ticket.status##: ##ticket.status##
##lang.ticket.url##: ##ticket.url##

1. Clic droit sur le tableau > Propriétés du tableau

2. Dans Avancé, cliquez sur le champ Couleur de fond pour sélectionner Bleu Foncé

3. Cliquez sur le bouton Enregistrer

6

Changer les couleurs

Comme le fond du tableau est sombre, nous allons écrire en blanc pour être plus lisible.

1. Sélectionnez le texte dans le tableau

2. Cliquez sur la liste déroulante Couleur du texte et sélectionnez la couleur Blanc

7

Ajouter un émoticône conditionnel

Si le ticket est en statut en attente, nous voulons afficher un emoji.

1. Ajoutez 2 balises de test : ##IFticket.storestatus=4## ##ENDIFticket.storestatus##

2. Clic droit entre les 2 balises > Émoticône

3. Ajoutez l'émoticône nommée Bouton Pause

---

Traductions

Jusqu'à présent, nous n'avons utilisé que des balises ##lang....## qui sont automatiquement traduites. Nous pourrions donc nous contenter d'une seule traduction dans la langue Traduction par défaut.

Prenons le cas où nous avons des utilisateurs qui ne comprennent qu'une seule langue (anglais, français ou espagnol). Et nous voulons ajouter un texte sous l'URL que tout le monde peut comprendre :

• If you wish to add further information, click on the previous links, or reply directly to this e-mail. English

• Si vous souhaitez ajouter des informations supplémentaires, cliquez sur les liens précédents, ou répondez directement à cet e-mail. French

• Si desea añadir más información, haga clic en los enlaces anteriores, o responda directamente a este correo electrónico. Spanish

1

Étape 1 — Ajouter le texte anglais

Dans la Traduction par défaut, nous ajoutons le texte anglais.

2

Étape 2 — Enregistrer

N'oubliez pas d'Enregistrer.

3

Étape 3 — Copier le code source

Clic droit dans le champ "Corps HTML de l'e-mail" > Code source Sélectionnez tout le code pour le copier.

4

Étape 4 — Ajouter une nouvelle traduction

1. Retournez à l'en-tête du modèle en cliquant sur la valeur Modèles de notification en haut

2. Dans l'onglet Traductions de modèles, cliquez sur le bouton Ajouter une nouvelle traduction

3. Sélectionnez Langue = Français

5

Étape 5 — Coller le code source

Clic droit dans le champ "Corps HTML de l'e-mail" > Code source Collez le code précédemment copié Enregistrez pour quitter la vue du code

6

Étape 6 — Mettre à jour les champs

Mettez à jour les champs :

• Objet = ##ticket.action##: ##ticket.title##

• Dans Corps HTML de l'e-mail, remplacez le texte anglais par le texte français

Ensuite Enregistrez.

7

Répéter pour d'autres langues

Répétez les étapes précédentes pour toutes les langues utiles.

---

Aller plus loin avec HTML et CSS

Partie pour les personnes déjà familières avec le HTML et le CSS.

Tout ce que nous avons fait dans le champ "Corps HTML de l'e-mail" est converti en code HTML que vous pouvez éditer via clic droit > Code source. Donc si vous êtes familier avec le HTML, vous pouvez éditer le code directement. Selon le cas et vos compétences, c'est parfois plus simple.

Le code suivant reprend ce que nous avons fait précédemment en séparant la mise en forme CSS du HTML et en ajoutant des couleurs aux éléments de la chronologie. Il n'est pas expliqué, c'est juste un exemple.

Code dans le champ "Corps HTML de l'e-mail"

<table class="header" border="0">
 <tbody>
  <tr>
   <td class="logo">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWVJREFUeNrsWz9PG1kQX5Ot0tyeUkf4GlqckjQ4ob0I8wliX3cVcHWkEIk2IXwC4BNAlLR3mCaULGXSxCeflCZWNk1OusaZQbOJsd+/eW92jU5vpKeFxX7vzfzmz2/eLkkSJUqUKFGiRIkSJcr/XhpVLzAej9tTt8rfBzRQ8kajUTDnbcElm7jFnkMzbxMuTcZXBrDuQMg2uZTRmzA6MHZgHMM4HfPkA3O9rmKOYwE9WmM/+YB7Yq61pdIhDfAiRHedrlmgLZrMz68r7mUCvtUJ2P8B2GUTrhuOEaPSIUm5ngmXxxNpR0oKAQALgX0sB34f0+gF2OkXh/Sp0uEydQABPW8LxqaHFxaUF88mfr66DxvOAxWfUUYAkExoDkyfDzwAGdjA6FB+5ObTPSq6VZCEpmbdrsDcn8dy0vWoVW1tVMA4YG7gVDuhMGtjKcOb29mwZKOuAcQLDx0y3UIXzIioHAgLO1ErUwPQ5O06UJocHfBvC4p6carJ0So5gXEP6kG/xt5JaXiJHkQzb9/yd6yFh0z2qNKhPwMIFSNXMA5hMxtVGcIgqzplAqUdwNxeMebU6VBcAwSbOgad7QMQvRt04iDhFD8p7uUSUeQYIZffAaFUtclQfp5gtCuivC02Db3eKIusVUbIFoOD7/ue3QgUdN0eJfajMurfAQZWplIDeNcAeczY+OEco6NVMyCuzeu65n7OKPRXOqTUwLmGXO4THbDGElzuwrhD10kZwXgH854HnHnlgZHX8q1N5PFdja0KVx1Ku6bMc6m+o4J3yZuXaNhkBb6zBtcXsLGvXEAEmF4WALTulPnIJxIRkEXGxr8YQEDvv4/GpUjgCoL4O4znzMM/Ccrb4gJN9UzXJhSG1L5sisSU0XdolYfNrRAYZQoaEShcYJY8PFmC8mYavY7J04spD8c+omOIrJ4BTNV3ziYBkehmMf+fGyKnTGErLukO5hvWTHlXNfc7Cf8ZCTbMJ74N6IJAD2ADa4THCzAwhHcdPj+cA+WVOHYvweh50PZ8EpCzujgrGXtk+Mj7OVFeiUcFzxxOL6w6pEyFVgPppa2uvPXw4kHgnpqhUUFguOzDSHlLQDgsBY+oswCaed/wt6GlF2nZlBFsCCdze65JMVi7Tpi2sDafKSoERs4ZYYvHLDueypuK+pHlu4vSDaEljfSo7knKso0llkV9nzHpps/DIGr87hiK4dDDu6qivIMKwLBS3u+A0OIDxqTHTDAQiF8NYJx7erIEIVmtiCh4sdRJ2rvNrCUHjmDcpg78dgAYdTeF4szTkFX6SkComXnJWKNLLzZkFjD+SGYPFFlgGJ5rV1lDpMXpAHNhirFsJ7zjdTSU8jVKSlMqMPDwcJcRGfOgvP0KANFR3lwLCH2gxwQFjXVAb59s0VsrWMCfKMAYEhhDCe+qkPIWNQEys/9Uo2gPjIp5dI9xrNCkz+/RQh+pK/8E4z8Yb2De157KLGo8/IJhvJwygAvQeQWALHsDUjIvUBhD92mifgBjA2faI5Zgvt+S2cPAgupJ4eHJnPzfVhCXrEaGlYnVQHp9c0/4VUvn10Cl1lXMq/q3idMq0NBsacdEexNDtGCjtA3jZ/h1g2pMVZ7EKeoccS3UderVd05ZBnCQHp/QY9qnyY9n5Wi0Wwn/fz1cQjdPwunpkWPxflWR8Yspxxqo9G54hB4a/9HUuRRS2Nf47GOKUrqAk8/h7ccbK40AILCf+AvGn5YXE6JIAkLdNp5DrdEtjAKkr5cRiBoBISAQhId0DoVp6S2A8D6arUZApoD4F1MS5flRNFfNgNAbfJie/onRcAOkqv8LjBIlSpQoUaJEiRJlvvJNgAEAqG9GVu+GoEcAAAAASUVORK5CYII="
      alt="GLPI" width="100" height="55" /></td>
   <td class="title">
    <h2><strong>##ticket.action##</strong>: ##ticket.title##</h2>
    <h4>##lang.ticket.status##: ##ticket.status## ##IFticket.storestatus=4##⏸##ENDIFticket.storestatus##</h4>
    <strong>##lang.ticket.url##</strong>: <a href="##ticket.url##">##ticket.url##</a>
   </td>
  </tr>
 </tbody>
</table>
<p>If you wish to add further information, click on the previous links, or reply directly to this e-mail.</p>
<p>##FOREACH LAST 5 timelineitems##</p>
<div class="timeline ##timelineitems.type##">
 <p class="attributes"><strong>##timelineitems.author##</strong> - ##timelineitems.date##</p>
 <p>##timelineitems.description##</p>
</div>
<p>##ENDFOREACHtimelineitems##</p>
<h4>##lang.ticket.description##:</h4>
<div class="request">
 <p class="attributes"><strong>##ticket.authors##</strong> - ##ticket.creationdate##</p>
 <p>##ticket.description##</p>
</div>

Code dans le champ "CSS"

.header {
   width: 100%;
   background-color: #2f3f64;
   color: #eeeeee;
   border: none;
}
.title {
   padding: 10px;
}
.title a {
   color: #dddddd;
}
.attributes {
   background-color: #1111;
   border-radius: 4px;
   padding: 0 5px;
}
.timeline, .request {
   padding: 5px;
   border: thin solid;
   border-radius: 4px;
}
.timeline {
   margin: 5px 15px;
   display: inline-block;
}
.ITILFollowup {
   background-color: #ececec;
   border-color: #cccccc;
}
.TicketTask {
   background-color: #ffe8b9;
   border-color: #e5c88c;
}
.ITILSolution {
   background-color: #9fd6ed;
   border-color: #90c2d8;
}
.request {
   background-color: #e2f2e3;
   border-color: #87aa8a;
}