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

**URL:** <https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057>\
**Category:** Help\
**Tags:** experience, dashboard, device\
**Created:** [June 18, 2020, 5:49pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057 "2020-06-18T17:49:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![CHAIMAA\_DRIOUECH](https://avatars.discourse-cdn.com/v4/letter/c/ce73a5/32.png) [@CHAIMAA\_DRIOUECH](https://forums.losant.com/u/CHAIMAA_DRIOUECH)\
**Post date:** [June 18, 2020, 5:49pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/1 "2020-06-18T17:49:59Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/7/7f96949bd442a0f765d15871f2824e5d9fda598d.jpeg)

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Aidan\_Zebertavage](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/aidan_zebertavage/32/2719_2.png) [@Aidan\_Zebertavage](https://forums.losant.com/u/Aidan_Zebertavage)\
**Post date:** [June 18, 2020, 7:09pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/3 "2020-06-18T19:09:48Z")

</div>

@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](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

---

<div class="post-metadata">

**Author:** ![CHAIMAA\_DRIOUECH](https://avatars.discourse-cdn.com/v4/letter/c/ce73a5/32.png) [@CHAIMAA\_DRIOUECH](https://forums.losant.com/u/CHAIMAA_DRIOUECH)\
**Post date:** [June 22, 2020, 2:45pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/5 "2020-06-22T14:45:09Z")

</div>

Hi Aidan,

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

Thanks again!

---

<div class="post-metadata">

**Author:** ![CHAIMAA\_DRIOUECH](https://avatars.discourse-cdn.com/v4/letter/c/ce73a5/32.png) [@CHAIMAA\_DRIOUECH](https://forums.losant.com/u/CHAIMAA_DRIOUECH)\
**Post date:** [June 23, 2020, 4:13pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/10 "2020-06-23T16:13:13Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/b/b8ce325423747471b56492805d99f8dacc2cd3c3.png) 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)}}

---

<div class="post-metadata">

**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\
**Post date:** [June 24, 2020, 1:59pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/15 "2020-06-24T13:59:07Z")

</div>

@CHAIMAA_DRIOUECH,

In your above post, you have some templating. But, unfortunately, templating is not supported in the [Custom HTML Block](https://docs.losant.com/dashboards/custom-html/).

From what it seems like, the feature you’re describing would be a better fit as an [Experience Page](https://docs.losant.com/experiences/views/).

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

Also, there is a full course on Experiences in [Losant University](https://www.losant.com/university).

---

<div class="post-metadata">

**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [September 29, 2020, 7:10pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/16 "2020-09-29T19:10:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Heath](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/heath/32/3036_2.png) [@Heath](https://forums.losant.com/u/Heath)\
**Post date:** [September 30, 2020, 2:45pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/18 "2020-09-30T14:45:56Z")

</div>

@Lars_Andersson,

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

[Our documentation](https://docs.losant.com/dashboards/custom-html/), 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

---

<div class="post-metadata">

**Author:** ![Jules\_Huguenin](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/jules_huguenin/32/4031_2.png) [@Jules\_Huguenin](https://forums.losant.com/u/Jules_Huguenin)\
**Post date:** [October 4, 2020, 8:58pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/20 "2020-10-04T20:58:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\
**Post date:** [October 13, 2020, 3:21pm UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/23 "2020-10-13T15:21:40Z")

</div>

Jules, how did you do that exactly?

---

<div class="post-metadata">

**Author:** ![Jules\_Huguenin](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/jules_huguenin/32/4031_2.png) [@Jules\_Huguenin](https://forums.losant.com/u/Jules_Huguenin)\
**Post date:** [October 19, 2020, 3:45am UTC](https://forums.losant.com/t/how-to-pass-ctx-variable-inside-the-html-block-in-a-dashboard/3057/26 "2020-10-19T03:45:05Z")

</div>

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);
