How can I insert HTML into a label?

Anvil Q&A
#1

I have a text field (“label”) that I need to populate from the server, and the formatting for the text is only discovered at run-time. Can I dynamically add html content to a label? It appears that ‘html’ is not one of the properties of ‘label’.

Simple text formatting in Anvil?
#2

If you use custom HTML, you could pre-define some formatting CSS classes, calling them “anvil-role-xxxx” (replacing xxxx of course).

Then you can do this :

self.mylabel.role="xxxx"

and that class will be added to the control. See this example :

https://anvil.works/ide#clone:HJR4PCRBKNS35SOD=UVIAMUK2IMBOZKDO6F6XLPRO

The steps are :

  1. create a material project with a custom HTML form
  2. click “assets” (under “themes”)
  3. add a new HTML file (called mine new_file.html - the default)
  4. add the style elements in there
  5. select this file in the Form1 properties “html” drop down

In the example I have a button that, when clicked, adds the role to the label. Anvil adds the “anvil-role-” automagically.

Hope that helps.

#3

@david.wylie, when I say “formatting for the text”, I don’t mean CSS – I mean the actual arrangement of text itself. i.e. the paragraph structure, italicization, scene breaks, etc (<p> tags, <em> tags, etc.). Typesetting, essentially. All the typesetting is determined on the server side, and I just need to dynamically insert a big chunk of HTML into a label. I can’t seem to find any functionality like this in the documentation.

#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
Custom HTML Properties
HTML Text Formatter in TextBox Component
#5

Thanks @david.wylie, I’ll try this when I get home this evening, I appreciate you putting it together!

#6

There’s also a more direct approach: If you create a “Custom HTML” form, you’ll notice that it has an html property, and you can set it from code! So you can do: self.html = "<b>This text is bold</b>" (or add it as a custom component to your page, and do self.custom_1.html = "<p>foo</p>" from the parent page).

Full warning - be very careful with this feature. If a malicious user can control what HTML gets put into your page, they can take full control of your app. (Eg, the HTML could contain <script> tags, which will get executed as Javascript, or contain <a> elements that run Javascript when you click on them, or a thousand other things.) Only ever load HTML from trusted places. (This, by the way, is why Anvil deliberately makes it awkward to add raw HTML to your page. We would much rather you added Label components and set the font_size/bold/foreground attributes etc, because those don’t cause massive security vulnerabilities if you put untrusted input in there.)

2 Likes
Injecting large html file in Anvil Form
How to change foreground color for specific text in label
#7

I’d add a further warning in that you are going rather off piste by doing any of this, and my main concern is that by side stepping the provided methods strange things ™ might happen.

You might be unwittingly battling with the underlying framework, and everything could all break in future updates.

My advice would be to badger Anvil Central for any missing properties you might want :smile:

#8

Eh, putting custom HTML into a Custom HTML form is pretty well supported :slight_smile:

As I say, it’s the risk of malicious code injection you really need to watch out for.

#9

I worded that badly, sorry.

What I meant to convey was that when you start using custom HTML (and especially JS) you can do almost anything, such as create event listeners and the like. I intended to suggest caution, rightly or wrongly, that you don’t unwittingly start interfering with Anvil.

It is a great feature, used carefully. I use it all the time :slight_smile:

#10

In Anvil, adding an “HTML component” (like an “HTML block” in Squarespace or WordPress) to a form should not be so hard, and it should be documented somewhere other than the forums. Yes you can do it wrong, unleashing all kinds of terrors, so just note that in the documentation as well. Or maybe create a “Sanitized HTML component” that only allows some subset of HTML elements, such as p, a, h1, h2, h3, h4, em, strong, ul, ol, li, etc.

1 Like
#11

I don’t like to compare Anvil to Squarespace or WordPress because those tools are great to build websites with little or no coding and little or no flexibility, while Anvil is great to build a web app with at least some Python coding, at most lots of flexibility.

Anvil is good at making things easier, and that sometimes introduces some limitations, but I would never ask to add more limitations.

I don’t know what you need HTML for, but here is another post that might be useful for you: Seeking: a Rich Text display

Here is the documentation: https://anvil.works/docs/client/ui/html-forms

1 Like
#12

There is a feature request for adding a custom HTML component. Like it to show support for the idea: A custom HTML component

1 Like