1

Topic: Mise en forme d un ticket

Bonjour à tous, je suis informaticien dans une collectivité territoriale et j utilise glpi tous les jours mais un détail me chiffonne. La réponse aux incident par mail est compliqué à lire pour les utilisateurs. Y a t il un moyen de rendre cela plus lisible? Par avance merci de votre aide. Cordialement

2

Re: Mise en forme d un ticket

tu peux la modifier dans les modèles de notifications (cf la doc)

3 (edited by micter59 2013-11-28 14:00:43)

Re: Mise en forme d un ticket

Salut !

Je me suis aperçu que les utilisateurs de mon service ne lisaient pas les mails GLPI non plus, et finissaient par me demander des nouvelles ! Du coup j'ai fait des modèles, et les gens les lisent beaucoup plus. J'ai viré certaines informations qui n'intéressaient pas les gens, mis un peu de couleur, des icônes (elles viennent du projet tango si je ne me trompe pas, ou alors d'un paquet distribué par un certain Faenza), et un lien sur le titre pour aller voir le détail sur GLPI.

Voilà à quoi ça ressemble : http://cjoint.com/?CKCm4b5MY5y

Si ça t'intéresse, n'hésite pas, je peux partager mon travail. Bien sûr, les noms des différents personnes apparaissent dans les notifications. J'ai juste flouté pour des questions de confidentialité.

@+ !


Michaël

---

Michaël

4

Re: Mise en forme d un ticket

Merci pour vos réponses.

@Mickael Je trouve très bien la façon dont tu as fait ton modèle mais question bête, de quelle manière a tu créer ton modèle? Confguration-Notifications-modèle de notifications mais après je cale.
Par avance merci de votre aide.

Cordialement

5

Re: Mise en forme d un ticket

Effectivement, c'est à cet endroit là. Ensuite, c'est le "+" à côté du fil d'ariane en haut (juste sous le menu principale). Tu mets un titre, le type "Ticket" et après la partie css. Une fois le modèle créé, quand tu retournes dessus, tu as "Ajouter une nouvelle traduction" qui apparaît. C'est là que tu auras la possibilité d'ajouter le message (au format brut et au format HTML). J'ai fait afficher la source dans l'éditeur, et j'ai copié mon code html. Ensuite, faudra juste penser à associer l'évènement "Ajout de suivi" ou "Clôture d'un ticket" au modèle que tu viens de créer.

Le plus simple, je trouve, c'est de créer d'abord le modèle avec un éditeur HTML, en laissant surtout les tags pour que GLPI puisse faire son boulot ensuite. Tu bosses tranquille, tu fais ce que tu veux, et quand tout est ok dans le navigateur, tu n'as plus qu'à recopier la source html vers GLPI.

---

Michaël

6

Re: Mise en forme d un ticket

Salut Mickael,ul

Je suis un peu nul en code. Je le récupère comment ce code?

Merci d'avance

7

Re: Mise en forme d un ticket

Je viendrais le poster ici en début de semaine prochaine. Je ne suis pas au boulot aujourd'hui :-D

---

Michaël

8

Re: Mise en forme d un ticket

Alors, j'ai pris mon modèle de fermeture de ticket, il résume pas mal l'idée je pense. Pour les puristes du développement, toutes mes excuses, le code n'est peut-être pas idéal, mais le résultat me va. Jamais eu de cours de programmation html/css/php, j'ai juste appris par moi-même à une époque où j'étais encore chimiste :-D
Petite remarque : il faut bien évidemment mettres les images qui vont bien sur le serveur, et modifier les chemins d'accès  vers le serveur. Mais c'est pour l'exemple que je post. Voilà la partie css :

div.global {
    width: 600px;
    font-family: "Georgia", "Times New Roman";
    font-size: 14px;
    border: 2px solid #2d7110;
    border-bottom: 0px;
    border-radius: 20px;
    padding: 0;
    margin: 0 auto;
}

div.entete {
    margin-top: 10px;
}

div.titrePrincipal {
    margin-left: 130px;
    margin-right: 5px;
    text-align: center;
}

div.infoPrincipale {
    margin-top: -10px;
    margin-left: 5px;
    font-size: 16px;
    color: #000000;
}

div.infoCentre {
    color: #ffffff;
    background-color: #2d7110;
    background: url("http://serveurGLPI/glpi/pics/mails/mails-rectangle-centre.png") no-repeat left top;
    padding: 15px 0px;
}

div.infoCentre div.legende {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    text-decoration: underline;
    margin: 0px 10px;
}

div.infoCentre p {
    color: #ffffff;
    font-size: 18px;
    margin: 0px 10px 0px 0px;
}

div.spacer {
    clear: both;
}

div.solution, div.pasDeSolution {
    margin: 10px 10px 10px 10px;
}

div.solution div {
    border: 0px;
    border-left: 3px solid #3366cc;
    margin-left: 70px;
    padding-left: 10px;
    color: #3366bb;
    font-size: 16px;
}

div.pasDeSolution div {
    border: 0px;
    border-left: 3px solid #c6250d;
    margin-left: 70px;
    padding-left: 10px;
    color: #c6250d;
    font-size: 16px;
}

div.autresInfos {
    margin: 10px 0px 20px 0px;
}

div.autresInfos div.legende {
    font-size: 16px;
    font-weight: bold;
    color: #2d7110;
    margin: 5px 10px;
}

div.autresInfos div.contenu {
    color: #444444;
    margin: 5px 10px;
}

div.piedPage {
    height: 30px;
    color: #ffffff;
    background: #98c761 url("http://serveurGLPI/glpi/pics/mails/mails-pied-page.png") repeat-x left bottom;
    padding: 0px;
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
    border-bottom: 2px solid #2d7110;
    text-align: center;
}

div.piedPage div.infos {
    padding: 5px 10px 0px 10px;
}

div.suivis {
    margin-top: 15px;
    margin-bottom: -5px;
}

div.suivi {
    margin-bottom: 5px;
}

div.suivi div {
    border: 1px solid #888888;
    background-color: #eeeeee;
    margin: 5px 10px 5px 80px;
    color: #555555;
    padding: 10px;
    border-radius: 5px;
}

div.nbSuivis {
    text-align: center;
    color: #777777;
}

table.invisible {
    width: 100%;
    border: 0px;
}

table.invisible td {
    vertical-align: top;
}

img.logo {
    width: 125px;
    height: 60px;
    float: left;
    border: none;
    margin: 10px;
}

img.traitHorizontal {
    height: 1px;
    width: 100%;
    margin: 2px 0px;
}

img.solution, img.pasDeSolution {
    width: 64px;
    height: 64px;
    float: left;
}

img.suivi {
    float: left;
    width: 64px;
    height: 64px;
    margin-left: 10px;
}

h2 a {
    text-decoration: none;
    font-weight: bold;
    color: #2d7110;
}

h2 {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
}

div.suivi h2 {
    color: #555555;
    font-weight: bold;
    font-size: 16px;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

div.piedPage a {
    color: #ffffff;
    text-decoration: none;
}

div.piedPage a:hover {
    text-decoration: underline;
}

span.legende {
    text-decoration: underline;
    font-weight: bold;
    color: #888888;
}

Et la partie html :

<div class="global"><!-- Entete du mail avec le logo GLPI, le nom du ticket, l'auteur et la date -->
<div class="entete"><a href="http://serveurGLPI/glpi"> <img class="logo" src="http://serveurGLPI/glpi/pics/mails/mails-logo-glpi.png" alt="" /></a>
<div class="titrePrincipal">
<h2><a href="##ticket.url##">Ticket clôturé : ##ticket.title##</a></h2>
<div class="infoPrincipale">Clôturé le ##ticket.closedate## ##IFticket.assigntousers##, par ##ticket.assigntousers## ##ENDIFticket.assigntousers## <br /> Ouvert le ##ticket.creationdate## ##IFticket.authors##, par ##ticket.authors## ##ENDIFticket.authors##</div>
</div>
<div class="spacer"> </div>
<!-- Partie centrale du mail, avec le bandeau vert --> <img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" />
<div class="infoCentre">
<table class="invisible">
<tbody>
<tr>
<td width="150px">
<div class="legende">Description :</div>
</td>
<td>
<p>##ticket.content##</p>
</td>
</tr>
</tbody>
</table>
</div>
<img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" /> <!-- Si le ticket est résolu -->##IFticket.solution.type=Fermé (résolu)## ##IFticket.solution.description##
<div class="solution"><img class="solution" src="http://serveurGLPI/glpi/pics/mails/mails-solution.png" alt="" />
<div><span style="text-decoration: underline;"><strong>Solution :</strong></span> ##ticket.solution.description##</div>
</div>
<img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" /> ##ENDIFticket.solution.description## ##ENDIFticket.solution.type## <!-- Si le ticket est fermé non résolu -->##ELSEticket.solution.type## ##IFticket.solution.description##
<div class="pasDeSolution"><img class="pasDeSolution" src="http://serveurGLPI/glpi/pics/mails/mails-nonresolved.png" alt="" />
<div><span style="text-decoration: underline;"><strong>Message de clôture :</strong></span> ##ticket.solution.description##</div>
</div>
<img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" /> ##ENDIFticket.solution.description## ##ENDELSEticket.solution.type## <!-- Suivis -->
<div class="suivis">##FOREACHfollowups##
<div class="suivi"><img class="suivi" src="http://serveurGLPI/glpi/pics/mails/mails-suivi.png" alt="" />
<div>
<h2>Message de ##followup.author##, le ##followup.date##:</h2>
##followup.description##</div>
</div>
<div class="spacer"> </div>
##ENDFOREACHfollowups##</div>
<div class="nbSuivis">Nombre total de suivis : ##ticket.numberoffollowups##</div>
<img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" /> <!-- Autres informations -->
<div class="autresInfos">
<table class="invisible">
<tbody>
<tr>
<td width="200px">
<div class="legende">Catégorie :</div>
</td>
<td>
<div class="contenu">##ticket.category##</div>
</td>
</tr>
<tr>
<td>
<div class="legende">Urgence :</div>
</td>
<td>
<div class="contenu">##ticket.urgency##</div>
</td>
</tr>
<tr>
<td>
<div class="legende">Matériel concerné :</div>
</td>
<td>
<div class="contenu">##ticket.item.name##</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pied de page --> <img class="traitHorizontal" src="http://serveurGLPI/glpi/pics/mails/mails-trait-horizontal.png" alt="" />
<div class="piedPage">
<div class="infos">Ticket ###ticket.id## - <a href="##ticket.url##">Voir plus d'informations</a></div>
</div>
</div>
</div>
---

Michaël

9

Re: Mise en forme d un ticket

Cela serait sympa si tu pouvais mettre les images à dispo.  :-)

