Adding a Button to Execute Custom Code on a Creatio Freedom UI Page

In the new Freedom UI page editor for Creatio, it’s super simple to add buttons to a page. You no longer need to modify the diff in the page code directly to add a button. Instead, you can now select one from the toolkit to drag onto the page. It allows you to wire the button click event up to several different types of actions, such as executing a process, opening a page, etc. However, what is missing from that list is executing custom code on the page. However, it is possible, although the code will look different than what you were used to in “classic” Creatio pages. This article will outline the steps to do this.

The steps for adding a button to execute custom code on the page are:

1. Add the button the page in the designer
2. Set any desired properties in the designer, however, leave the “Action” property empty
3. Open the page code, locate the button and add a request name to the clicked (more on this below)
4. Add the request handler to the page handlers

STEP 1: Add the Button & STEP 2: Set the Button Properties

Add the button normally in the page designer. This makes it easy to place it exactly where you want it. You can also set any related properties, such as caption, icons, styles, etc. However, no need to set the “Action” for the button. Leave that empty.

STEP 3: Add Request Name to Button Clicked Property in Page Code

In the page code, locate your button. You’ll be adding the following to the “values” of the button:

"clicked": {
	"request": "cfx.clickMeButtonClicked",
	"params": {}
}

What this is saying, is when the button’s “clicked” event fires, locate the handler for a request named “cfx.clickMeButtonClicked” and execute it. Note, this request name can be whatever you want – think of it like the function name for the click event. We will define that request handler in a bit. With that added, the button will look something like this:

{
	"operation": "insert",
	"name": "ClickMeButton",
	"values": {
		"layoutConfig": {
			"column": 1,
			"row": 3,
			"colSpan": 1,
			"rowSpan": 1
		},
		"type": "crt.Button",
		"caption": "#ResourceString(ClickMeButton_caption)#",
		"color": "accent",
		"disabled": false,
		"size": "large",
		"iconPosition": "only-text",
		"visible": true,
		"clicked": {
			"request": "cfx.clickMeButtonClicked",
			"params": {}
		}
	},
	"parentName": "AccountInfoFieldsContainer",
	"propertyName": "items",
	"index": 4
}

STEP 4: Add the Request Handler to the Page Handlers Section

Now we need to define the handler for the “cfx.clickMeButtonClicked” request. Locate the handlers section in the page code. Add the following:

{
	request: "cfx.clickMeButtonClicked",
	handler: async (request, next) => {
		Terrasoft.showInformation("Hello there. You clicked the button!");
		return next?.handle(request);
	}
}

Different than classic page types, where you define only a function, here you’re defining the handler for a request. Since a page can have multiple layered versions in Creatio, this method allows the request to be handled asynchronously, returning a promise, and each version can implement a different version of the request handler, including more functionality. Our handler above, will simply display a popup message, then return a promise for the “next” version of the handler in the chain. That end part is similar to the this.callParent(arguments) in Ext-based classic pages.

Now that we’ve added this, if we return to the page editor, we’ll see the button’s action as follows: