# Custom html block calling javascript function

**URL:** <https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415>\
**Category:** Help\
**Tags:** dashboard\
**Created:** [November 19, 2020, 8:01pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415 "2020-11-19T20:01:28Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 8:01pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/1 "2020-11-19T20:01:28Z")

</div>

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

---

<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:** [November 19, 2020, 8:34pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/3 "2020-11-19T20:34:24Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) in HTML. Then with a button, you can use the [`onClick` HTML Attribute](https://www.w3schools.com/jsref/event_onclick.asp) to run a JavaScript function or use the [`onclick` event handler](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) in your JavaScript code.

Then in the JavaScript function, you can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to get data from an API.

Please let me know if this works for you!

Thank you,  
Heath

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 9:06pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/5 "2020-11-19T21:06:29Z")

</div>

Hi Heath,  
This is what I have as a snippet in custom head content

 body { padding: 10px; background: transparent; }

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

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 9:08pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/7 "2020-11-19T21:08:45Z")

</div>

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" />

```

---

<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:** [November 19, 2020, 9:21pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/8 "2020-11-19T21:21:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 9:23pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/10 "2020-11-19T21:23:22Z")

</div>

Looks like script code did not come through well in the reply. I will email you again

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 9:25pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/12 "2020-11-19T21:25:19Z")

</div>

Hi Heath,

Head content …

```auto
<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 …

```auto
<div class="container-fluid">

<form>

<input type="button" onclick="getJsonData" value="Click" />

</form>

</div>

![image001.png|142x37](upload://bHaQ6yBeXD7n6Aa2hEKGTIe7vr7.png)

![image002.png|5x99](upload://wvmVFaGWMhKM3FCrLW2TSOf6LvX.png)

![image001.jpg|45x45](upload://5d5TRI2fU6GERboYXF76uYVsetg.jpeg)

```

---

<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:** [November 19, 2020, 9:50pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/13 "2020-11-19T21:50:10Z")

</div>

@Sreyams_Jain1,

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

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 10:29pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/17 "2020-11-19T22:29:22Z")

</div>

Attached is an html file[index.zip](https://forums.losant.com/uploads/short-url/awB3SaGKNtq50WNmnCLnqTZhQJW.zip) (447 Bytes)

---

<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:** [November 19, 2020, 10:39pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/20 "2020-11-19T22:39:55Z")

</div>

@Sreyams_Jain1,

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) in HTML. Then with a button, you can use the [`onClick` HTML Attribute](https://www.w3schools.com/jsref/event_onclick.asp) to run a JavaScript function or use the [`onclick` event handler](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) in your JavaScript code.

> Then in the JavaScript function, you can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to get data from an API.

In terms of Losant Examples, the best, related example is here:

> **[Custom HTML](https://docs.losant.com/dashboards/blocks/custom-html/)**
>
> Learn about adding and configuring a Custom HTML Block on a Losant Dashboard.

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.

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 19, 2020, 10:55pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/21 "2020-11-19T22:55:46Z")

</div>

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

---

<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:** [November 20, 2020, 5:04pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/23 "2020-11-20T17:04:07Z")

</div>

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](https://docs.losant.com/dashboards/custom-html/#html-configuration) 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 `head` section of an HTML document), and a “Custom Body Content” section (where you should place any content you would normally place in the `body` section of an HTML document).

This documentation also includes some example content for both Head Content and Body Content. W3 Schools has a [great resource](https://www.w3schools.com/js/js_whereto.asp#:~:text=JavaScript%20in%20or%20%3C,HTML%20page%2C%20or%20in%20both.) 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

---

<div class="post-metadata">

**Author:** ![Sreyams\_Jain1](https://avatars.discourse-cdn.com/v4/letter/s/b5e925/32.png) [@Sreyams\_Jain1](https://forums.losant.com/u/Sreyams_Jain1)\
**Post date:** [November 20, 2020, 5:49pm UTC](https://forums.losant.com/t/custom-html-block-calling-javascript-function/3415/25 "2020-11-20T17:49:28Z")

</div>

Thanks Heath for supporting on this. I will work this way and get back to you.

![image001.png](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/5/52bcf967b2026e397b36a8b7f1ed6e6145de12d2.png)

![image002.png](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/7/743bc7397cae0e5650ef1620550f4b0531ac8864.png)

![image001.jpg](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/2/2485d26919316b1d80aa60f5ca8e2cb5bc0275fe.jpeg)