Dynamic HTML based on user input


I’m trying to implement a chart using D3.js. I want my chart values to change when the user selects one or multiple checkboxes and then clicks a button.

Using the d3-node library, I can generate the chart’s HTML code. However, I haven’t found a way to actually use that code in my page.

I’ve tried passing the code to a few elements. The HtmlComponent element can display pre-defined HTML code, but I haven’t found a way to change that code once an event takes place (e.g. button click). I can only change the source address, if I’ve chosen to redirect my component to a web address.

I’ve also tried passing the code to the Text element, because it seems to be the only element I can actually pass HTML code to. Unfortunately (but predictably), it seems that the element only accepts text, and my attempts to pass an svg element to it ended in failure.

Do you have any suggestions how to approach this?

See Velo: Working with the HTML iframe Element for information on how to communicate with a script embedded in an HtmlComponent.

You can see how this works in the Custom Chart example .

I do not know what you like to change exactly. You can send new info to the html-component using postMessage, but the only thing it can then change is anything inside the body-tag. If you need to (re)load a new script (with different params), then postMessage won’t work since it will not re-render/reload. But, there is a solution: create a use_ http-function which , when called, returns all the html/script/headers you want. Feed this URL to the html-component by setting the component’s URL programmatically. You can even add params (just as long as you pick them up on the http-function side.)
SO you do not put any static code inside the html-component, you only use the URL, which calls a http-function, which delivers the html.
I’ve done it and it works.
Does that make sense?