Question

Display HTML that is stored in a field

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! 

Like 0

Like

4 comments

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

Ryan Farley,

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

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

$("#MyLabelElement").html("<b>Hello</b>, <i>World</i>!!");

Ryan

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

<a target="_blank" href="https://google.com">Google.com</a>
<a target="_blank" href="https://google.com">Google.com</a>
<a target="_blank" href="https://google.com">Google.com</a>
<a target="_blank" href="https://google.com">Google.com</a>

and the code in UsrHTML2 looks like 

<a target="_blank" href="https://google.com">Google.com</a>

 

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