[Solved] Dynamically change block styles/themes from within a workflow?

Help
1

Hello,

Forgive me as I am naive when it comes to HTML and CSS. I am asking this question from a “can it be done in Losant” standpoint to get me started. I would like to be able to dynamically change the cell color in Device State Table from a workflow.

So for example if I had a table displaying the outside temperature I would want the cell color to be green if the temperature were below or equal to 85 degrees Fahrenheit and red if above 85 degrees Fahrenheit.

I know that markdown isn’t capable of doing this and the only way I see this being done is through Experience Views unless there is something I am missing? Can this be done dynamically as described above?

Thanks,

Derek

2

The first step is to put the temperature on the payload using the workflow. How you get the data on the payload is up to you and where the data is coming from. If it’s from a device, a Gauge Query Node can get the most recent data point. If it’s from a weather API, you might use the HTTP Node.

For the rest of this example, I’ll assume the outside temperature is on the payload at working.outsideTemp.

Then, in the Experience Page, you can use a template to check the temperature and render the appropriate background color based on the value:

<table>
  <tr>
    <td>Temperature</td>
    <td style="background-color:{{#lte pageData.working.outsideTemp 85}}#00FF00{{else}}#FF0000{{/lte}};">{{pageData.outsideTemp}}</td>
  </tr>
</table>

The #lte handlebar helper checks if a value is “less than or equal to”. You can see a list of our helpers in our documentation.

3

Brandon,

Thanks for the info! This should be enough to get me started.

Derek