# Methods

## HTML Canvas methods

| Method                  | Description                                                                                      |
| ----------------------- | ------------------------------------------------------------------------------------------------ |
| `getHeaders`            | Returns the available Authentication Headers accordingly if the dashboard is public or not.      |
| `openDrawer`            | Embed a url's content in a drawer and displays it.                                               |
| `setDashboardDevices`   | Changes the currently selected device(s) in either multiple or single-device dynamic dashboards. |
| `setDashboardDateRange` | Changes the selected time range in a dashboard.                                                  |
| `setRealTime`           | Turn on or off the dashboard's real time update.                                                 |
| `refreshDashboard`      | Refreshes the dashboard data in all widget.                                                      |
| `setDashboardLayer`     | Navigates to another layer.                                                                      |

### `getHeaders` <a href="#getheaders" id="getheaders"></a>

**Arguments:** None

**Signature:** `ubidots.getHeaders()`

**Return:**

{% tabs %}
{% tab title="Public dashboard" %}

```json
{
  Authorization: "Bearer receivedJWTToken",
  Content-type: "application/json"
}
```

{% endtab %}

{% tab title="Private dashboard" %}

```json
{
  X-Auth-Token: "BBFF-xxyyzz",
  Content-type: "application/json"
}
```

{% endtab %}
{% endtabs %}

### `openDrawer` <a href="#opendrawer" id="opendrawer"></a>

**Arguments:** `options`: `Object` \[mandatory] => An object containing the content's url and the drawer's width in px:

```
{
    url: "https://url.com",
    width: 500 // Read as 500px
}
```

**Signature:**

```
ubidots.openDrawer(
    {
        url: "https://some-url",
        width: <width>
    }
);
```

**Return:** None

### `setDashboardDevices` <a href="#setdashboarddevice" id="setdashboarddevice"></a>

**Arguments:** `deviceIds`: `string` \[Mandatory] ⇒ Comma separated string with the Id's of the devices that you want to set.

```
"<device-1-id>,~<device-2-label>,<...>"
```

**Signature:** `ubidots.setDashboardDevices(<deviceIds>)`

**Return:** None

### `setDashboardDateRange` <a href="#setdashboarddaterange" id="setdashboarddaterange"></a>

**Arguments:** `timeframe`: `Object` \[Mandatory] => An object containing the start and end timestamps:

```
{
    "startTime": 1642282088000,
    "endTime": 1673818088000
}
```

**Signature:** `ubidots.setDashboardDateRange(<timeframe>)`

**Return:** None

### `setRealTime` <a href="#setrealtime" id="setrealtime"></a>

**Arguments:** `rt`: `Bool` \[Mandatory] => A boolean indicating the real time update setting

**Signature:** `ubidots.setRealTime(<rt>)`

**Return:** None

### `refreshDashboard` <a href="#refreshdashboard" id="refreshdashboard"></a>

**Arguments:** None

**Signature:** `ubidots.refreshDashboard()`

**Return:** None

### `setFullScreen` <a href="#setfullscreen" id="setfullscreen"></a>

**Arguments:** `screenSetting`: `string(toggle | enable | disabled)` \[Mandatory] => A string representing the full screen setting.

**Signature:** `ubidots.setFullScreen(<screenSetting>)`

**Return:** None

### `setDashboardLayer` <a href="#setfullscreen" id="setfullscreen"></a>

**Arguments:**

* `layer`: `string` \[Mandatory] ⇒ layer ID or label.
  * Use ID as a plain string: `"6926000dcb198b4d10067b58"`
  * Use label prefixed with `~`: `"~Layer-2"`
* `queryParams`: `Object` \[Optional] ⇒ An object where each key/value pair will be added as a query param.
  * Allowed value types: `string | number | boolean`
  * Arrays are NOT allowed. If you need multiple values, pass a comma-separated string, e.g. `"id1,id2,id3"`