How to pass ctx variable inside the HTML Block in a Dashboard

Hello,

I am trying to pass a context variable into a dashboard and into an HTML block of dashboard, as you can see in the screenshot attached, I can get my ctx variable in the title of my HTML Block but cant pass inside the HTML Block.

Thanks in advance!

@CHAIMAA_DRIOUECH,

While we do not support templating in the head or body of the custom HTML block, you can get context in the object passed into javascript.

Take a look at the docs around HTML configuration: https://docs.losant.com/dashboards/custom-html/#html-configuration

Specifically, you want to take a look at the section around the DashboardBlock global.

Within the context of your page, there will be a global JavaScript object called DashboardBlock available. It exposes several events that can be subscribed to from your custom JavaScript in order to receive your query data (among other things).

You can subscribe to events using the following syntax: DashboardBlock.on(‘eventName’, myCustomFunction) . All events are emitted on the initial block load and then again whenever the specific action occurs.

Hopefully this info helps get you to a solution.

Thanks,
@Aidan_Zebertavage

Hi Aidan,

Thanks for your response, can you provide other examples than the Google Charts in the link sent above.

Thanks again!

Hi @anaptfox,

I was hoping you can also help on this one, I have a HTML Block that I am using to display snapshots that I have stored in AWS S3, in order to display this information on my vibration sensor dashboard, I will need the serial number of my sensor which also is a context variable that I am allowed to display on my Dashboard blocks titles but can’t have it inside my HTML block precisely in the javascript code, The screenshots attached shows the snapshot section of my dashboard, you can see the HTML Block giving the user ability to select 2 dates and then click on the button “Show Snapshot”.

Hope you can give us advise on any approach that could help us get the serial number inside the HTML Block javascript code in order to get our snapshots related to the sensor in question.

PS: we have used before a workflow to include information such as Serial Number in our pages using the code below, but I am not sure if it is something that can help us

use it in my HTML Block javascript code.

{{#fillSection “metaDescription”}}This is a login page for Machine Saver I/O Machine Monitoring Application.{{/fillSection}}

Select Vibration Sensor Vibration Sensor {{#each pageData.vibrationSensors}} {{name}} {{/each}}
Select Impact Sensor Impact Sensor {{#each pageData.impactSensors}} {{name}} {{/each}}
Assign Sensor to Machine {{element 'dashboard' dashboardId="5c9e5903d9882500089baf80" ctx=(obj associatedMachine=(obj key=pageData.key value=pageData.value) machineId=pageData.machineId)}}

@CHAIMAA_DRIOUECH,

In your above post, you have some templating. But, unfortunately, templating is not supported in the Custom HTML Block.

From what it seems like, the feature you’re describing would be a better fit as an Experience Page.

Here is a great walkthrough to get you up to speed: https://docs.losant.com/experiences/walkthrough/views/overview/

Also, there is a full course on Experiences in Losant University.