This post provides an overview for how to get data from a Workflow and into an Experience Page. I would first recommend reading the How Experiences Work section in the docs to get a high-level understanding of experiences.
When an Endpoint is requested by a browser, it will invoke a workflow using the Endpoint Trigger. This workflow can then use any number of nodes to perform necessary actions or query any required data. The Endpoint Reply Node is then used to reply to the original request, usually involving data that the workflow has added to the payload.
One of the ways you can reply is with an Experience Page. This option takes data from your payload and passes it into an Experience Page. The contents of that page will include templates, which control how to actually display the data that was passed in. These templates are all rendered by Losant’s servers and the final HTML is sent back to the user’s browser to be displayed.
Let’s look at an example. Here’s an Experience Page that shows a random number each time it’s displayed. The random number is generated using a workflow.
Here’s a screenshot of my experience so you can see the endpoint, workflow, and page:
Here is the contents of the custom page:
This page contains single template, {{pageData.random}}, which is rendering the value of random that’s being provided by the workflow. If we look at the workflow, we can see how it provided this data to the page:
In this workflow, the Random Number Node is generating a number between 0-100 and putting it on the workflow at working.random. You can put the data anywhere you want, but I’ve adopted a best practice of using a working top-level object for any data my workflow adds to the payload. This keeps the data object that originally triggered the workflow unaltered.
The Endpoint Reply Node is then configured to reply with an experience page. When replying with a page, you can optionally pass that page some data from your payload. In this example, I’ve configured the node to send the entire object stored at the working payload path.
Any data that’s available for the page to render is called the page’s “context”. Losant automatically adds useful information to the context, like the details about the HTTP request itself (e.g. header, query parameters, etc.). Custom data that your workflow adds is made available on the context at pageData. You can see the entire context in the render log.
Let’s add some more data to the payload to see how this expands. A very common use case for an experience page is to display details about a specific device. This example accepts a device query parameter (i.e. /hello?device=my-device-id) and will render the name, model, and serial of that device.
As you can see in the screenshot above, pageData now has the original random number and a full Losant device object. Here’s the new workflow:
The only addition to this workflow is the Device: Get Node. It’s taking the device ID provided by the user through the device query parameter and finding the matching Losant device. It then places the result back on the payload at working.device.
Since the endpoint reply node is already sending the entire working object, which now contains the random number and the device object, both of these are now available in the page’s context.