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 (note, when you make the detail editable, part of the block of code you add into the diff includes an array called activeRowActions which is where you find the other action buttons like save, copy, delete, etc – you’ll add the below to that):

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

See the end of the article to make this an icon instead of a text button. For the text option here, you’ll also need to add this CSS to the detail as well (which is mainly needed since in this case we’re adding a text button instead of an icon). 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.

If you want to make this an icon button, instead of text, simply change the part you add to the actionRowButtons in the diff by replacing the “caption” with the following (this also means you won’t need to add the CSS I listed earlier):

"imageConfig": {"bindTo": "Resources.Images.CardIcon"}

and then add the “CardIcon” to the images of your detail, which you can right-click and save as from here.