[Résolu] Signature Pad lors de la rédaction de la solution

webmastergreg · 2021-02-10 13:37:04

Bonjour,

Je cherche à implémenter une signature directement lors de la rédaction de la solution.
Le principe est simple, je souhaites que nos techniciens puissent faire signer le client sur la solution.

J'ai choisi celui-ci parce que les pré-requis jQuery sont déjà présents dans GLPI:
https://codepen.io/rongxike/pen/MJMopq

J'utilise un plugin existant pour appeler le fichier js nécessaire via un hook

$PLUGIN_HOOKS['add_javascript']['os'] = ['front/js/sketch-sigpad.js'];

Et dans un onglet sur le ticket, ça fonctionne.

Tout le problème étant de sauvegarder l'image de la signature "data:image/png;base64" au sein même de la solution, ce qui évite de créer une table en bdd inutile. (du moins tant qu'un plugin n'est pas nécessaire)
mais si cette image est bien rendu dans l’éditeur, ce n'est pas le cas pour le code qui permet de la générer tiny_mce étant d'une part dans une iframe et de plus rajoutant des balises automatiquement.

En mode édition, à gauche le code censé fonctionner comme sur l'exemple codepen, à droite le test de rendu sous data:image/png;base64:

Alors j'ai bien sur autorisé les balise nécessaires dans le html.class.php ligne 3866

// init tinymce 
  extended_valid_elements : 'script[src|async|defer|type|charset],style,link[href|rel|type]',

Mais ça ne fonctionne pas, le code n'est pas correctement interprété car il fait parti du contenu textuel html.

Merci pour les avis , conseils et encore plus si ce sont des solutions !

Last edited by webmastergreg (2021-02-24 15:16:07)

webmastergreg · 2021-02-12 12:42:59

Vraiment personne ?

c'est pourtant une demande de fonctionnalité en attente et "à l'étude" depuis plus de 5 ans maintenant.
Voir sur le site "feature request de GLPI: https://glpi.userecho.com/fr/communitie … signatures

Dommage à l'heure de la dématérialisation

Pour info j'ai également fait une suggestion d'ajout d'un plugin Signature Pad chez Tiny-mce.
Ainsi ce serait une fonction disponible directement dans la barre d'outils de l'éditeur.

Last edited by webmastergreg (2021-02-22 13:00:09)

crzkwcz · 2021-02-16 16:05:18

Bonjour webmastergreg,

Est-ce que le but recherché est bien que vous obteniez une preuve que le client a accepté la solution ?
Si oui, est-ce que vous êtes prêt à accepter une alternative à l'insertion d'une signature manuscrite scannée ?

L'idée alternative qui se cache derrière mon propos serait dans ce cas d'activer l'approbation des solutions par le demandeur.

Qu'en pensez-vous ?

webmastergreg · 2021-02-16 16:25:51

Bonjour crzkwcz,

merci d'avoir répondu.

A savoir que depuis j'ai réussi a faire fonctionner le pad signature dans la solution mais pas encore en mode édition.

Malheureusement notre procédure actuelle est telle que ce sont nos responsables planifications qui approuvent ou pas la solution, car nous avons divers traitements et vérifications préalables avant l’approbation ou le refus.
Même si je suis tout à fait d'accord qu'à la base c'est le demandeur qui doit approuver, et dans notre cas précis les demandeurs sont en général nos planificateurs.

Mais de toute façon la signature est un impératif pour nous.

webmastergreg · 2021-02-22 13:24:08

Pour info, je progresse.

Rien à faire du côté de tinymce, il faut impérativement un plugin. Ma requête à ce sujet est acceptée en tant que feature request chez tinymce.

J'ai finalement modifié la classe itilsolution.class.php pour intégrer le signature pad.
J'ai bien conscience qu'un hook via plugin serait bien plus adapté, mais je n'ai pas assez d'expérience sur les plugins ni assez de temps à cet instant pour me lancer là-dessus.
Je me pencherais dessus une fois trouvé une solution fonctionnelle temporaire.

