I am not sure how to get this functionality or if this is feasible within a custom html block
In a custom html block, I want a button click to call a javascript function which fetches some json data from an http request and using that json data to construct an html table within javascript and rendered back to the custom html block
Hey @Sreyams_Jain1,
This is certainly feasible with a Custom HTML Block. Because the Custom HTML block lets you use HTML, CSS, and JavaScript, you can write (almost) any JavaScript that you would like!
The way you would do this with the <script> tag in HTML. Then with a button, you can use the onClick HTML Attribute to run a JavaScript function or use the onclick event handler in your JavaScript code.
Then in the JavaScript function, you can use the Fetch API to get data from an API.
Please let me know if this works for you!
Thank you,
Heath
Hi Heath,
This is what I have as a snippet in custom head content
and in the body content …
I am expecting when I click the button, hoping to get into the getJsonData function. It does not seem to get there
something went wrong in the reply …
here is the head content
body { padding: 10px; background: transparent; }and the body …
<input type="button" onclick="getJsonData" value="Click" />
Hi @Sreyams_Jain1,
Thanks for providing me a few snippets. Unfortunately, I’m not able to understand much from just those.
To get JavaScript to run, or to create a JavaScript Function called getJsonData, you will need to use a <script> tag in the Custom Body Content of the Custom HTML Block configuration.
Further, with that small snippet you sent, you will need to reference the function with onclick="getJsonData()".
Please let me know if you have any other questions.
Thank you,
Heath
Looks like script code did not come through well in the reply. I will email you again
Hi Heath,
Head content …
<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;
}
</style>
<script type="text/javascript">
function getJsonData()
{
// want to do the fetch json data from http request and
// build an html table parsing the json data to render back
alert("GetJsonData");
}
</script>
<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, undefined, 2);
getJsonData();
}
/*
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>
Body Content …
<div class="container-fluid">
<form>
<input type="button" onclick="getJsonData" value="Click" />
</form>
</div>
Unfortunately, what you’ve included above didn’t come in well either.
Would you be able to send over something in an index.html file that’s separate from Losant? From there, I’ll be able to help you organize your JavaScript in that file, as well as translate that file into the fields for the Custom HTML Dashboard Block.
Thank you,
Heath
Attached is an html fileindex.zip (447 Bytes)
It looks like your index.html doesn’t have the behavior you’re describing. @Heath recommendation there was to build the functionally you desire outside of Losant in an index.html file. Then, we’d be happy to guide you as to how to get that into the Custom HTML Block.
The resources linked earlier in this post are the best resources if you have troubles building an independent index.html file for this:
The way you would do this with the
<script>tag in HTML. Then with a button, you can use theonClickHTML Attribute to run a JavaScript function or use theonclickevent handler in your JavaScript code.
Then in the JavaScript function, you can use the Fetch API to get data from an API.
In terms of Losant Examples, the best, related example is here:
In the example, the table is being generated from input.queries.cost. To solve this problem, you would have to update the Javascript, to do what you desire.
In the index.html file, within the javascript getJsonData, is the actual functionality of http request and building the html table is what I know how to do. For now, pending that code, I just need to see how this can be integrated in a custom HTML block. Once the interface hook works, I can develop the code I need to get json data and build html table.
Am I missing something here
Hey @Sreyams_Jain1,
Because your page is loading data on a button press, you should just be able to copy your index.html (with everything working) in the body and have the HTML/CSS/JavaScript be rendered.
Furthermore,
I just need to see how this can be integrated in a custom HTML block.
Our Custom HTML Block Documentation has some information on what content goes where in the Custom HTML Block Configuration.
Once you have built your queries, you can provide Losant with the custom HTML, CSS, and JavaScript to use to create your block. This is split into a “Custom Head Content” section (which is where you should place any content you would normally place in the
headsection of an HTML document), and a “Custom Body Content” section (where you should place any content you would normally place in thebodysection of an HTML document).
This documentation also includes some example content for both Head Content and Body Content. W3 Schools has a great resource on where you can put JavaScript in an HTML file. In short, you can put it in either the Head Content or the Body Content.
Please let me know if you have any more questions.
Thank you,
Heath
Thanks Heath for supporting on this. I will work this way and get back to you.
