Adding an Edit Button to the Selected Row of an Editable Detail in Creatio

Sometimes with an editable detail in Creatio you might want some fields to be editable in the list, but other fields available on an edit page. There are only so many fields that can reasonably fit in the detail list, so it often will make sense to add others to a separate page. The problem is that it isn’t always straight forward to end-users of how to get to the edit page. The normal way is to:

  1. Click into the row
  2. Go to the three-dot button and click to get the menu
  3. Select Edit

That’s not very intuitive. Additionally, because the rows are editable, the user can’t double-click the row to open it. This article will outline how to add an edit button to the row’s action buttons (like the Save/Undo/Delete buttons you get when making the detail editable) to make it obvious to end-users how to open the edit page for the row. The end result will look like this:

With this in place, the user can simply click this edit button and it will save the record if it has been edited, then open the edit page for the row. Also, to make this as obvious as possible, I am just using the text “Edit” instead of an icon button.

First of all, this article assumes you’ve already made the detail an editable list. If not, refer to our article¬†Creating a Detail with an Editable List in Creatio.

Now, add the following into the activeRowActions in the diff of the detail schema:

{
	"className": "Terrasoft.Button",
	"style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
	"tag": "edit",
	"markerValue": "edit",
	"caption": "Edit"
}

You’ll also need to add this CSS to the detail as well. Refer to the article Adding Custom CSS Style Sheets in Creatio¬†if needed for how to do this:

.configuration-grid-row-actions span[data-item-marker=edit] {
	color: #fff !important;
	font-size: 14px;
}

Now, we just need to override the onActiveRowAction in the methods to handle the click of the button:

onActiveRowAction: function(buttonTag, primaryColumnValue) {
	this.mixins.ConfigurationGridUtilities.onActiveRowAction.apply(this, arguments);
	
	if (buttonTag === "edit") {
		var row = this.getActiveRow();
		if (row && this.getIsRowChanged(row)) {
			this.saveDataRow(row, function() {
				this.editRecord(row);
			}, this);
		} else {
			this.editRecord();
		}
	}
}

What this code does is first calls the onActiveRowAction from the mixin, so it will still handle the Save/Undo/Delete button actions. Then it checks if the row needs to be saved, if so the row is saved, and then it opens it in the edit page for the row. Now you’ll have both the fields in the detail layout as editable, but also an easy and obvious way to open the edit page for additional fields.

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.

Submit a Comment

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

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!