# Exemple de modèle

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

<figure><img src="https://3472943295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0fOFvaYAGyPcoVZsr1BX%2Fuploads%2FMxRlYdcYEszUCoD5mXIW%2Ffinal_result.png?alt=media&#x26;token=ea666a78-38fa-462c-ac2f-c50ba48fbbca" alt=""><figcaption></figcaption></figure>

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

{% stepper %}
{% step %}

### Créer le modèle

Allez dans **Configuration > Notifications > Modèles de notification**.
{% endstep %}

{% step %}

### Ajouter un modèle

Cliquez sur le bouton **Ajouter**.
{% endstep %}

{% step %}

### 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*
  {% endstep %}

{% step %}

### Enregistrer

Enregistrez pour être redirigé vers la traduction du modèle.
{% endstep %}
{% endstepper %}

***

## 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*

{% hint style="info" %}

* `##ticket.action##` : action qui a déclenché la notification
* `##ticket.title##` : titre du ticket
  {% endhint %}

- **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** :

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

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

{% hint style="info" %}

* `##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
  {% endhint %}

***

## 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** :

```none
##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##
```

{% hint style="info" %}

* `##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
  {% endhint %}

***

## 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.

{% stepper %}
{% step %}

### Mettre en gras

1. Sélectionnez du texte : *par exemple* `##ticket.authors##`
2. Cliquez sur le bouton **Gras**
   {% endstep %}

{% step %}

### 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**
   {% endstep %}

{% step %}

### 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**
   {% endstep %}

{% step %}

### 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...**
   {% endstep %}

{% step %}

### 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

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

6. **Clic droit** sur le tableau > **Propriétés du tableau**
7. Dans **Avancé**, cliquez sur le champ **Couleur de fond** pour sélectionner **Bleu Foncé**
8. Cliquez sur le bouton **Enregistrer**
   {% endstep %}

{% step %}

### 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**
   {% endstep %}

{% step %}

### 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**
   {% endstep %}
   {% endstepper %}

***

## 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*

{% stepper %}
{% step %}

### Étape 1 — Ajouter le texte anglais

Dans la **Traduction par défaut**, nous ajoutons le texte anglais.
{% endstep %}

{% step %}

### Étape 2 — Enregistrer

N'oubliez pas d'**Enregistrer**.
{% endstep %}

{% step %}

### É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**.
{% endstep %}

{% step %}

### É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**
   {% endstep %}

{% step %}

### É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
{% endstep %}

{% step %}

### É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**.
{% endstep %}

{% step %}

### Répéter pour d'autres langues

Répétez les étapes précédentes pour toutes les langues utiles.
{% endstep %}
{% endstepper %}

***

## Aller plus loin avec HTML et CSS

{% hint style="warning" %}
Partie pour les personnes déjà familières avec le HTML et le CSS.
{% endhint %}

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"

```html
<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"

```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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.glpi-project.org/documentation/fr/modules/configuration/notifications/exemple-de-modele.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.