Question

Display HTML that is stored in a field

20:15 Sep 29, 2020

Hello,

I have a circumstance where I have HTML in a field. Is there a way to display the HTML that is in this field as actual HTML on the page?

I have looked at this article here, and the issue with this is the HTML property does not allow me to do a { "bindTo": "getHTML" } so it seems it must be static.

Any help is appreciated.

Thanks!

4 comments

Ryan Farley

20:51 Sep 29, 2020

Hi Tyler,

If you want the HTML to be editable, you could bind it normally, but then add contentType: 4 to it in the diff to make it render as the HTML editor like the notes field. You could add a readonly:true to it as well to make it non editable.

Otherwise, you could add it to a container on the page like this (binding to a property named MyHtmlContent):

{
    "operation": "insert",
    "parentName": "Header",
    "propertyName": "items",
    "name": "HtmlContent",
    "values": {
        "generator": "HtmlControlGeneratorV2.generateHtmlControl",
        "htmlContent": {
            "bindTo": "MyHtmlContent"
        },
        "classes": {
            "wrapClass": ["t-label"]
        }
    }
}

Hope this helps.

Ryan

Tyler Rainey

20:53 Sep 29, 2020

Ryan Farley,

Awesome, thanks! I think the htmlContent property is what I need.

Ryan Farley

21:00 Sep 29, 2020

Of course, you could always just go this route as well and load the HTML into a label or other element yourself:

$("#MyLabelElement").html("&lt;b&gt;Hello&lt;/b&gt;, &lt;i&gt;World&lt;/i&gt;!!");

Ryan

Tyler Rainey

00:10 Oct 02, 2020

Ryan Farley,

Hi Ryan,

I'm having some issues trying to implement these solutions listed above.

My case is I have two fields that store HTML. Lets call them UsrHTML1 and UsrHTML2

The HTML in UsrHTML1 looks like such

&lt;a target="_blank" href="https://google.com"&gt;Google.com&lt;/a&gt;
&lt;a target="_blank" href="https://google.com"&gt;Google.com&lt;/a&gt;
&lt;a target="_blank" href="https://google.com"&gt;Google.com&lt;/a&gt;
&lt;a target="_blank" href="https://google.com"&gt;Google.com&lt;/a&gt;

and the code in UsrHTML2 looks like

&lt;a target="_blank" href="https://google.com"&gt;Google.com&lt;/a&gt;

When I use your code above nothing is displayed

{
    "operation": "insert",
    "parentName": "MyDesignatedFieldGroup",
    "propertyName": "items",
    "name": "UsrHTML1",
    "values": {
        "generator": "HtmlControlGeneratorV2.generateHtmlControl",
        "htmlContent": {
            "bindTo": "UsrHTML1"
        },
        "classes": {
            "wrapClass": ["t-label"]
        }
    }
}

Any idea why it's not working, or if I am missing something?

Thank you!

Show all comments