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

Help
, ,
1

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.

snapshot_html_ctx
snapshot_html_ctx1316×429 24.2 KB

Thanks in advance!

3

@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

5

Hi Aidan,

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

Thanks again!

10

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

snapshot-show
snapshot-show1310×491 4.7 KB
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)}}
15

@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.

16

Can you show an example of what I need to define in the header to be able to show a ctx.variablename’s value in the body of a custom html block?

1 Like
18

@Lars_Andersson,

There is nothing additional that you need to add to the head section of the Custom HTML block

Our documentation, though, explains that you can access Context Variables with DashboardBlock.ctx.<variableName>. The way in which you utilize this value is totally up to you!

You can also use console.log(DashboardBlock) to see all that is available to you when using the Custom HTML Block.

Thank you,
Heath

1 Like
20

Thanks @Heath, despite reading the doc I was looking for a solution too.
In my case I had to use DashboardBlock.input.ctx.<variableName> in order to display the context variable.

23

Jules, how did you do that exactly?

26

Hi Lars,
Using a custom HTML block, I retrieve the device ID using javascript:

var propertyName = “deviceId-0”;
var deviceId = DashboardBlock.input.ctx[propertyName];
$(‘#deviceId’).val(deviceId);