Using Labels in Forms in Creatio (formerly bpm’online) to Show Information, Messages, and Even Custom HTML

Something that is easy to forget when creating forms in bpm’online is that you have more available to you than what shows up in the page wizard. You can manually add elements to your page that aren’t options in the available control/field types. You can see a list of the available types of elements you can add to a page here. In this article, we’ll look at several different things you can do using the Label.

To be honest, I do wish the Label was a control available in the page wizard. There’s a lot of times you might want to draw attention to something, provide the user with instructions, etc, and the Information Button (or hints) aren’t visible enough for something important. We can, however, add labels directly to the diff of our page.

A normal label would look something like this in the diff for our page:

{
    "operation": "insert",
    "name": "myCustomLabel",
    "parentName": "DescriptionGroupBlock",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.LABEL,
        "layout": {
            "colSpan": 23,
            "rowSpan": 1,
            "column": 1,
            "row": 1
        },
        "caption": "This is my label."
    }
}

This would look like this on our page:

Nothing too exciting yet, but we’ve added a label. Let’s see how we can use this to make things more useful. We can add custom styles to this label and make it look more like an information message of some kind. To do this, we’ll change the above to the following:

{
    "operation": "insert",
    "name": "myCustomLabel",
    "parentName": "DescriptionGroupBlock",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.LABEL,
        "layout": {
            "colSpan": 23,
            "rowSpan": 1,
            "column": 1,
            "row": 1
        },
        "caption": "Note: This is an important message!",
        "styles": {
            "labelStyle": {
                "background-color": "#ffffc0",
                "border": "1px solid #efef22",
                "padding": "6px 10px",
                "margin-top": "5px"
            }
        }
    }
}

Notice the styles section we’ve added. That will look like this on the page:

That is more like it. Now we’ve added something more useful. If you prefer, rather than adding the styles directly to the label, we could add them as CSS classes and include a custom CSS file (I’ll outline how to do this in my next article). To add the custom class instead of inline styles, you’d do the following change:

{
    "operation": "insert",
    "name": "myCustomLabel",
    "parentName": "DescriptionGroupBlock",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.LABEL,
        "layout": {
            "colSpan": 23,
            "rowSpan": 1,
            "column": 1,
            "row": 1
        },
        "caption": "Note: This is an important message!",
        "classes": {
            "labelClass": [
                "my-custom-label-class"
            ]}
        }
    }
}

What if we want to get really crazy? How about, instead of just adding a text caption to our label, we use it to inject some custom HTML on the page? We can’t just add HTML tags to the caption, those will get encoded. However, we can override what the HTML that gets added to the page for the label will look like. That would look like this:

{
    "operation": "insert",
    "name": "myCustomLabel",
    "parentName": "DescriptionGroupBlock",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.LABEL,
        "layout": {
            "colSpan": 23,
            "rowSpan": 1,
            "column": 1,
            "row": 1
        },
        "caption": ".", // <- caption cannot be blank even though not used
        "selectors": {
            "wrapEl": "#OpportunityPageV2myCustomLabel"
        },
        // yes, this will cause a "Line too long" jslint warning, but you can ignore that
        "html": "<label id='OpportunityPageV2myCustomLabel' class='t-label' data-item-marker='myCustomLabel'><marquee><img src='https://static.thenounproject.com/png/105264-200.png' style='width:50px;vertical-align:middle;'>This is crazy... <span style='color:red;font-size:20px'>What have we done?</span></marquee></label>"
    }
}

This monstrosity will look like this on the page:

Quality stuff right there. Is this a good idea? Probably not. As silly as the above example is, there are cases where adding custom HTML to the page could be very useful. However, if you need to add custom HTML to the page directly, using a container, rather than a label is a better choice (this article is about labels, so I had to include it). Here’s how you would use a container, instead of a label, to add custom HTML to the page:

{
    "operation": "insert",
    "name": "MyCustomHtml",
    "values": {
        "id": "mycustomghtml",
        "itemType": Terrasoft.ViewItemType.CONTAINER,
        "selectors": {
            "wrapEl": "#mycustomghtml"
        },
        "layout": {
            "colSpan": 24,
            "rowSpan": 1,
            "column": 0,
            "row": 0
        },
        "html": "<div id='mycustomhtml'><b>Hello</b> this is custom <h3>HTML</h3></div>",
    },
    "parentName": "MyContainer",
    "propertyName": "items",
    "index": 0
}