Générer des Documents depuis Airtable avec une Extension de Script

Démarrer avec Airtable

Dans les processus de travail actuels, les managers doivent parfois gérer une multitude d’outils, ce qui réduit la productivité et augmente le risque d’erreurs lors du transfert de données d’un outil à un autre. Il est donc dans leur intérêt de trouver la bonne combinaison d’outils, pour un processus simple et efficace.

C’est pourquoi, dans cet article, nous allons créer un flux de travail pratique vous permettant de générer automatiquement des documents depuis votre interface Airtable, sans avoir à transférer vos données d’une application à une autre. De plus, vous utiliserez un modèle Word, facilement modifiable avec le logiciel de traitement de texte que vous connaissez déjà.

Voici les services nécessaires pour créer ce flux de travail :

1. Airtable : une plateforme de collaboration sans code permettant aux utilisateurs d’interagir simplement avec une base de données, à l’aide notamment d’une interface similaire à une feuille de calcul, de formulaires web pour la saisie, et d’interfaces de rapports et de visualisation de données conviviales en sortie.

2. DocuGenerate : une application web et une API conçues pour générer des documents à partir de modèles Word et de données JSON, en remplaçant les balises de fusion des modèles par des données dynamiques.

Cet article s’adresse principalement aux personnes ayant déjà une connaissance minimale des fonctionnalités de base d’Airtable. Nous n’entrerons pas dans le détail de ses fonctionnalités, et nous nous concentrerons uniquement sur les aspects nécessaires à la mise en place de notre processus.

Utiliser le Page Designer d’Airtable

Vous pourriez utiliser l’extension Page Designer d’Airtable pour créer votre propre modèle personnalisé pour des factures, cartes de visite, catalogues, et plus encore — en utilisant directement les données de vos enregistrements. Une fois la mise en page terminée, vous pouvez imprimer vos enregistrements ou les convertir en PDF.

Il existe quelques autres limitations à prendre en compte pour notre cas d’usage :

• Les fichiers sont générés un par un.
• Elle ne peut générer que des fichiers PDF.
• Elle ne peut pas stocker les fichiers générés dans votre base de données Airtable.

L’éditeur de mise en page de Page Designer n’est pas mauvais, mais vous ne serez jamais aussi productif qu’avec votre logiciel de traitement de texte habituel. De plus, vous devrez repartir de zéro si vous voulez créer une nouvelle mise en page dans une autre base.

Créer le Modèle Word

Étant donné les limitations de Page Designer, nous allons plutôt utiliser un modèle Word. Un modèle est un document contenant des balises de fusion, qui sont des espaces réservés destinés à être remplacés par des données dynamiques. Elles vous permettent de créer facilement des documents visuellement très similaires, mais différents selon le jeu de données utilisé pour remplir les espaces réservés.

Notre modèle est une version légèrement modifiée du modèle Certificate of Completion de la Bibliothèque de Modèles. Les principaux changements sont l’ajout d’une photo de profil pour mettre en avant notre fonctionnalité de redimensionnement d’image, et l’intégration d’une liste de compétences, pour illustrer l’utilisation des champs d’enregistrement liés d’Airtable combinés à la syntaxe de liste de DocuGenerate.

Ce modèle inclut les balises suivantes : {Company_Name}, {First_Name}, {Last_Name}, {Program}, {Photo}, {Start_Date}, {End_Date}, {Certificate_Date} et {Skills} (en utilisant la syntaxe suivante pour créer une liste de compétences) :

