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

`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](https://developers.google.com/apps-script/guides/html). To execute server-side functions from
client-side code, use [`google.script.run`](https://developers.google.com/apps-script/guides/html/reference/run). For more information, see
the
[guide to communicating with server functions](https://developers.google.com/apps-script/guides/html/communication)
in HTML service.

### Properties

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

### Methods

| Method | Return type | Brief description |
|---|---|---|
| `https://developers.google.com/apps-script/guides/html/reference/host#close()` | `void` | Closes the current dialog or sidebar. |
| `https://developers.google.com/apps-script/guides/html/reference/host#editor.focus()` | `void` | Switches browser focus from the dialog or sidebar to the Google Docs, Sheets, or Forms editor. |
| `https://developers.google.com/apps-script/guides/html/reference/host#setHeight(Integer)` | `void` | Sets the height of the current dialog. |
| `https://developers.google.com/apps-script/guides/html/reference/host#setWidth(Integer)` | `void` | Sets the width of the current dialog. |

## Detailed documentation

### `close()`

Closes the current dialog or sidebar.

### Code.gs

```html
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

```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

```html
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

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

*** ** * ** ***

### `setHeight(height)`

Sets the height of the current dialog.

### Code.gs

```html
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

```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

```html
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

```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 |