How to use the IoT experience template

Hi, I am struggling to understand how the default IoT experience template works regarding interacting between dashboards and experience pages. I want to trigger an experience page to launch upon button click inside of a dashboard, I also want to pass a device ID in this process so the context variable of the new dashboard has the device ID that was sent initially, what is the best approach for this?

I have attempted to setup a custom endpoint and associated workflow which is triggered by an onClick() event on my dashboard button. The onClick() function uses a fetch() POST request to trigger the endpoint. The associated workflow then responds with an experience page. However, when I do this, I find the block attempts to load the experience page inside the block container and not the whole page, but also the page does not appear to load.

I am fairly new to Losant so I apologise for any obvious errors in my approach or if I have not given enough context to the problem, please let me know if so.

I have included my code for the endpoint function for my dashboard button for context:

function triggerEndpoint(deviceID) {
    // trigger endpoint workflow
    const url = "MY_ENDPOINT_URL";
    fetch(url, {
      method: "POST",
      body: JSON.stringify({
        Device_ID: deviceID
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then(response => response.text()) // Assuming the response is an HTML page
      .then(html => {
        document.body.innerHTML = html; // Render the HTML in the web page
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

So you’re making an asynchronous POST request, but your goal is simply to navigate to a different dashboard? Why not make it a GET request, define a path parameter in the endpoint for the device ID, and use a good old-fashioned HTML anchor tag, with a target that will change the top window? You can include the deviceId in the path and use that as the setter for the context variable.

<a href="MY_ENDPOINT_URL/{{deviceId}}" target="_parent">Change Device</a>

You can find more information about using the device ID path parameter as a context variable setting here.

1 Like

Thank you Dylan, this worked perfectly.