# \[SOLVED\] Customize Blocks code/using string template

**URL:** https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385
**Category:** Feature Request
**Created:** [January 25, 2017, 2:45am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385 "2017-01-25T02:45:48Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 25, 2017, 2:45am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/1 "2017-01-25T02:45:49Z")

</div>

Is there a way to add my own blocks or customize the code for the behaviours of some of the blocks I use?

I want a block similar that of the heatmap, but everytime a device reports a particular value of an attribute, make a popup or change the colour of the spot on the heatmap until the attribute is no longer that value.

_Eg. Device 1’s temperature is now below 10 degrees C so change the colour of that device’s spot on the map to blue._

Cheers.👹

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 25, 2017, 1:40pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/2 "2017-01-25T13:40:37Z")

</div>

There’s currently not a way to customize the heatmap block, but the [GPS history](https://docs.losant.com/dashboards/gps-history/) block can be used in this way. You can change the icon of the markers based on the value of an attribute.

Changing heatmap color is a cool idea. We’ll investigate adding the ability to change the color of the heatmap based on state data.

We do also provide the [external website](https://docs.losant.com/dashboards/external-website/) block, which allows you to host any custom visualization in an iframe. We use [Mapbox](https://www.mapbox.com/) for our maps, so you could implement the visualization directly until a customization from us is available.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 25, 2017, 11:24pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/3 "2017-01-25T23:24:45Z")

</div>

I looked into using the GPS history Block and it is close to what I am looking for. However, is there a way to display the attributes of my device in the popup rather than the Handlebar variables?  
I can’t seem to access my temperature value. Is this not possible?

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/4df3d1c31ba3c863248adae0d103f404b828d023.JPG)

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/a9c7337160271f309c7341cf0ea15360d9efb42b.JPG)

Cheers

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 25, 2017, 11:34pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/4 "2017-01-25T23:34:05Z")

</div>

Looks like you just need to remove `body` from the handlebar variable. Change `{{ data.body.temperature }}` to `{{ data.temperature }}`.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 26, 2017, 12:03am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/5 "2017-01-26T00:03:12Z")

</div>

That doesn’t seem to do anything.

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/63fa7ac877e513e56aee8b54c76f47171f03ee5d.JPG)

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/c1d6a011f8376f3952f2365e7b5728e7e35c0588.JPG)

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 26, 2017, 12:24am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/6 "2017-01-26T00:24:20Z")

</div>

The underlying issue is that the temperature attribute was not reported at the same time as the location. The history map works by placing a point for every state payload that includes location information. The popup can then be customized to show other attribute data included on that same payload.

It appears as though your devices are reporting temperature and location separately, which means there’s no other data available on the payloads that have the location data.

There are two work-arounds:

1. Have the device report temperature every time it reports location so that they are both together in the same payload.
2. In the workflow that’s handling the location information, you can grab the most recent temperature using the [gauge query](https://docs.losant.com/workflows/data/gauge-query/) node and simply report the same temperature again in the device state node you’re already using to report location.

Both of these options will solve the primary goal, which is to get location and temperature reporting on the same payload.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 26, 2017, 1:13am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/7 "2017-01-26T01:13:02Z")

</div>

I’m having some trouble setting up the gauge query node. The payload path I made doesn’t appear.  
Even if I use a pre-defined path such as _data.query_, it still doesn’t work. What is it that I’m doing wrong?

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/46a52717a0ed96c7b5af8ec97fc5c0ed49372e40.JPG)

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/73225723f09bad7324db252926b9eadefe86fa17.JPG)

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/eedcecfa2741c5156301639fbc343313fe381051.JPG)

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 26, 2017, 2:08am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/8 "2017-01-26T02:08:39Z")

</div>

OK I got the node working but I can’t access it through the popup template?

More images! 😅:  
 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/5d6bb4870c87d8a5b885cb34274fb788cb348619.JPG)

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/ce063bf33099b7e8d820129b51fc7d1bc86df30d.JPG)

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 26, 2017, 2:15am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/9 "2017-01-26T02:15:54Z")

</div>

Now that you have it available on the workflow payload, you’ll need to use a device state node to record the value on the device itself. You likely already have a device state node that is recording location. You can just add another entry on that node to save data.tempA.value onto the temperature attribute on the device.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 26, 2017, 2:37am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/10 "2017-01-26T02:37:24Z")

