Les menus personnalisés peuvent vous aider à automatiser et optimiser certaines tâches dans Google Apps Script en créant des interfaces faciles à utiliser afin que d’autres personnes puissent exécuter et bénéficier de votre code.
Dans cet article, nous allons apprendre comment ajouter des menus personnalisés à Google Docs, Sheets et Forms en utilisant Google Apps Script. L’ajout de menus personnalisés vous permet de personnaliser l’interface utilisateur de l’application Google que vous utilisez et de créer des fonctions personnalisées que vous pouvez utiliser dans vos applications pour vous faciliter la tâche.
Accéder à l’éditeur de script
Tout d’abord, choisissez le type d’application Google pour lequel vous souhaitez créer un menu personnalisé. Dans cet exemple, je vais créer un menu personnalisé pour Google Sheets en utilisant un script lié au conteneur, ce qui signifie que le script que je vais écrire sera attaché à la feuille de calcul. Vous pouvez en savoir plus sur la différence entre les scripts liés et autonomes sur la page des développeurs Google.
Pour accéder à l’éditeur de script à partir d’une feuille de calcul Google, cliquez sur le menu Outils, puis sur l’élément intitulé Éditeur de script. La démarche est similaire pour tous les types d’applications Google, comme Sheets, Docs, Slides et Forms.
En ouvrant l’éditeur de script lié à cette feuille de calcul Google, vous avez accès à plusieurs fonctions pratiques telles que getActiveSpreadsheet(), getActiveDocument(), getActiveForm(), qui vous permettent d’accéder facilement au document parent.
De plus, il existe également des déclencheurs tels que onOpen et des fonctions telles que getUi qui nous aideront à activer des fonctionnalités et à les ajouter à nos menus personnalisés à l’étape suivante.
Écrire une fonction pour ajouter des menus personnalisés
L’éditeur de script dans Google Sheets nous offre un éditeur de texte pour notre code. Nous pouvons diviser ce script simple en deux parties. La première partie ajoutera un menu personnalisé à l’interface utilisateur de la feuille de calcul lorsque cette feuille spécifique est ouverte. La deuxième partie du script définit deux fonctions personnalisées qui sont appelées lorsque nous cliquons sur un élément de menu dans le menu personnalisé.
Alors, commençons par écrire la fonction de déclenchement simple onOpen qui nous aidera à ajouter notre menu personnalisé à la feuille de calcul Google :
function onOpen( ) {
// Cette ligne appelle SpreadsheetApp et obtient son interface utilisateur
var ui = SpreadsheetApp.getUi();
// Ces lignes créent les éléments de menu et les lient aux fonctions que nous écrirons dans Apps Script
ui.createMenu('Fonctions personnalisées')
.addItem('Obtenir une plage', 'getRange')
.addSeparator()
.addSubMenu(ui.createMenu('Options avancées')
.addItem('Obtenir les valeurs de la plage', 'getRangeValues'))
.addToUi();
}Pour que le menu soit ajouté à la feuille lorsque la feuille de calcul est ouverte, nous devons envelopper tout le code de cette section dans la fonction onOpen(), qui exécutera tout ce qui se trouve à l’intérieur lorsque la feuille de calcul est ouverte.
À la deuxième ligne, nous appelons SpreadsheetApp, qui renvoie une instance de la feuille de calcul actuelle, puis nous utilisons la méthode getUi pour renvoyer une instance de l’interface utilisateur de la feuille de calcul actuelle, que nous stockons dans une variable appelée ui.
Les lignes suivantes travaillent toutes avec la variable ui que nous venons de créer, et nous chaînerons plusieurs appels de méthode pour commencer à construire notre menu personnalisé. Tout d’abord, nous appelons la méthode createMenu sur notre variable ui, et cette méthode prend une chaîne en paramètre pour le nom du menu.
En utilisant la syntaxe point, nous continuons à chaîner les appels de méthode et utilisons la méthode addItem pour ajouter un élément de menu.
La méthode addItem prend deux paramètres. Le premier paramètre est une chaîne pour le nom de l’élément de menu qui s’affichera dans le menu personnalisé. Le deuxième paramètre est une chaîne qui fait référence à la fonction qui sera appelée lorsque nous cliquerons sur cet élément de menu.
Nous suivons un modèle très similaire pour ajouter un sous-menu, comme vous pouvez le voir dans les dernières lignes de code. La dernière chose que nous faisons est d’appeler la méthode addToUi pour ajouter notre menu personnalisé à l’instance de l’interface utilisateur de la feuille de calcul actuelle.
Écrire des fonctions liées aux éléments de menu personnalisés
Enfin, nous devrons écrire certaines fonctions personnalisées qui seront appelées lorsque nous cliquerons sur les éléments de menus personnalisés. Nous écrirons deux fonctions, l’une pour retourner l’emplacement de la plage active et l’autre pour retourner toutes les valeurs d’une plage active de la feuille de calcul.
Tout d’abord, nous pouvons définir une fonction appelée getRange et utiliser certaines méthodes à l’intérieur de la fonction pour obtenir des informations sur la feuille de calcul et nous alerter via l’interface utilisateur de la feuille de calcul.
function getRange() {
// Ces lignes obtiennent la plage active, puis renvoient la première ligne et la première colonne dans cette plage
var range = SpreadsheetApp.getActiveRange();
var row = range.getRow();
var col = range.getColumn();
// Ces lignes appellent la fenêtre d'alerte de l'interface utilisateur de la feuille de calcul et passent un message
SpreadsheetApp.getUi() // Ou DocumentApp ou FormApp
.alert("Je suis à cet emplacement : nligne : " + row + "ncolonne : " + col);
}Puisque nous avons déjà attaché cette fonction à un élément de menu personnalisé avant de la définir, nous sommes prêts à continuer.
La deuxième fonction que nous pouvons appeler getRangeValues, va faire quelque chose de très similaire à getRange, mais nous allons obtenir des valeurs plus spécifiques de la feuille de calcul. La méthode que nous allons utiliser à l’intérieur de getRangeValues renverra un tableau bidimensionnel de valeurs de la feuille de calcul. Vous pouvez en savoir plus sur la méthode getValues pour Google Apps Script si vous avez des questions.
function getRangeValues() {
// Récupérer la plage active de la feuille de calcul
var range = SpreadsheetApp.getActiveRange();
// Obtenir les valeurs dans un tableau 2D : valeurs[0][0]
var values = range.getValues();
// Appeler la fenêtre d'alerte de l'interface utilisateur de la feuille de calcul et imprimer les valeurs
SpreadsheetApp.getUi()
.alert('Voici les valeurs pour cette plage : ' + values);
}Personnaliser et utiliser les nouveaux éléments de menu
Après avoir lié les deux fonctions personnalisées à la fonction onOpen, elles seront ajoutées au menu de la feuille de calcul la prochaine fois qu’elle sera ouverte. Il vous suffit de cliquer sur les éléments de menu pour tester vos fonctions de gain de temps fraîchement créées. Étant donné que nous ajoutons les menus à l’aide de l’interface utilisateur par défaut de la feuille de calcul, il y a des limites à la personnalisation de vos menus. Mais puisque Google Sheets traite bien les caractères emoji dans les chaînes, nous pouvons les utiliser comme partie des libellés que nous créons pour nos éléments de menu.
Donc, si nous changeons le code ci-dessus qui ajoute le menu personnalisé pour ressembler à ceci :
ui.createMenu('Fonctions personnalisées')
.addItem('Obtenir une plage', 'getRange')
.addSeparator()
.addSubMenu(ui.createMenu('Options avancées')
.addItem('Obtenir les valeurs de la plage', 'getRangeValues'))
.addToUi();Nous obtenons des éléments de menu cool qui ressemblent à cela lorsque nous y accédons depuis notre feuille de calcul. Ajouter des nuances comme celles-ci peut être d’une grande aide pour les personnes utilisant vos outils ou compléments, et l’iconographie tend à faciliter la compréhension des options d’interface.
Chaque fois que vous ajoutez des éléments de menu qui interagissent avec différentes applications Google, vous serez invité à autoriser l’application à effectuer ces actions en tant qu’utilisateur spécifique.
Si vous cliquez sur « Continuer », vous serez redirigé vers un flux OAuth dans lequel vous sélectionnerez un compte Google pour continuer. Ensuite, si l’add-on n’a pas été vérifié, Google affichera un message de sécurité particulièrement sévère indiquant que l’application n’a pas été vérifiée.
Pour passer cette étape, nous devons choisir le lien « Go to Custom Menu (unsafe) » en bas de ce message d’alerte. Après avoir cliqué sur ce lien, nous devrons enfin confirmer que nous souhaitons donner à ce script l’accès aux ressources qu’il souhaite utiliser.
Après avoir effectué toutes ces étapes, nous pouvons enfin exécuter nos deux fonctions personnalisées :)
L’exécution de l’option de menu « Obtenir une plage » crée une alerte qui nous donne la position de notre curseur dans la feuille de calcul active, comme une épingle de carte indiquant où nous nous trouvons.
Et comme prévu, notre option de menu « Obtenir les valeurs de la plage » crée une boîte de dialogue d’alerte avec toutes les valeurs que nous avons actuellement sélectionnées à l’aide du curseur.
Retrouvez toutes ces fonctionnalités passionnantes dans notre article sur Crawlan.com.
