Class google.script.host (Client-side API)

AI-generated Key Takeaways

• google.script.host is an asynchronous client-side JavaScript API used to interact with dialogs or sidebars in Google Docs, Sheets, or Forms containing HTML service pages.

• To execute server-side functions from client-side code within these dialogs or sidebars, utilize google.script.run.

• The API provides methods like close(), editor.focus(), setHeight(height), and setWidth(width) for controlling dialog and sidebar behavior.

• While google.script.host focuses on client-side interactions within HTML service pages, server-side communication is handled through google.script.run.

• google.script.host enables developers to create dynamic and interactive user interfaces within Google Workspace applications by seamlessly integrating client-side JavaScript with server-side Apps Script functionality.

google.script.host is an asynchronous client-side JavaScript API that can interact with dialogs or sidebars in Google Docs, Sheets, or Forms that contain HTML-service pages. To execute server-side functions from client-side code, use google.script.run. For more information, see the guide to communicating with server functions in HTML service.

Properties

Property	Description
origin	Provides the host domain, so scripts can set their origin correctly.

Methods

Method	Return type	Brief description
close()	void	Closes the current dialog or sidebar.
editor.focus()	void	Switches browser focus from the dialog or sidebar to the Google Docs, Sheets, or Forms editor.
setHeight(height)	void	Sets the height of the current dialog.
setWidth(width)	void	Sets the width of the current dialog.

Detailed documentation

close()

Closes the current dialog or sidebar.

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Sidebar').addItem('Show', 'showSidebar').addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

Index.html

<input type="button" value="Close"
  onclick="google.script.host.close()" />

---

editor.focus()

Switches browser focus from the dialog or sidebar to the Google Docs, Sheets, or Forms editor.

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Sidebar').addItem('Show', 'showSidebar').addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

Index.html

<input type="button" value="Switch focus"
  onclick="google.script.host.editor.focus()" />

---

setHeight(height)

Sets the height of the current dialog.

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Dialog').addItem('Show', 'showDialog').addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setWidth(300)
      .setHeight(200);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<script>
  function resizeDialog(width, height) {
    google.script.host.setWidth(width);
    google.script.host.setHeight(height);
  }
</script>
<input type="button" value="Resize dialog"
  onclick="resizeDialog(450, 300)" />

Parameters

Name	Type	Description
height	Integer	the new height, in pixels

---

setWidth(width)

Sets the width of the current dialog.

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Dialog').addItem('Show', 'showDialog').addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setWidth(300)
      .setHeight(200);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<script>
  function resizeDialog(width, height) {
    google.script.host.setWidth(width);
    google.script.host.setHeight(height);
  }
</script>
<input type="button" value="Resize dialog"
  onclick="resizeDialog(450, 300)" />

Parameters

Name	Type	Description
width	Integer	the new width, in pixels