> For the complete documentation index, see [llms.txt](https://dev.ubidots.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.ubidots.com/dashboards-and-widgets/html-canvas/preload-dashboard-data.md).

# Preload dashboard data

This feature makes the dashboard data available for the user at load time.

## Overview

This consists of a toggle button that, when enabled, changes the widget logic so dashboard data is preloaded and available as the dashboard loads.

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2F2E1LOND0qnwMqOc4b05v%2Fimage.png?alt=media&amp;token=edd397db-b3c0-4670-b86a-ae66aaeb1e37" alt=""><figcaption></figcaption></figure>

Before this feature was added, users could only retrieve data from the Ubidots class by listening for an event and reading the required variable inside the callback.

For example, if you wanted to get your Ubidots token and the ID of the currently selected device, you could do it as follows:

```javascript
var ubidots = new Ubidots();

ubidots.on('ready', async function () 
{
	token = ubidots.token;	
	deviceID = ubidots.selectedDevice;		
});
```

However, this requires advanced JavaScript knowledge and familiarity with custom Ubidots events.

With **Preload dashboard data** enabled, you can access the same values directly:

```javascript
token = ubidots.token;	
deviceID = ubidots.selectedDevice;
```

There is no need to instantiate the Ubidots class, since an instance already exists.

{% hint style="danger" %}
By enabling this feature, the `ready` event shown above is no longer available.
{% endhint %}

## Class properties when *Preload dashboard data* is disabled

When *Preload dashboard data* is disabled, some class properties may appear as `undefined`. This happens because the class instance has not yet received their values. Consider the following code snippet:

```javascript
const ubidots = new Ubidots();

console.log(ubidots.token);
ubidots.on('receivedToken', function (token) {
    console.log(token);
    console.log(ubidots.token);
})
```

Although `ubidots.token` is valid syntax and the `Ubidots` class includes that property, the first `console.log` prints `undefined`. The other two print the token correctly because the property is only available after the event sets its value.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://dev.ubidots.com/dashboards-and-widgets/html-canvas/preload-dashboard-data.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
