Creating a Detail with an Editable List in Creatio (formerly bpm’online)

A useful thing you can do with a detail in Creatio is make it have an editable list. This means instead of using a edit page, you can just edit the columns straight in the list. The academy has an article on this already but I thought I would write an article simplifying the steps.

For my sample in this article I’m creating an account product detail where you can associate a product with an account. When I make my detail with an editable list the end result will look like this.

All the code from this article will go in the detail schema and not the page. The detail wizard usually names this something like “UsrSchema12Detail”.

Open up your detail schema and there isn’t a lot in there it will look like this.

define("UsrSchema1Detail", [], function() {
	return {
		entitySchemaName: "UsrAccountProduct",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {}
	};
});

We’ll paste in the code to make it look something like this.

define("UsrSchema1Detail", ["ConfigurationGrid", "ConfigurationGridGenerator",
    "ConfigurationGridUtilities"], function() {
	return {
		entitySchemaName: "UsrAccountProduct",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		attributes: {
			"IsEditable": {
				dataValueType: Terrasoft.DataValueType.BOOLEAN,
				type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				value: true
			}
		},
		mixins: {
			ConfigurationGridUtilities: "Terrasoft.ConfigurationGridUtilities"
		},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "merge",
				"name": "DataGrid",
				"values": {
					"className": "Terrasoft.ConfigurationGrid",
					"generator": "ConfigurationGridGenerator.generatePartial",
					"generateControlsConfig": {"bindTo": "generateActiveRowControlsConfig"},
					"changeRow": {"bindTo": "changeRow"},
					"unSelectRow": {"bindTo": "unSelectRow"},
					"onGridClick": {"bindTo": "onGridClick"},
					"activeRowActions": [
						{
							"className": "Terrasoft.Button",
							"style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
							"tag": "save",
							"markerValue": "save",
							"imageConfig": {"bindTo": "Resources.Images.SaveIcon"}
						},
						{
							"className": "Terrasoft.Button",
							"style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
							"tag": "cancel",
							"markerValue": "cancel",
							"imageConfig": {"bindTo": "Resources.Images.CancelIcon"}
						},
						{
							"className": "Terrasoft.Button",
							"style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
							"tag": "remove",
							"markerValue": "remove",
							"imageConfig": {"bindTo": "Resources.Images.RemoveIcon"}
						}
					],
					"initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},
					"activeRowAction": {"bindTo": "onActiveRowAction"},
					"multiSelect": {"bindTo": "MultiSelect"}
				}
			}
		]/**SCHEMA_DIFF*/,
		methods: {}
	};
});

Here’s what I added to the original detail schema. You’ll paste in the code exactly how it is (this is the same code from the academy article with comments cleaned out) – no need to make any changes to the code.

1. Three strings in the top, between the square brackets
2. The attributes section
3. The mixins section
4. The diff section

Be sure to replace an existing section so you don’t end up with duplicates. Also, be sure you don’t replace the line for entitySchemaName and also the first string in the file after “define” (the name of the detail schema).