sinon super modèle !

10 (edited by micter59 2013-12-03 14:24:50)

Re: Mise en forme d un ticket

Pas de problème, voilà tout dans un paquet : http://cjoint.com/?CLdnnEVGNZ6
Ca ne pèse pas grand-chose (60 Ko zippé).

Je viens de vérifier la provenance des images (c'est important quand même). Les dégradés ont été faits par mes soins. Les icônes viennent du paquet distribué sous GLPI par Faenza sur devianArt (http://tiheum.deviantart.com/art/Faenza-Icons-173323228) et de la librairie d'icônes OSA (qui me semble sous GPL, puisque c'est un travail à partir du projet Tango) : http://www.opensecurityarchitecture.org … on-library. Donc tout est réutilisable.

Perso je ne me suis pas compliqué la vie, j'ai mis tout ça dans un sous-dossier du serveur GLPI accessible par les gens.

---

Michaël

11

Re: Mise en forme d un ticket

C'est plutôt embêtant, quand je colle le code html dans le modèle après avoir bien modifié les liens vers chaque image, GLPI modifie le chemin complet (http://serveurglpi/glpi/pics/mails/image.png) par un chemin relatif (../pics/mails/image.png).

Du coup, quand on reçoit le mail, on a pas les images car c'est un chemin relatif

:-(

12

Re: Mise en forme d un ticket

Bonjour,

J'ai installé ocs inventory et glpi dans mon entreprise une bonne synchro pour le moment mais dans un objectif d'optimisation je voudrais activer des alerts automatique pour une modification du lieux de machines, des doublons d'@ip et/mac et autres pourriez vous m'aidez sVP.

Cordialement

13

Re: Mise en forme d un ticket

ouvre un sujet. Là tu pollues un sujet qui n'a rien à voir...

14

Re: Mise en forme d un ticket

déjà fais mais personne ne repond, t'aurai pas une idée smile

15

Re: Mise en forme d un ticket

Bonjour,

Intéressant et joli par contre je pense qu'il faudrait aussi fournir les icônes pour que cela soit pleinement utilisable.

Nusa

Debian wheezy
GLPI 0.9/ OCS 2.1
Plugins : Fusion inventory ,  import Fabricants , projet. Reporting via ODBC avec Access....
110 Entités / 812 postes

16

Re: Mise en forme d un ticket

il l'a fait, il suffit de lire :-)

17

Re: Mise en forme d un ticket

Désolé, je n'avais pas rafraichi la page :-)

Nusa

Debian wheezy
GLPI 0.9/ OCS 2.1
Plugins : Fusion inventory ,  import Fabricants , projet. Reporting via ODBC avec Access....
110 Entités / 812 postes

18

Re: Mise en forme d un ticket

par contre, tu peux me dire si tu as le meme souci que moi ?

19

Re: Mise en forme d un ticket

Bizarre, je n'ai pas le problème sur mon GLPI. Je suis en 0.84.2...

Tu est sûr d'avoir mis le code dans la partie "source" dans l'éditeur ?

---

Michaël

20

Re: Mise en forme d un ticket

je suis en 0.84.3

oui j'ai mis dans source

21

Re: Mise en forme d un ticket

Très joli modèle de notification

Sismic, sur le chan irc #glpi wink

22

Re: Mise en forme d un ticket

j'ai passé le modèle avec les images en base64 mais toujours le même souci. Dans le modèle c'est OK mais quand je reçois le mail j'ai rien !

23

Re: Mise en forme d un ticket

Le problème des URL qui sont mises en relatif est décrit dans ce post-là aussi : http://www.glpi-project.org/forum/viewt … p?id=34459

Quand je regarde mon code, j'ai mis pour la source des images : http://nomduServeurGlpi/pics/SousDossierMails. En fait ce n'est pas clair, mais l'adresse http://nomDuServeur n'est pas l'adresse d'un dossier partagé, mais l'adresse web de l'application GLPI (en passant par le serveur Apache). Je ne sais pas si au niveau sécurité c'est trop bien, mais c'est le seul moyen que j'avais trouvé pour que les images s'affichent dans les mails.

---

Michaël

24

Re: Mise en forme d un ticket

j'avais vu ce post mais j'aimerais réussir en image base64 pour résoudre mon problème

25

Re: Mise en forme d un ticket

Bonjour, je suis confronte au même probleme qu Eric. mes adresses pointant sur les images se transforment en ../pics. si je transforme en base64 mes images, cela ne fonctionne pas.