Créer un formulaire personnalisé dans Google Sheets pour une saisie de données efficace

Optimisez la saisie de données dans Google Sheets en créant un formulaire personnalisé directement dans le volet latéral, une méthode qui simplifie la collecte d’informations structurées et accélère l’entrée des données.

Apprenez comment cette approche, permettant une personnalisation poussée de l’interface, peut améliorer l’efficacité de votre gestion de données.

Étape 1 : Créer un script Google Apps Script

Tout d’abord, ouvrez votre feuille de calcul Google Sheets et accédez à Extensions > Apps Script. Cela ouvrira l’éditeur de script où vous pouvez ajouter du code pour étendre les fonctionnalités de votre feuille de calcul.

Étape 2 : Écrire le code du formulaire

Dans l’éditeur Apps Script, vous allez créer un fichier HTML pour le formulaire. Cliquez sur Fichier > Nouveau > Fichier HTML et nommez-le, par exemple, Form.html. Dans ce fichier, insérez le code HTML pour votre formulaire. Voici un exemple simple :

<!DOCTYPE html>

<html>

<head>

</head>

<button onclick="soumettreFormulaire()">Ajouter</button>

function soumettreFormulaire() { var nom = document.getElementById('nom').value; google.script.run.ajouterAFeuille(nom); }

</script>

</body>

</html>

<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <label for="nom">Nom :</label> <input type="text" id="nom"> <button onclick="soumettreFormulaire()">Ajouter</button> <script> function soumettreFormulaire() { var nom = document.getElementById('nom').value; google.script.run.ajouterAFeuille(nom); } </script> </body> </html>

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body> <label for="nom">Nom :</label> <input type="text" id="nom">
  <button onclick="soumettreFormulaire()">Ajouter</button>
  <script>
    function soumettreFormulaire() { var nom = document.getElementById('nom').value; google.script.run.ajouterAFeuille(nom); } 
  </script>
</body>

</html>

Étape 3 : Ajouter la fonction pour écrire dans la feuille de calcul

Dans le même projet Apps Script, ajoutez une fonction pour prendre les données du formulaire et les écrire dans votre feuille de calcul. Par exemple :

/**

* Fonction qui ajoute un nouveau client à la feuille de calcul.

* @param {Object} data - Un objet contenant les informations du client.

* Les propriétés attendues sont : nom, prenom, adresse, cp, ville,

* telephone_fixe, telephone_mobile.

function ajoutClient(data) {

const feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

feuille.appendRow([

data.nom,

data.prenom,

data.adresse,

data.cp,

data.ville,

data.telephone_fixe,

data.telephone_mobile

]);

}

/** * Fonction qui ajoute un nouveau client à la feuille de calcul. * * @param {Object} data - Un objet contenant les informations du client. * Les propriétés attendues sont : nom, prenom, adresse, cp, ville, * telephone_fixe, telephone_mobile. */ function ajoutClient(data) { const feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); feuille.appendRow([ data.nom, data.prenom, data.adresse, data.cp, data.ville, data.telephone_fixe, data.telephone_mobile ]); }

/**
 * Fonction qui ajoute un nouveau client à la feuille de calcul.
 *
 * @param {Object} data - Un objet contenant les informations du client.
 * Les propriétés attendues sont : nom, prenom, adresse, cp, ville,
 * telephone_fixe, telephone_mobile.
 */
function ajoutClient(data) {
  const feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  feuille.appendRow([
    data.nom,
    data.prenom,
    data.adresse,
    data.cp,
    data.ville,
    data.telephone_fixe,
    data.telephone_mobile
  ]);
}

Cette fonction ajoutClient prend la saisie de plusieurs champs et les ajoutent à la première ligne vide de la feuille active.

Étape 4 : Créer une fonction pour ouvrir le formulaire

Toujours dans Apps Script, ajoutez une fonction pour ouvrir le formulaire dans le volet de droite :