Le drag'n drop d'image étant permis dans l’éditeur, ceci permet donc de placer la signature dans le corps du message de l'éditeur et créé par la même occasion un document ajouté dans la base des documents de façon transparente.
L'image n'est donc plus stockée en dur dans le code du message, mais par le biais d'une image via le lien vers le document.

Ce qui j'en conviens parfaitement, n'a absolument aucun intérêt sur un smartphone vu que faire un drag'n drop c'est plutôt mission impossible avec les menus contextuels par appui long.

Reste donc à placer un bouton de validation jquery qui permettra d'envoyer l'image sur un id défini à l'emplacement qui convient dans le corps du message.

Aide bienvenue, merci.

webmastergreg · 2021-02-24 13:15:02

Bonjour,
je termine mon monologue

J'ai finalement réussi.

La difficulté était d'atteindre le contenu de la iframe de tinymce, pour appliquer le résultat de la signature sur l'id de l'image qui sert d'emplacement d'affichage dans le contenu de la solution, donc affecter le contenu source src au src cible.

J'ai donc utilisé une regex sous jquery pour atteindre l'ID en question dans l'iframe de l’éditeur et intégré le

.attr('src', Data);

dans la librairie du signature pad.

Petit Bilan

Avantages:

pas besoin de plugin GLPI (bien que soit ma prochaine étape)
pas besoin de plugin tinymce (même si j'en ai fait la demande en feature request)
changement de libraire de signature facile si besoin
signature stocké en dur dans la solution
facile à maintenir en cas de maj de GLPI

Inconvénients:

c'est un hack, donc à réappliquer à chaque maj de GLPI
ce n'est pas un plugin, donc sujet aux éventuelles modifications du fichier modifié

Last edited by webmastergreg (2021-05-07 17:01:04)

Atook75 · 2021-10-19 16:04:27

j'aimerai le faire , je suis en version 9.3

Loiseau2nuit · 2023-09-16 15:06:57

Salut @webmastergreg

Je ne sais pas où tu en es dans tes travaux, mais ici, on est intérressé.

L'idée, pour nous, est de faire signer des mises à disposition de matériel, lesquels font l'objet de tickets, avec un suivi envoyé au bénéficiaire, lui communiquant les conditions de mise à dispo.

En gros, l'idée, serait effectivement de pouvoir lui faire signer le suivi en question (ou la résolution, ou la tâche ...)

On a commencé à dev un truc dans notre coin mais sans grande concrétisation pour l'heure

Donc si tu as un repo git où on peut récupérer ton code et beta-tester, voir proposer des PR/MR, on sera ravi de t'aider à faire avancer ce sujet là :-)

Déjà, pour moi, au sein même d'une demande, plusieurs éléments peuvent faire l'objet d'un besoin de signature :
- je te mets à dispo un matos, et je t'envois un suivi pour te dire ce que ca implique
- j'envoi une tâche à un presta pour une intervention, tu me signes le compte rendu
- t'es chef de service, j'ai besoin que tu me valides la demande de ton agent ...
- ...

Le potentiel d'intégrer ça direct à TinyMCE est énorme en fait :
- j'ai un site wordpress ou autre, sur lequel on poste des éléments tels que 'charte informatique' ou whatever, et je veux que tu signes pour attester la lecture ...

En vrai, on est chaud pour aider et tester ! :-)

webmastergreg · 2023-09-18 12:09:06

Salut @Loiseau2nuit
Depuis ça fonctionne bien
J'ai adapté le code pour GLPI 10.0.7, j'ai dû déplacer une partie car depuis, la structure est passé sous template twig (form_solution.html.twig).
J'ai déjà fait une demande auprès de TinyMCE, c'est dans leur to-do list, mais resté lettre morte. Ceci-dit même sil ils intégraient une solution, je doute que celle-ci cadre avec la structure et les besoins très spécifiques de glpi.

En réalité j'ai un plugin qui me permet plusieurs choses, un rapport d'intervention maison et le chargement d'une librairie javascript pour signer.
Plus l'appel du pad de signature et une regex form_solution.html.twig, qui permet d'insérer la signature du pad, dans le tag dédié de la template qui est au sein de l'iframe TinyMCE.