{#Skills}
- {.}
{/Skills}

💡 Pour aller plus loin La syntaxe avancée est activée pour ce modèle afin de permettre le redimensionnement d’image. Vous devez éviter les espaces dans les noms de vos balises pour pouvoir l’utiliser. C’est pourquoi les noms de balises composés de deux mots utilisent un trait de soulignement entre eux.

Concevoir la Base de Données

Pour notre exemple, nous avons commencé par le modèle puis créé une structure de base de données adaptée. Bien sûr, un processus réel se déroulera dans l’autre sens : comme vos données seront probablement déjà cohérentes, vous créerez un modèle correspondant à vos données et à la structure de votre base afin de générer les documents dont vous avez besoin, et non une structure de base de données en fonction de votre modèle.

Ici, notre base inclut trois tables :

• La table Skills contient les compétences acquises dans les différents programmes, classées par catégorie.

• La table Programs contient des données sur chaque programme : nom, date de début, date de fin, et les compétences acquises (champ lié à la table Skills).

• La table Attendees contient des données sur chaque participant des différents programmes, comme le prénom, le nom et la photo, ainsi qu’un champ lié au programme suivi, à partir duquel plusieurs champs de référence sont créés pour accéder directement aux données du programme dans la table Attendees. Cela est nécessaire car le script utilisé pour générer les documents ne permet actuellement de sélectionner qu’une seule table, donc toutes les données doivent être présentes dans cette table.

Veuillez noter que la date du certificat requise dans le modèle n’est pas stockée dans les données. Ne vous inquiétez pas, elle sera remplie avec la date du jour lors de la génération du document.

Si vous voulez voir à quoi ressemble notre base ou commencer à l’explorer, vous pouvez simplement consulter les données de test du script DocuGenerate.

Remplir la Base de Données

Notre base est déjà remplie de données permettant de tester notre flux de travail, mais dans un processus réel, vous aurez besoin d’un mécanisme pour collecter ces données. Pour atteindre cet objectif, l’un des moyens les plus simples est de créer des formulaires que les utilisateurs peuvent remplir directement eux-mêmes.

Un formulaire est essentiellement une page web que vous rendrez accessible à tous, avec plusieurs champs de saisie liés aux champs de votre table, de sorte que remplir le formulaire créera un nouvel enregistrement dans votre table. Par exemple, le processus de création d’un formulaire pour la table Attendees est assez simple :

• Créez un nouveau formulaire dans la barre latérale des vues.
• Téléversez un logo et/ou une image de couverture pour votre formulaire.
• Choisissez les champs que vous voulez que l’utilisateur remplisse.
• Pour chaque champ, indiquez s’il est obligatoire, puis ajoutez un titre et une description.
• Publiez votre formulaire afin d’obtenir une URL publique à partager.

💡 Pour aller plus loin Pour en savoir plus sur la création et le partage de formulaires dans Airtable, consultez leur documentation officielle.

Configurer l’Extension de Script

Maintenant que notre modèle et notre base sont prêts, nous allons configurer le script utilisé pour générer les documents. Pour cela, vous devrez ajouter une Scripting Extension à l’un de vos tableaux de bord. Veuillez noter que les extensions ne sont disponibles que sur les forfaits payants.

Ensuite, vous devrez copier ce code JavaScript et le coller dans l’extension de script :

// Click the "gear" icon in the top right to view settings
const config = input.config({
    title: 'Generate Document',
    description: 'Automate document generation using DocuGenerate',
    items: [
        input.config.text('api_key', {
            label: 'API Key',
             description: 'Get your unique key from the Settings page in DocuGenerate'
        }),
        input.config.text('template_id', {
            label: 'Template ID',
            description: "ID of the template to use for generating the document"
        }),
        input.config.table('table', {
            label: 'Table',
            description: 'Source table for your records'
        }),
        input.config.field('storage_field', {
            label: 'Storage',
            description: 'Field for storing the generated documents (URL or Attachment)',
            parentTable: 'table',
        }),
        input.config.select('output_format', {
            label: 'Format',
            description: 'Output format of the generated documents',
            options: [
                {label: 'PDF (.pdf)', value: '.pdf'},
                {label: 'Microsoft Word (.docx)', value: '.docx'},
                {label: 'Microsoft Word 2007 (.doc)', value: '.doc'},
                {label: 'OpenDocument Format (.odt)', value: '.odt'},
                {label: 'Plain Text (.txt)', value: '.txt'},
                {label: 'HTML (.html)', value: '.html'},
                {label: 'PNG (.png)', value: '.png'}
            ]
        })
    ]
});

// Prompt the user to pick a record 
// If this script is run from a button field, this will use the button's record instead
let record = await input.recordAsync('Select a record to use', config.table);

if (record) {
    // Customize this section to handle the selected record
    // You can use record.getCellValue("Field name") to access cell values from the record
    output.markdown(`Generating document for **${record.name}**`);

    // Get the program name
    const programsTable = base.getTable("Programs");
    const programRecord = record.getCellValue("Program")[0];
    const program = await programsTable.selectRecordAsync(programRecord.id);

    // Construct the data object based on the selected record's values
    const data = [{
        "Company Name": record.getCellValue("Company_Name"),
        "First Name": record.getCellValue("First_Name"),
        "Last Name": record.getCellValue("Last_Name"),
        "Program": program?.getCellValue("Name"),
        "Start Date": record.getCellValue("Start_Date"),
        "End Date": record.getCellValue("End_Date"),
        "Certificate Date": record.getCellValue("End_Date")
    }];

    const options = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': config.api_key
        },
        body: JSON.stringify({
            template_id: config.template_id,
            name: `Certificate for ${record.getCellValue("First_Name")} ${record.getCellValue("Last_Name")}`,
            output_format: config.output_format,
            data: data
        })
    };

    let status;
    const response = await fetch('https://api.docugenerate.com/v1/document', options)
        .then(response => {
            status = response.status;
            return response.json();
        })
        .catch(err => output.text(err));

    if (status !== 201) {
        output.markdown('Error generating document: ' + response.message);
    } else {
        const storageFieldValue = (config.storage_field.type === 'multipleAttachments') ? [{url: response.document_uri}] : response.document_uri;
        await config.table.updateRecordsAsync([{
            id: record.id,
            fields: {[config.storage_field.name]: storageFieldValue}
        }]);
        output.markdown('Document generated successfully! 🎉');
    }
} else {
    output.markdown('No record was selected');
}

