Comment créer une barre latérale dans Google Sheets

Une barre latérale est un élément de l'interface utilisateur (une petite zone verticale) qui apparaît à gauche ou à droite de la plus grande fenêtre ou sur l'écran de l'utilisateur pour afficher des informations connexes ou une liste de choix ou d'options de navigation.

La barre latérale de Google Sheets est un panneau d'interface utilisateur qui s'affiche sur le côté droit de Google Sheets. Google fournit un éditeur de script intégré appelé Apps Script qui peut créer divers modules complémentaires et éléments pour les applications G-Suite. Il peut également être utilisé pour créer vos propres barres latérales personnalisées dans les feuilles Google.

Cet article vous montrera comment créer une barre latérale personnalisée dans Google Sheets à l'aide de l'éditeur de script Google Apps.

Création d'une barre latérale dans Google Sheets à l'aide de Apps Script

Si vous souhaitez créer une barre latérale personnalisée, vous devez saisir et exécuter un certain code dans l'éditeur Apps Script. Ensuite, vous pouvez créer vos propres widgets dans la barre latérale à l'aide de codes HTML, CSS et Javascript.

Tout d'abord, ouvrez les feuilles Google. Dans le menu Google Sheets, cliquez sur « Outils » et sélectionnez « Éditeur de script ».

Cela ouvrira l'éditeur Apps Script dans un nouvel onglet de votre navigateur où vous pourrez écrire votre code d'interface utilisateur.

Écrivez le code suivant dans la page Code.gs :

function onOpen() { SpreadsheetApp.getUi() .createMenu('My New Menu') .addItem('My sidebar 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Calculation Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }

Dans le code de script Code.gs ci-dessus, la fonction OnOpen () crée un menu personnalisé appelé "Mon nouveau menu" dans la barre de menus de Google Sheets. Ce menu contiendra un élément de menu appelé « Ma barre latérale-1 ». Lorsque vous cliquez sur cet élément de menu, la fonction showAdminSidebar() (la deuxième partie du code) sera exécutée et la barre latérale sera affichée sur le côté droit de la fenêtre de la feuille Google.

Ensuite, nous devons créer un fichier HTML dans l'éditeur de script, puis avec ce fichier, vous pouvez créer la barre latérale.

Pour créer le fichier HTML, cliquez sur l'icône plus (+) à côté de Fichiers dans l'éditeur de scripts d'applications et sélectionnez « HTML ».

Cela créera un fichier HTML sous Code.gs. Renommez le fichier en « Barre latérale ». Ce nom doit être le même que celui ajouté dans la fonction showSidebar() (var html = HtmlService.createHtmlOutputFromFile('Sidebar')).

Écrivez le code suivant dans la section du fichier Sidebar.html :

Ceci est ma nouvelle barre latérale

Le code ci-dessus affiche la chaîne de texte « Ceci est ma nouvelle barre latérale » et le bouton « Fermer » qui ferme la barre latérale lorsque vous cliquez dessus.

Une fois que vous avez terminé d'écrire le code ci-dessus dans la section Sidebar.html, il doit contenir le code suivant :

Ceci est ma nouvelle barre latérale.

La capture d'écran :

Lorsque vous avez terminé d'entrer les deux codes, enregistrez le projet en cliquant sur l'icône d'enregistrement dans la barre d'outils (voir la capture d'écran ci-dessous). Exécutez ensuite les fonctions en cliquant sur l'icône « Exécuter ».

Que vous exécutiez le script ici ou que vous sélectionniez l'élément de menu personnalisé dans la barre d'outils des feuilles Google (pour la première fois), Google vous demandera d'autoriser l'exécution du script. Étant donné que vous exécutez un widget personnalisé tiers, Google vous demandera votre autorisation. Une fois que vous autorisez le script, il affichera la barre latérale dans votre feuille Google.

Comment autoriser le code de script d'applications dans Google

Pour autoriser votre script personnalisé, procédez comme suit :

Une fois le script exécuté, Google vous demandera de sélectionner votre compte Google. Après l'avoir sélectionné, une petite fenêtre contextuelle apparaîtra, dans laquelle cliquez sur « Examiner les autorisations ».

Une autre fenêtre contextuelle apparaîtra, sélectionnez ici « Afficher avancé » et cliquez sur « Aller au projet sans titre (non sécurisé) » (il affichera le nom de votre projet).

Dans la fenêtre suivante, cliquez sur « Autoriser » et Google Sheet exécutera votre script.

Une fois cela fait, revenez à votre feuille Google et actualisez-la. Le nouveau menu personnalisé (Mon nouveau menu) sera ajouté à la barre d'outils de votre feuille Google, que nous avons ajoutée via le script Code.gs. Cliquez sur « Mon nouveau menu » et sélectionnez l'élément de menu « Ma barre latérale 1 » pour afficher la barre latérale.

Maintenant, votre barre latérale personnalisée apparaîtra sur le côté droit de votre feuille Google avec le texte et le bouton que nous avons ajoutés (comme indiqué ci-dessous). Lorsque vous cliquez sur le bouton, la barre latérale se ferme.

Eh bien, vous savez maintenant comment créer votre propre barre latérale dans les feuilles Google.