Binding HTML to a Page Elements in Creatio (formerly bpm’online)

I wrote an article previously that covered adding static HTML to labels in Creatio. This article showed some uses of adding static HTML to a page using a label to demonstrate different things you can do with the label control in Creatio. As I mentioned in that article, if you’re wanting to add HTML to a page in Creatio, the best way to do this is to either add it directly to a container, or to use the HtmlControlGenerator custom control type. These methods allow you to bind the content as well (binding to either an object property for the page or to an attribute). Let’s take a look.

First of all, one thing to mention, if you want the bound HTML to be editable, you can simply bind the property containing your HTML to the page, just like you would add any property to a page in the wizards. Then, you edit the page code, locate the item in the diff, and add contentType:4 to the values. This will cause it to be rendered using the same HTML editor that the Notes field uses. You can also add a readonly: true if you want it to not be editable but still display as HTML.

Now, on to adding it to the page yourself without dealing with the size of the HTML editor control. If you want to add the raw HTML to the page, you can add the following to the diff. Note this element will be bound to a property named MyHtmlContent:

{
    "operation": "insert",
    "parentName": "Header",
    "propertyName": "items",
    "name": "HtmlContent",
    "values": {
        "generator": "HtmlControlGeneratorV2.generateHtmlControl",
        "htmlContent": {
            "bindTo": "MyHtmlContent"
        }
    }
}

Additionally, as another approach. You can add HTML directly to a container on a page. With this approach, you have complete flexibility. You can add the container, like this:

{
    "operation": "insert",
    "name": "HtmlContainer",
    "parentName": "Header",
    "propertyName": "items",
    "values": {
        "id": "HtmlContainer",
        "itemType": Terrasoft.ViewItemType.CONTAINER,
        "classes": {
            wrapClassName: ["html-wrapper"]
        },
        items: []
    }
}

We can use that container to generate some HTML and add into that container. To do this, we’ll create a HtmlControl on the fly and render it inside the container we added to the diff in the code above:

var html = this.getMyHtmlContent();
var htmlContainer = this.Ext.get("HtmlContainer");
this.Ext.create("Terrasoft.HtmlControl", {
    id: "htmlControl",
    renderTo: htmlContainer,
    html: html,
    selectors: {
        wrapEl: ".html-wrapper"
    }
});

Of course, as a last resort, you could always just load in the HTML like this as well:

$("#MyPageElement").html(this.getMyHtmlContent());