Si tout fonctionne correctement, vous devriez maintenant pouvoir accéder à la page des paramètres du script en cliquant sur l’icône en forme de roue dentée qui apparaît en survolant le coin supérieur droit de votre extension. N’hésitez pas à utiliser l’icône plein écran à côté de l’icône des paramètres, pour une meilleure visibilité.

Voici les paramètres disponibles :

• API Key : votre clé API DocuGenerate, que vous pouvez obtenir depuis votre page des paramètres une fois votre compte créé. Copiez simplement la clé API dans le presse-papiers en cliquant sur celle-ci.

• Template ID : l’ID de votre modèle, que vous pouvez copier depuis la page de votre modèle. Veuillez noter qu’il apparaît également directement dans l’URL de la page de votre modèle, l’URL étant de la forme https://app.docugenerate.com/templates/:template_id

• Table : la table contenant les enregistrements que vous utiliserez pour remplacer les balises de votre modèle.

• Storage : le champ utilisé pour stocker le document généré. Il peut s’agir soit d’un champ URL (qui stockera un lien vers le document), soit d’un champ de type Fichier (qui stockera le fichier lui-même).

• Format : le format de sortie du document généré. Les options sont .docx, .pdf, .doc, .odt, .txt, .html, ou .png.

Avec tous ces paramètres configurés, nous sommes maintenant prêts à automatiser le processus de création de documents !

Ajouter le Bouton Générer

L’extension de script attend que l’utilisateur sélectionne un enregistrement spécifique à traiter. Mais pour simplifier les choses pour l’utilisateur final, nous voulons générer le document simplement en cliquant sur un bouton. Pour cela, nous devrons ajouter un nouveau champ Bouton, qui sera configuré pour exécuter notre script lorsqu’il est cliqué. Ainsi, l’enregistrement à partir duquel le bouton a été cliqué est automatiquement sélectionné pour l’exécution du script.

