Binding a Value to a Label via Code in a Creatio Freedom UI Page

In a previous article, I showed how to bind a value to a label on a Creatio classic page. This article will show how to do the same in a Freedom UI page. One thing that is much easier in a Freedom UI page is that you no longer need to add the label directly to the diff of the page in order to add the label itself. The Freedom UI page editor allows you to simply add a label to the page from the toolbox.

Once the label is added, we will need to bind it’s label to an attribute, then to set the value of the label, we’ll simply need to set the value in this attribute.

Add the Attribute to the Page

To add the attribute, locate the viewModelConfigDiff in your page code, if it doesn’t already have an “attributes” node you’ll need to also add that. Our attribute is called UsrMyLabelCaption. The page code would look like the below. Note: If there is already a node for path attributes, you can just add your new attribute to the values of that existing node.

viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
	{
		"operation": "merge",
		"path": [
			"attributes"
		],
		"values": {
			"UsrMyLabelCaption": {}
		}
	}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

Bind the Attribute to the Label’s Caption

Now, to bind the attribute to the label’s caption, I’ll need to add the following to the label (note the $ before the attribute name):

"caption": "$UsrMyLabelCaption"

Note, prefixing the attribute name with a “$” is the equivalent to “bindTo” on classic Creatio pages. The complete label would look as follows:

{
	"operation": "insert",
	"name": "Label_ymx7vqp",
	"values": {
		"layoutConfig": {
			"column": 2,
			"row": 3,
			"colSpan": 1,
			"rowSpan": 1
		},
		"type": "crt.Label",
		"caption": "$UsrMyLabelCaption",
		"labelType": "headline-1-small",
		"labelThickness": "default",
		"labelEllipsis": false,
		"labelColor": "auto",
		"labelBackgroundColor": "transparent",
		"labelTextAlign": "start",
		"visible": true
	},
	"parentName": "AccountInfoFieldsContainer",
	"propertyName": "items",
	"index": 5
}

Set a Value to the Attribute to Show as the Label’s Caption

Anytime we want to set a value to the Label, all we need to do is set the value of our attribute.

request.$context.UsrMyLabelCaption = "Some value for my label";

Since the label’s caption is bound to the attribute, it will update to display the attributes value anytime it changes.