Navigation through Dashboard

This example uses HTML Canvas newest feature "Preload dashboard data" to easily implement navigation through dashboards.

A drop-down menu will display all of the Dashboards present in the Ubidots account, upon selecting one, said dashboard will be opened in a new browser tab.

HTML:

<div>
    <h1>Navigate through your Dashboards</h1>
    <select id="dashboardsList"></select>
</div>

Javascript:

var token = ubidots.token;
const dashboardsDropdown = document.getElementById('dashboardsList');
dashboardsDropdown.addEventListener('change', handleSelectionChange);

getAllDashboards(token).then((data) =>
{
    // Iterate over the data and create options
    const dropdown = document.getElementById('dashboardsList');
    data.results.forEach(item => 
    {
        const option = document.createElement('option');
        option.value = item.id; // Adjust the value according to your data
        option.text = item.label; // Adjust the displayed text according to your data
        option.label = item.label;
        dropdown.appendChild(option);
    });
});

function handleSelectionChange() 
{
    const dashboardID = this.value; // Get the selected value
    const url = `https://industrial.ubidots.com/app/dashboards/${dashboardID}`;
    window.open(url, '_blank');
   
}

async function getAllDashboards(ubidotsToken)
{
    const url = "https://industrial.api.ubidots.com/api/v2.0/dashboards/";
    const method = "GET";
    const req = await fetchWrapper(url, method, ubidotsToken);
    return req;
}

async function fetchWrapper(url, method, token = null, payload = null)
{
	const options =
	{
    	method: method,
		headers: {'Content-Type' : 'application/json'}
	};

	if (payload)
	{
    	options.body = JSON.stringify(payload);
  	}

  	if (token)
	{
    	options.headers['X-Auth-Token'] = token;
  	}

	const response = await fetch(url, options);
	const jsonData = await response.json();
	return jsonData;
}

The following is the resulting Widget: