Binding Data to Labels on a Page in Creatio

At times you might want to display read-only data on a page in Creatio. For example, you might want to display some calculation or data from some other object in a read-only label on the page. To do this, you’ll follow these steps:

1. Add a text attribute on the page. This is what we’ll bind the label caption to
2. Add the label to the diff
3. Set the text attribute with the value we want to display in the label

In our scenario, we’ll keep things simple and just display a message about when an account was created on the account page. Our first step is to add a text attribute to the page. We’ll later bind our label’s caption to this attribute. The attribute will look like this:

attributes: {
	"CreatedOnMessage": {
		dataValueType: Terrasoft.DataValueType.TEXT,
		type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
		value: ""
	}
}

Next, we’ll add the label to the diff. The label will look like this:

{
	"operation": "insert",
	"name": "CreatedLabel",
	"values": {
		"itemType": Terrasoft.ViewItemType.LABEL,
		"layout": {
			"colSpan": 24,
			"rowSpan": 1,
			"column": 0,
			"row": 8,
			"layoutName": "ProfileContainer"
		},
		"caption": {
			"bindTo": "CreatedOnMessage"
		}
	},
	"parentName": "ProfileContainer",
	"propertyName": "items"
}

TIP: If you’re not sure how to add something into the diff and get it placed where you want it, drag some other unused field into the place you want (such as the CreatedOn). Then find it in the diff by doing a CTRL+F and searching for the property name (such as CreatedOn) to locate it. Then just modify it as needed and remove the “bindTo” part.

Notice, the caption is bound to our attribute we created above. Lastly, we’ll add some code to populate our attribute with a message, the message will then be displayed in the label. Our code will look like this:

methods: {
	onEntityInitialized: function() {
		this.callParent(arguments);
            
		var msg = "Created " + this.get("CreatedOn").toDateString() + 
			  " (" + Terrasoft.dateDiffDays(this.get("CreatedOn"), new Date()) + " days ago)";

		this.set("CreatedOnMessage", msg);
	}
}

With that code in place, our end result will look like the image below. I’ve also added some CSS to make this look more like some read-only text using a gray color, which is how most labels appear in Creatio.