Récemment, j’ai proposé à une association de moderniser leur manière de réaliser leur commande groupée : fin des formulaires papiers à remplir et à déposer dans une boîte aux lettres pour passer à la dématérialisation.
L’objectif est d’obtenir, à la fin, un fichier de type excel avec l’ensemble des éléments à commander afin de le fournir au commerçant, tout en ayant un coût nul.
En plus de ce fichier, contenant l’ensemble de la commande, je souhaiterais envoyer un récapitulatif à la personne ainsi que le montant de sa commande afin de limiter les erreurs de paiement (qui se fera toujours par chèque).
Faire un formulaire gratuit, avec google forms, c’est très facile : je peux faire rapidement un bon de commande avec des tableaux et des boutons radios.
Forms peut également envoyer un e-mail avec le récapitulatif des réponses, c’est parti.
Pour le formulaire, je choisis :
C’est bien mais je ne peux pas personnaliser le contenu du récapitulatif ou calculer le montant de la commande.
En fouillant, on trouve plusieurs extensions pour google forms permettant de gérer des bons de commande, certains directement avec paiement en ligne. Malheureusement, ces extensions sont lourdes à utiliser, peu intuitives et surtout…payantes.
En dehors de google forms, un bon de commande gratuit avec une réponse personnalisée, impossible à trouver.
Il n’y aurait donc pas de solution ?
En fait si : avec google scripts, il est possible de personnaliser l’usage de l’ensemble des outils de la suite google.
Dans tous les outils de la suite google, il est possible de développer ses propres scripts pour étendre les capacités des outils originaux. Ces scripts sont écrits en Javascript et exploitent la puissante API de google :
Pour accéder aux scripts, cliquer sur les 3 points verticaux -> éditeur de scripts
L’écran qui s’affiche est celui de l’éditeur de fonction. A partir de cet écran, vous pouvez éxecuter une fonction et consulter toutes les exécutions. L’éditeur propose la coloration syntaxique et l’autocomplétion. Même sans typescript, il devine les types et propose les bonnes méthodes.
Sur la gauche, vous avez accès au paramétrage des déclencheurs, à la liste des executions…
L’algorithme que j’ai en tête est le suivant :
La documentation nous explique comment manipuler un formulaire :
let form = FormApp.openById('mon_identifiant_de_form'); // Ouvre un formulaire à partir de l'id
let lastResponse = form.getResponses()[form.getResponses().length-1]; // Dernière reponse
Pour trouver votre id, il est dans l’url du formulaire :
A partir de la réponse, on peut ensuite parcourir l’ensemble des questions avec :
getItem().getTitle()
getItem().getType()
Une enum permet de tester facilement le type de question :
getItem().asGridItem().getRows()
Attention : il n’y a pas de champ commentaire permettant d’enrichir le formulaire. Si l’on souhaite des infos supplémentaires, il faut les extraire du formulaire. Pour ma part, je l’extrais directement du titre de la réponse en respectant toujours le même format : ‘Produit ABC - 25€’.
const cost = parseFloat(title.split(' - ')[1].replace('€',''));
Pour calculer le coût de la commande, on va parcourir les questions de type GRID et faire le calcul :
function computeTotalAmount(lastResponse){
let total = 0;
lastResponse.getItemResponses().forEach(ir=>{ // Parcours de toutes les questions
if(ir.getItem().getType() == FormApp.ItemType.GRID){ // getItem renvoie le détail de la question
let costs = ir.getItem().asGridItem().getRows().map(value=>parseFloat(value.split(' - ')[1].replace('€','')))
ir.getResponse().forEach((val,pos)=>total+=costs[pos]*val) // Calcul à partir des réponses à la question
}
})
return total.toFixed(2); // On garde deux décimales au prix
}
Le mail est envoyé à partir de la boîte de du compte de l’utilisateur. L’avantage est que chaque mail envoyé se retrouve dans les messages envoyés : une sorte d’accusé qu’un mail a bien été envoyé.
La documentation détaille plusieurs méthodes dont une pour envoyer du HTML et personnaliser le mail comme le nom de l’expéditeur, le noReply :
const messageHtml = `Un message avec mise en forme.<br/> Montant <b>${total}€</b> à l'ordre de <b>moi</b>.`
+ `<br/>Vous pouvez modifier votre commande avec <a href="${lastResponse.getEditResponseUrl()}">ce lien</a>. <br/>${formatRecap(recap)}.<br/><br/>L'équipe Talan Labs.<br/><a href="https://blog.talanlabs.com/">Notre blog</a>`
MailApp.sendEmail(lastResponse.getRespondentEmail(),'Confirmation de commande',message,{name:'Mon nom',noReply:true,htmlBody:messageHtml})
Vous le voyez, il est également possible d’obtenir le lien de modification du formulaire, permettant de corriger sa commande.
Cet exemple donnera :
La dernière étape consiste à connecter notre formulaire à notre script avec un déclencheur. L’ajout d’un déclencheur se fait dans le menu de gauche “Déclencheurs -> Ajouter un déclencheur”.
Vous devez ensuite choisir la fonction à appeler et le type de déclencheur (ouverture formulaire, envoi formulaire, horaire…) Dans mon exemple, j’ai choisi le déclencheur formulaire / lors de l’envoi du formulaire.
Ce n’est parce qu’on développe un script qui devrait peu évoluer qu’il faut oublier les bases :
