How can I insert HTML into a label?

Anvil Q&A
4

I had a feeling after I replied that you might have meant that :slight_smile:

Anvil Central will need to confirm but I don’t think there is a direct way to do that at the moment.

But in the mean time, here’s a workaround :

  1. create a material project with custom HTML form

  2. create a new HTML asset page and add this :

    <script>
    function updateHTML(html) {
        el = document.getElementsByClassName("anvil-role-mycustomlabel")[0];
        el.innerHTML=html;
    }
</script>

  3. Select this new file for the html properties drop down in the IDE for the form.

  4. Create a label on the form, and in the form init code add this :

     self.mylabel.role="mycustomlabel"

    This adds a class to the label control called “anvil-role-mycustomlabel”

  5. Put a button on the form and in the click event do this :

     new_html = "<h1>Title 1</h1><h4>Smaller header</h4>"
 self.call_js("updateHTML", new_html)

Here it is in a project :

https://anvil.works/ide#clone:OHUFIZQLTJIWECTP=5SQPXUWJXDEHABLXTKKNM5NF

Click the button and the label HTML gets updated.

3 Likes