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:
