{{element}} helper and Passing Data to Dashboard for Experience User Views

After switching over from a dashboard page type to a custom page type with a element helper calling the dashboard, I cannot get devices to show up when I log in as an experience user. Can I get someone to review the way I have set it up below (based on the documentation at https://docs.losant.com/experiences/views/#element-helpers).

Current settings for the Gateways Page (using element helper for the dashboard and the context):


Using the context within the Device List Block on the dashboard itself:

A Device that should meet these parameters and therefore show up on the Device List Block:

The Experience User that is visiting the Gateway Page:

No device shows up on the Device List Block when this user is on the page:

1 Like

Hi @Leo_Bach1,

I am looking into this now and will get back to your shortly with a solution!

Thanks,
Julia

1 Like

Also, before we get too far down this road, can you please confirm that the {{element}} dashboards can take multiple pieces of context and not just one… this becomes very important as I move further into the user experience flow. I will need to pass some dashboards 3 to 4 pieces of context at once based on the tags of the user that is logged in, the device they have selected from a previous dashboard, and some information about the tags on the device that is being viewed within the dashboard.

Hi Leo,

I just tested with two context variables and both were displayed, so you should have no problem with three or four! It looks like the problem you are seeing is due to the quotation marks around your pageData key and value pair. I tried it a few ways just to be sure, but pageData values are referenced without quotation marks, while string values keep them. For example, I have a dashboard with two blocks and two context variables, one block is an indicator displaying a context string (string=before), and the other block is a device list that is filtered by context tag companyName. Device A’s companyName is bmw, and Device B is mercedes. My dashboard is set up like so to begin with:


My workflow’s Custom pageData holds key, value, and string:

Over in my experience page, I reference my pageData values like so:

{{element 'dashboard' dashboardId="5ced42b340db32000804f7c1" ctx=(obj companyName=(obj key=pageData.key value=pageData.value) string=pageData.string )}}
///key=companyName, value=mercedes, string=after

This line gives me my correct dashboard, yippee! The context variables are all correct, and the values have changed from my original dashboard. I now see Device B, which is tagged with mercedes, and my string value of “after”.


This approach is ideal if all of your data is in pageData, but if you would like to directly pass in a strings as context variables, you can do as follows:

{{element 'dashboard' dashboardId="5ced42b340db32000804f7c1" ctx=(obj companyName=(obj key="companyName" value="mercedes") string="after" )}}

And my experience page looks exactly like the previous!

Please let me know if I can help further, or if anything is unclear :smiley:
Thanks,
Julia

This is working great!
Example 1 now works:

Example 2 still working on:

Is the full deviceId information added in context when using the element helper with a deviceId?
Example:

Ignore the questions for now… there is a bit on deviceId context in the {{element}} helper documentation

Here I will need to pass in 2 different dashboards to a page using the {{element}} helper… I don’t imagine this will be an issue, I will simply call 2 instances of the helper within the HTML.

But can you give me an example syntax for calling a deviceId context variable using the {{element}} helper (instead of the string context variable perhaps)?

1 Like

Hi @Leo_Bach1,

Yes, the full deviceId information is included with the helper. I made another example with the deviceId. I have created an additional dashboard for Device Details that has one dashboard block and one context variable. My DeviceID context variable is checked to include full device information, so I am showing both id and name in my indicator block:


Back on my original “Context Dashboard” with the two blocks, I change my Device List block to link to a new page where I can see the details of my selected device:

I then create the new “Device Details” page with the element helper set with the correct context variables:

Lastly, I create a new workflow to display the /device/{{ deviceId }} page, and pass deviceId in the Custom Page Data.


Now, if I click the link attached to my device, I will be taken to my new “Device Details” page with that device’s information on it!


Let me know how else I can help!
Julia

1 Like

Do you have an opportunity for a 10-15 minute skype call today?
I am very close to success (I believe) but need help understanding the reply end nodes and some strange behavior I am seeing when using them to show errors to my experience users.

Hi Leo,

Unfortunately I am unable to do Skype support, but I will look into your experience shortly and see if anything looks amiss. In the meantime I would recommend checking out the resources here and here.

Also, do you have any questions that the docs are not answering?

Thanks!
Julia

Thanks. I have what seems like 2 main speed bumps remaining:

1st: When using an Endpoint Reply to send custom pageData to set off an error to my user the dashboard uses default context, I would like to set off this error but still have the user provided context from before.

Here is the user page when the experience user’s companyName context is passed in upon visiting the /gateways page:

I purposefully enter a bad serial number and click the claim gateway button to see that my user gets the errors that nudge them in the right direction as to what to do next:

The Error shows up as expected (red bar nudging user to check his serial number).
The context that was the device owned by his companyName has now reverted to the default context.

I imagine that the problem is how I am responding with custom pageData from my workflow:


How could I add this same error but also pass in the context from the user that is accessing the page?

2nd: Using one deviceId and two deviceTags passed as context into a {{element}} helper.

The first device Tag (which holds the value of the experience user’s companyName):

The second device Tag (which holds the value of the deviceId that was selected from the /gateways endpoint):

The deviceId which was selected from the /gateways page:

Is it possible to set up two deviceTags as context in the {{element}} helper?
I tried to do it this several different ways but can’t seem to get it correct:

Hi @Leo_Bach1,

You are correct! You will need to include the values you would like to access with pageData in the Custom Page Data JSON Template. You would do so by referencing the values on the payload that you need to access in your experience. For example, when I log in and go to the /gateways page, it will trigger the workflow, allowing me to see the debug log and locate the variables needed. If you need a user’s company name, you could pass it in the Page Data Template like so:

Then, in your experience, you can reference that variable as {{pageData.companyName}}.

Your second problem is most likely stemming from the location of the deviceId. When the “include full device info in context” box is checked, rendering the value of the context variable requires referencing the properties of the object returned in the context (documentation). Thus, value=pageData.deviceId is referencing an object, the correct way to reference the ID would be value=pageData.deviceId.id. You also have an extra ctx=, so the correct string would be:

{{element 'dashboard' dashboardId="xxxxx" ctx=(obj companyName=(obj key="companyName" value=pageData.experience.user.userTags.companyName) associatedGateway=(obj key="associatedGateway" value=pageData.deviceId.id) deviceId=pageData.deviceId.id) }}

Let me know if anything is unclear, or if you have more questions!

Thanks,
Julia

1 Like

Awesome responses! Thanks for great support, as always. I will work on implementing them now. :+1:

1 Like