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

Creating the Html file and code editor will look like this

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>