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:

Want content like this delivered to your inbox? Sign up for our newsletter!
ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

11 Comments

  1. Hi Ryan,

    Great article! Could you provide an example of the handler method to open an external URL on button click?

    Thanks
    Lewis

    Reply
  2. Hi Ryan,

    Great article indeed. Also is it possible to change the behavior of the button visibility based on an attribute change?

    Reply
  3. Hi Ryan, the version of Creatio 8.1 does not sell me the option in action execute custom code

    Reply
    • The action of custom code is *not* in the list of actions. It will appear as the action for the button once you add the “clicked” property to execute the request.
      Ryan

    • Hi Ryan,

      Thanks

  4. hi ryan is it possible to disable a double click the datagrid, since i have an own page for the record for editing now everytime i double click that record its open the page, but in different situation i want the datagrid is readonly and user cannot open the page

    Reply
  5. hi ryan,

    thanks for the help before, i want to know something else, this is a different case than before. so i make a business process to open a page with 5 page parameter in it, and i trigger the business process using a menuItem in list page, while trigger the business process i sent a value name id to the business process. i use the id for read an object in business process and it work, the problem is after read an objecct i call the page using a pre-configured page and fill the page parameter using a read object field, but the page parameter still null, when i trace the log of business process the read object is complete with all the field and value been read, but when go to the page, the parameter doesnt fill with the object i read but null, is there any clue of that problem?

    Reply
    • Hi. If you’re seeing the data in the trace info but not appearing on the pre-configured page it would be best to contact support.
      Ryan

Submit a Comment

Your email address will not be published. Required fields are marked *