</div>

OK so I’ve added tempA and tempE attributes to my devices and then _after_ configuring the gauge query, I’ve set the device state node and set the attribute states to {{data.tempA}} and {{data.tempE}}.  
But I’m still not getting any temperature values on the pop up.  
I’ll wait another 30min (since GPS only reports in every hour).

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 26, 2017, 4:24pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/11 "2017-01-26T16:24:01Z")

</div>

Now that it’s reported a few times, have you had success getting those values on the popup?

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 26, 2017, 9:21pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/12 "2017-01-26T21:21:44Z")

</div>

No luck unfortunately. 😕

When the GPS reports in every hour this is the payload:

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/5d1798a73f470f72aeefe278d2550cb9564d0519.JPG)

But the block doesn’t show the temperature value.

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/3b035dddf85a3266b4b3a07e0d2b8bb44afde7d7.JPG)

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [January 27, 2017, 3:47am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/13 "2017-01-27T03:47:59Z")

</div>

The workflow payload and the variables available in the GPS block are different things. Workflows can be triggered by all sorts of things, even unrelated to devices. In your example, it’s being triggered by a webhook, so the workflow payload is whatever was sent over the webhook.

The GPS block pulls data from the device state. The variables available in the GPS block are always the [attributes](https://docs.losant.com/devices/state/#state-attributes) of a device (i.e. `data.<attribute-name>`). In order to get values from the workflow payload onto a device, they must first be recorded using the [device state](https://docs.losant.com/workflows/outputs/device-state/) node.

The root issue is this workflow is being invoked with temperature and location separately, so the attributes are being recorded to the device at separate times. So when the GPS history block displays a location point, there is simply no temperature data at that moment in time available to display.

In the above screenshot, it also looks like you’re using a gauge query to grab the previous temperature on every webhook, even if the payload includes a new temperature. You’ll need a conditional to check if the payload includes location, and if does, only then get the previous temperature. Then you need to record both location and temperature at the same time using a device state node.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [January 30, 2017, 8:12am UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/14 "2017-01-30T08:12:24Z")

</div>

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/7d8e84c781c35a8888ab4cd0ee83d675812a0c27.JPG)

Ok I’ve changed my workflow so it:

1. checks to see if payload contains temperature or location
2. If its location then create a gauge query to grab the last temperature from the device
3. Set the device state for the device which reported in (I have 2 devices, deviceA and deviceE, monitoring the temperature of 2 different environments. Which is why I need the _‘is device…’_ conditional nodes so that the correct device state can be updated).

Again my payload shows the correct data but I can’t access it in the blocks.

The problem may be that the other device attributes aren’t in _‘block’_ format:  
i.e. Attributes like ‘temperature’ and ‘lat’/‘long’ are _variables_, but tempA and tempE have become _blocks_ where the gauge query node created the ‘time’ and ‘value’ variables. I don’t know how to use Handlebars to access the _value_ variable in the tempA/E attributes, in the dashboard blocks.

---

<div class="post-metadata">

### Author: ![Shaika\_Khan](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Shaika\_Khan](https://forums.losant.com/u/Shaika_Khan)
#### Post date: [February 9, 2017, 9:55pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/15 "2017-02-09T21:55:13Z")

</div>

Still not seeing the temperature on the GPS history block popup.

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/934308023d7985579a546b28efd3f0603a1da6a7.JPG)  
I’ve used store value and get value nodes and now the attributes tempE and tempA are appearing in the payload.

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/a1741f011fb166b2502b02686f21063390a5fe94.JPG)  
Have I written my handlebar code correctly?

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/a7938e0f332116f24a5936d5050ee0183493b347.JPG)

---

<div class="post-metadata">

### Author: ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)
#### Post date: [February 9, 2017, 10:39pm UTC](https://forums.losant.com/t/solved-customize-blocks-code-using-string-template/385/16 "2017-02-09T22:39:06Z")

</div>

I checked out your workflow. The issue is that you’re using `data.temperature` instead of `data.body.temperature` in the two Store Value nodes. This means nothing is being saved since `data.temperature` doesn’t exist on the current workflow payload. Then later when location is reported and it uses Get Value, there’s nothing there. You can view/debug current values using the “Storage” tab on the bottom right (some values are auto-generated by our nodes, so you may see some values that you didn’t create, but those can be ignored).