/**

* Fonction qui affiche un volet latéral à partir du fichier HTML "VoletLateral".

function ouvrirVolet() {

const html = HtmlService.createHtmlOutputFromFile('VoletLateral')

.setTitle('Saisie Client')

.setWidth(300);

SpreadsheetApp.getUi().showSidebar(html);

}

/** * Fonction qui affiche un volet latéral à partir du fichier HTML "VoletLateral". */ function ouvrirVolet() { const html = HtmlService.createHtmlOutputFromFile('VoletLateral') .setTitle('Saisie Client') .setWidth(300); SpreadsheetApp.getUi().showSidebar(html); }

/**
 * Fonction qui affiche un volet latéral à partir du fichier HTML "VoletLateral".
 */
function ouvrirVolet() {
  const html = HtmlService.createHtmlOutputFromFile('VoletLateral')
      .setTitle('Saisie Client')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

Cette fonction crée une nouvelle instance de votre formulaire et le définit pour s’afficher dans le volet de droite de Google Sheets.

Étape 5 : Ajouter une commande de menu

Pour faciliter l’accès à votre formulaire, vous pouvez ajouter une commande de menu personnalisée à votre feuille de calcul :

/**

* Fonction exécutée à l'ouverture de la feuille de calcul.

* Crée un menu personnalisé "Gestion Client".

function onOpen() {

const menuGestionClient = ui.createMenu('Gestion Client');

menuGestionClient.addItem('Ouvrir le volet de saisie', 'ouvrirVolet');

menuGestionClient.addSeparator();

menuGestionClient.addItem('À propos', 'afficherInfosDeveloppeur');

menuGestionClient.addToUi();

}

/** * Fonction exécutée à l'ouverture de la feuille de calcul. * Crée un menu personnalisé "Gestion Client". */ function onOpen() { const menuGestionClient = ui.createMenu('Gestion Client'); menuGestionClient.addItem('Ouvrir le volet de saisie', 'ouvrirVolet'); menuGestionClient.addSeparator(); menuGestionClient.addItem('À propos', 'afficherInfosDeveloppeur'); menuGestionClient.addToUi(); }

/**
 * Fonction exécutée à l'ouverture de la feuille de calcul.
 * Crée un menu personnalisé "Gestion Client".
 */
function onOpen() {
  const menuGestionClient = ui.createMenu('Gestion Client');
  menuGestionClient.addItem('Ouvrir le volet de saisie', 'ouvrirVolet');
  menuGestionClient.addSeparator();
  menuGestionClient.addItem('À propos', 'afficherInfosDeveloppeur');
  menuGestionClient.addToUi();
}

La fonction onOpen crée un nouveau menu intitulé « Gestion client » dans la barre de menu de Google Sheets, avec une option pour ouvrir votre formulaire personnalisé.

Pour allez plus loin

Développer un formulaire personnalisé dans Google Sheets permet une collecte de données plus structurée et rapide. Les exemples ci-dessus montrent comment intégrer un formulaire dans Google Sheets. J’ai développé une version avancée qui inclut des champs supplémentaires comme les adresses, codes postaux, et numéros de téléphone. Cette version enrichit nettement l’interface utilisateur.

Améliorez l’interface

J’ai également optimisé l’aspect visuel du formulaire. Grâce à des ajustements minutieux, ce formulaire avancé montre comment utiliser les standards web pour améliorer l’expérience utilisateur dans Google Sheets.

Voici les améliorations :

Champs supplémentaires : Les utilisateurs entrent des informations plus détaillées, adaptant le formulaire à divers usages.
Style amélioré : Des ajustements CSS rendent le formulaire plus agréable visuellement.
Interaction plus intuitive : Un écouteur d’événements pour la touche Entrée simplifie la soumission des données.

Proposition d’accompagnement

Je suis enthousiaste à l’idée de partager ce développement avec vous.

À l’Atelier informatique, nous nous engageons à créer des solutions innovantes adaptées à vos besoins. Pour discuter de vos projets, contactez-moi à contact@atelier-informatique.com. Transformons ensemble vos idées en réalité.

Commentaires

Laisser un commentaire Annuler la réponse

Comment rédiger un bon prompt ? (Prompt Engineering)

Créer un formulaire personnalisé dans Google Sheets pour une saisie de données efficace ?

Créer une jauge de progression dynamique dans Google Sheets avec SPARKLINE