Générer et Stocker les Documents

Une fois tout configuré, voyons comment fonctionne le processus de génération de documents. Lorsque vous cliquez sur le bouton Generate sur n’importe quel enregistrement, le script s’exécute et effectue plusieurs actions :

1. Il collecte toutes les données nécessaires de l’enregistrement actuel.
2. Il envoie ces données à l’API de DocuGenerate avec l’ID de votre modèle.
3. DocuGenerate traite la requête, en remplaçant toutes les balises de fusion par vos données.
4. Le document généré est renvoyé et automatiquement stocké dans votre base de données.

Le résultat est un certificat à l’apparence professionnelle, prêt à être partagé avec les participants.

Aller Plus Loin avec les Automatisations Airtable

Bien que notre script déclenché par bouton soit déjà très efficace, vous pouvez aller encore plus loin dans la génération de documents en l’intégrant avec les Automatisations Airtable. Cela permet des flux de travail de documents entièrement automatisés, déclenchés selon des conditions spécifiques dans votre base de données.

Voici quelques scénarios d’automatisation puissants que vous pourriez mettre en place :

• Génération Automatique de Certificats : générez automatiquement des certificats lorsque le statut d’un participant passe à « Completed » ou lorsqu’une date de fin de programme est atteinte, éliminant le besoin de cliquer manuellement sur un bouton.

• Envoi par E-mail : envoyez les certificats directement aux participants par e-mail dès qu’ils sont générés, créant une expérience fluide pour les participants au programme.

• Traitement par Lots : mettez en place des automatisations hebdomadaires ou mensuelles qui génèrent des certificats pour tous les participants ayant terminé des programmes durant cette période.

• Génération Conditionnelle de Documents : créez différents types de documents selon des critères comme le type de programme, le niveau de réussite, ou la localisation géographique.

• Système de Notification : notifiez les administrateurs de programme lorsque des certificats ont été générés et livrés, pour aider à suivre le processus.

Pour mettre en place ces automatisations, vous devrez adapter le code de script fourni précédemment dans une étape d’automatisation « Run script ». L’intégration de base avec l’API restera la même, mais vous devrez modifier la façon dont les enregistrements sont sélectionnés et traités selon vos conditions de déclenchement.

Conclusion

Dans ce tutoriel, nous avons montré comment transformer votre base de données Airtable en un puissant système de génération de documents grâce à l’API de DocuGenerate et à l’extension de script d’Airtable. En combinant ces outils, vous pouvez générer des documents professionnels directement à partir de vos données Airtable en un seul clic et stocker les documents générés dans votre base de données pour un accès et une organisation facilités.

Bien que des outils d’automatisation comme celui-ci puissent considérablement améliorer votre productivité, il est important de se rappeler qu’ils doivent servir à faciliter les processus. Ne vous perdez pas dans le développement d’une automatisation complexe lorsqu’une approche plus simple pourrait être plus efficace ! Reconnaître cet équilibre est essentiel pour créer des flux de travail réellement efficaces. Commencez par l’implémentation de base que nous avons fournie, puis développez progressivement votre automatisation à mesure que vos besoins grandissent et évoluent.

Ressources

• La base de test DocuGenerate dans Airtable, contenant les tables Skills, Programs et Attendees.
• Le dépôt GitHub Airtable DocuGenerate créé par Benjamin Hatton, contenant la version initiale des scripts Airtable pour générer des documents avec l’API de DocuGenerate.
• Toutes les photos de profil sont libres de droits et proviennent de Pixabay, le site d’images et de photos libres de droits.
• Le modèle Certificate of Completion utilisé dans ce tutoriel.
• Un exemple de certificat PDF généré à partir des données Airtable.