Een zijbalk is een gebruikersinterface-element (een klein verticaal gebied) dat links of rechts van het grotere venster of op het gebruikersscherm verschijnt om gerelateerde informatie of een lijst met keuzes of navigatie-opties weer te geven.
De zijbalk in Google Spreadsheets is een gebruikersinterfacepaneel dat aan de rechterkant van Google Spreadsheets wordt weergegeven. Google biedt een ingebouwde scripteditor, Apps Script genaamd, die verschillende add-ons en elementen voor G-Suite-applicaties kan maken. Het kan ook worden gebruikt voor het maken van uw eigen aangepaste zijbalken in Google-bladen.
In dit artikel wordt uitgelegd hoe u een aangepaste zijbalk maakt in Google Spreadsheets met de Google Apps Script-editor.
Een zijbalk maken in Google Spreadsheets met Apps Script
Als u een aangepaste zijbalk wilt maken, moet u bepaalde code invoeren en uitvoeren in de Apps Script-editor. Vervolgens kunt u uw eigen widgets in de zijbalk bouwen met behulp van HTML-, CSS- en Javascript-codes.
Open eerst de Google-bladen. Klik in het Google Spreadsheets-menu op 'Extra' en selecteer 'Scripteditor'.
Dat opent de Apps Script-editor in een nieuw tabblad van uw browser waar u uw gebruikersinterfacecode kunt schrijven.
Schrijf de volgende code op de Code.gs-pagina:
function onOpen() { SpreadsheetApp.getUi() .createMenu('Mijn nieuwe menu') .addItem('Mijn zijbalk 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Berekening Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }
In de bovenstaande Code.gs-scriptcode maakt de functie OnOpen() een aangepast menu met de naam 'Mijn nieuwe menu' in de menubalk van Google Spreadsheets. Dat menu bevat een menu-item genaamd 'Mijn zijbalk-1'. Wanneer u op dit menu-item klikt, wordt de functie showAdminSidebar() (het tweede deel van de code) uitgevoerd en wordt de zijbalk aan de rechterkant van het Google-bladvenster weergegeven.
Vervolgens moeten we een HTML-bestand maken in de Scripteditor en met dit bestand kunt u de zijbalk maken.
Om het HTML-bestand te maken, klikt u op het plusteken (+) naast Bestanden in de Apps Script-editor en selecteert u 'HTML'.
Hiermee wordt een HTML-bestand gemaakt onder Code.gs. Hernoem het bestand als 'Zijbalk'. Deze naam moet dezelfde zijn als de naam die is toegevoegd in de showSidebar()-functie (var html = HtmlService.createHtmlOutputFromFile('Sidebar')).
Schrijf de volgende code in de sectie van het Sidebar.html-bestand:
Dit is mijn nieuwe zijbalk
De bovenstaande code toont de tekstreeks 'Dit is mijn nieuwe zijbalk' en de knop 'Sluiten' die de zijbalk sluit wanneer erop wordt geklikt.
Nadat u klaar bent met het schrijven van de bovenstaande code in het gedeelte van de Sidebar.html, moet deze de volgende code bevatten:
Dit is mijn nieuwe zijbalk.
De schermafbeelding:
Als u klaar bent met het invoeren van beide codes, slaat u het project op door op het pictogram Opslaan in de werkbalk te klikken (zie de onderstaande schermafbeelding). Voer vervolgens de functies uit door op het pictogram 'Uitvoeren' te klikken.
Of u nu het script hier uitvoert of het aangepaste menu-item in de Google Spreadsheets-werkbalk selecteert (voor de eerste keer), Google zal u vragen om het script te autoriseren om uit te voeren. Aangezien u een aangepaste widget van derden gebruikt, zal Google om uw autorisatie vragen. Zodra u het script autoriseert, wordt de zijbalk in uw Google-spreadsheet weergegeven.
Apps Script-code autoriseren in Google
Volg deze stappen om uw aangepaste script te autoriseren:
Nadat u het script heeft uitgevoerd, zal Google u vragen om uw Google-account te selecteren. Nadat je het hebt geselecteerd, verschijnt er een kleine pop-up, waarin je op 'Review permissions' klikt.
Er verschijnt nog een pop-up, selecteer hier 'Show Advanced' en klik op 'Go to Untitled project (unsafe)' (het toont je projectnaam).
Klik in het volgende venster op 'Toestaan' en Google Sheet voert uw script uit.
Zodra je dat hebt gedaan, ga je terug naar je Google-blad en vernieuw je het. Het nieuwe aangepaste menu (Mijn nieuwe menu) wordt toegevoegd aan uw Google-werkbalk, die we hebben toegevoegd via het Code.gs-script. Klik op 'Mijn nieuwe menu' en selecteer het menu-item 'Mijn zijbalk 1' om de zijbalk weer te geven.
Nu verschijnt uw aangepaste zijbalk aan de rechterkant van uw Google-blad met de tekst en de knop die we hebben toegevoegd (zoals hieronder weergegeven). Wanneer u op de knop klikt, wordt de zijbalk gesloten.
Welnu, nu weet u hoe u uw eigen zijbalk in Google-bladen kunt bouwen.