Help sending device ID though Custom HTML Block

Help
1

Good morning. I am contacting you to see if you can help me with sending data from a dashboard to workflows via webhook (or endpoint).

Specifically, my idea is a Custom HTML block that allows you to download data in CSV from a device through the Losant API node, using the Data:Export option. The part related to the Losant node is solved.

My Custom HTML block looks like this:

image
image831Ă—382 5.38 KB

I have no problem in selecting start date and end date in relation to when the data should be downloaded, as well as the email where this data should be sent to. My problem comes at the time of indicating the device Id in its corresponding box (Current Device dropdown option should have assigned the value of the deviceID the dashboard is currently showing, due to the deviceID is a ctx variable). I attach a screenshot in relation to the HTML code where I think it will be better understood what my problem is.

image
image1423Ă—505 52.9 KB

I have been playing with the Custom HTML block and the code that comes by default, and the maximum that I have obtained is that the content of the JSON appears on the screen. However, I have been unable to send the id of this JSON content through HTML using:

<option value="EXTRACT IN SOME WAY THE ID OF THE JSON">Current Device</option>.

image
image1390Ă—435 47.1 KB

My problem, in conclusion, is to know how to extract from the dashboard context the id of the current device (the one being queried) and put this value in the “value” field of an HTML element, in order to send it through a webhook.

The code that I’m using right now in the Custom HTML Block is:

<meta charset="UTF-8">
<!--
You can include any external JavaScript or CSS as needed.
This example demonstrates including Bootstrap and JQuery
into your custom HTML page.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
  body {
    padding: 10px;
    background: transparent;
  }

  div{
    text-align: center
  }
</style>

<script type="text/javascript">
  /*
    Renders the block input to the page.
    This function is simply printing the raw data to the page
    for debugging purposes.
  */
  function renderBlock(input) {
    document.getElementById('blockInput').innerHTML =
      JSON.stringify(input.ctx, undefined, 2);
  }

  /*
    Add listeners to your required events. These listeners invoke
    the functions above so that your code can handle the event
    as needed.
  */
  DashboardBlock.on('change', renderBlock);

  /*
    Render the initial state when the block loads.
  */
  $(document).ready(function() {
    renderBlock(DashboardBlock.input);
  });
</script>

and

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <form action="https://triggers.losant.com/webhooks/xTN5VtSfrjMWM5-YpxHqQ-f69FJFc99eifvbXXFq" method="post">
        <div> Select start day: 
        <input class="input-group date" type="date" id="start" name="date-start">
       </div><br>
        <div> Select end day: 
        <input class="input-group date" type="date" id="end" name="date-end">
        </div><br>
        <label> Select device:</label>
        <select class="form-control" name="numberDevices">

          <option value = "0">Current Device</option>
          <option value="1">All Devices</option>

        </select><br>

        <label id="blockInput"></label>

        
        

        <div>
        <label for="email">Email address:</label>
        <input type="email" class="form-control" name="email" id="email"
                  placeholder="e.g. test.user@example.com">
        </div><br>

      <button type="submit" class="btn btn-success pull-right">Download CSV File</button>
    
    </form>
    </div>
  </div>
</div>

Finally, the idea is sending this data using a Webhook so the received body will be:

image

where numberDevices would be the ID of the device so you can use it as an input in the Losant API node.

Any help would be greatly appreciated. Thanks in advance, greetings

2

Hello @IoT_Hub,

First, to answer your question, the way to get the value of the device id to be set you’ll need to add an id value to the option you’re looking to set the value of, and then in your header content, you’ll need to set the value of that id to the value of the device.

Here’s the new renderBlock function:

  function renderBlock(input) {
    document.getElementById('blockInput').innerHTML =
      JSON.stringify(input.ctx, undefined, 2);
    document.getElementById('currentDevice').value = input.ctx.device;
  }

And your new select section looks like:

<select class="form-control" name="numberDevices">
    <option id="currentDevice" value="">Current Device</option>
    <option value="1">All Devices</option>
</select>

Then when you submit your form, your webhook workflow should look like this:

image

That being said, you may be able to accomplish this much easier with an Input Control Block. You can have the submit button trigger a workflow via a Virtual Button and send the form data that way. You may, though, need to write some input validation for the form fields.

By using a webhook without any authentication, you are also creating a case where anyone with the link can make requests to that webhook, so the Input Control path may be the safer path, as well.

Let me know if this works for you or if you need any more explanation on anything.

Thank you,
Heath

1 Like
3

Hi Heath, thank you very much for your detailed reply. Finally, by making a series of small changes and understanding your code I have been able to send the whole content of the dashboard context instead of just the ID, but by making use of the JSON:Decode node from the workflow I have been able to extract the ID, so that problem is solved. Thanks again.

Regarding the second part of your comment, at first I tried to use an Endpoint, so that the Submit button will send the data via an HTTP POST request. The problem is that, even though the user was logged in and had permissions, I got an Authorization Required message inside the Custom HTML block, since the block itself had no credentials (it is in a way an external element to the context of the rest of the dashboard), so I decided to use a Webhook, easier to implement.

Regarding the second alternative, using an Input Control Block, as far as I know and correct me if I am wrong, it only allows you to select the predefined elements (Range Slider, Toggle Switch, Text Input…). In my case, it is essential for my application to have an element of type “<input class=“input-group date””, that is to say, a calendar from which to select dates, and I believe that it is impossible to do it from an Input Control Block (the alternative would be that the user enters the dates by hand from a Text Input, but the requirements of my application don’t allow that).

As a suggestion, it would be interesting to introduce an element that would allow you to put HTML code in the Input Control Block, so that you can execute a workflow through a button, as the Input Control Block allows now, but with more customized fields, as in my case is a calendar.

Thank you very much for your attention and quick response.