Donc dans le principe voici le fonctionnement actuel:

Ajout d'une solution
Choix d'une catégorie avec assignation de template (une partie du code nécessaire est donc dans cette template de solution donc "form_solution.html.twig")
Un Clic sur le champs signature fait apparaitre la popup du script qui permet de signer.
On signe puis on accepte la signature réalisée (ou pas).
Enfin on clic sur ajouter. Ce qui sauvegarde la solution complète y compris la signature en base64 dans la bdd.
On alors la signature disponible partout ou l'on demande l'affichage de la solution, mail rapport externe, etc.

Je vais essayer de mettre à disposition quelques chose, asap. Mais ça ne dépend pas que de moi...

Last edited by webmastergreg (2023-09-18 12:30:53)

Loiseau2nuit · 2023-09-18 13:30:34

Super nouvelle ! Ravi de voir que ça a évolué !
Et effectivement, au vu des captures, ça semble tenir la route !

Est-ce que c'est figé sur le seul objet 'solution' ou bien est-ce facilement adaptable à
- un suivi ?
- une task ?
- une demande de validation ?

En tout cas, merci d'avoir pris le temps de répondre et donner des news du projet :-)

webmastergreg · 2023-09-18 13:58:29

Le système d’ajout étant commun à Tâche, Solution, Suivi, tant que l'on peut paramétrer une template (Les Gabarits dans Intitulés > Assistance) pour qu'elle inclus le tag de recèption de la signature, alors oui.
Pour les validations, je ne sais pas si il y a moyen, je n'ai pas regardé, ça doit être possible en modifiant le texte par défaut du commentaire de validation de la template twig des validations.

Last edited by webmastergreg (2023-09-18 14:06:08)

Fabrice br · 2023-10-25 08:26:22

Bonjour webmastergreg
Je cherche a mettre en place également une signature par le client dans le formulaire de solution.
Mais je ne trouve pas de plugin qui va dans ce sens.
Félicitation pour votre travail de codage, pourriez vous me donner des pistes pour la mise place d'une telle solution sur la dernière version GLPI 10.0.10 ?
Merci beaucoup

webmastergreg · 2023-10-25 09:00:53

Je ne suis pas encre passé sous la 10.0.10, je pense qu'il n'y aura pas de problème de compatibilité, mais il faut que je teste, j'ai cru voir dans le changelog que les permissions du contenu de l'éditeur sont maintenant un peu plus souples pour le rich content.
Il n'y a en effet pas de plugin, c'est pourquoi j'ai mis en place tout cela.

Fabrice br · 2023-10-26 08:02:42

Bonjour webmastergreg
J'ai monté un glpi en 10.0.10, serait il possible que je puisse tester votre code ?
Merci beaucoup

Loiseau2nuit · 2024-08-27 16:17:42

Hello @webmastergreg

Des nouvelles d'une possible mise à dispo / en plugin ?

Toujours OK pour beta tester si besoin (on est en Glpi 10.0.16, à date)

Belle journée

Forum GLPI-Project

Announcement

#1 2021-02-10 13:37:04

[Résolu] Signature Pad lors de la rédaction de la solution

#2 2021-02-12 12:42:59

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#3 2021-02-16 16:05:18

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#4 2021-02-16 16:25:51

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#5 2021-02-22 13:24:08

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#6 2021-02-24 13:15:02

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#7 2021-10-19 16:04:27

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#8 2023-09-16 15:06:57

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#9 2023-09-18 12:09:06

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#10 2023-09-18 13:30:34

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#11 2023-09-18 13:58:29

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#12 2023-10-25 08:26:22

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#13 2023-10-25 09:00:53

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#14 2023-10-26 08:02:42

Re: [Résolu] Signature Pad lors de la rédaction de la solution

#15 2024-08-27 16:17:42

Re: [Résolu] Signature Pad lors de la rédaction de la solution

Board footer