Create a SideBar in Google Sheets using Google Apps Script

In this post, I will tell you how to create a sidebar in Google Sheets with Google Apps Script.
The sidebar is an operation panel displayed on the right side of the screen that can be used for G Suite applications.
In other words, it is a kind of user interface.
official documentation of sidebar

The sidebar can be created for the following applications:

  • Spreadsheet
  • document
  • slide
  • Form

Create a SideBar in Google Sheets

  • Open Google sheets
  • In the sheet menu click on tools > script editor
  • There is one file already code.gs
  • we have to create one more file Sidebar.html
Create a SideBar in Google Sheets with Google Apps Script

Creating the Html file and code editor will look like this

Create a SideBar in Google Sheets with Google Apps Script

Google Apps Script

Write Below code in code.gs

function onOpen() {
  SpreadsheetApp.getUi()
  .createMenu('Sidebar')
  .addItem('createSidebar', 'createSidebar')
  .addToUi();
}

function showSidebar() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Sidebar');
  DocumentApp.getUi().showSidebar(htmlOutput);
}

write below code in Sidebar.htm

<div class="block form-group">
  <label for="text"><b>Name</b></label>
  <input type="text" name="Name" id="Name">
</div>
<div class="block">
  <button class="create">Create</button>
  <button onclick="google.script.host.close()">close</button>
</div>
  • Save the above code
  • Go back to the sheet and refresh it
  • In menu custom menu>Sidebar click on that.
  • Authorize the apps script (How to authorize)
  • Sidebar will Opens and It will look like below

SideBar in Google Sheets using Google Apps Script