Article

Editable grid in section

Tatiana Rogova

04:02 Apr 19, 2018

Case description:

We need to configure editable grid in section for quick record editing (editable grid like in details).

Algorithm of realization:

Create replacing client schema of your section. For example ContactSectionV2.

Add following dependencies into array of dependecies:

define("ActivitySectionV2", ["ConfigurationGrid", "ConfigurationGridGenerator", "ConfigurationGridUtilities"],
    function() {

Add ConfigurationGridUtilites into "mixins" section:

mixins: {
    ConfigurationGridUtilites: "Terrasoft.ConfigurationGridUtilities"
},

Add boolean virtual column into "attributes":

attributes: {
    IsEditable: {
        dataValueType: Terrasoft.DataValueType.BOOLEAN,
        type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
        value: true
    }
},

Add overriding for following methods:

edit: function() {
    var procElId = this.getActiveRow().get("ProcessElementId");
    var recordId = this.get("ActiveRow");
    if (procElId && !this.Terrasoft.isEmptyGUID(procElId)) {
        this.sandbox.publish("ProcessExecDataChanged", {
            procElUId: procElId,
            recordId: recordId,
            scope: this,
            parentMethodArguments: null,
            parentMethod: function() {
                return false;
            }
        });
        return true;
    }
    this.editRecord(recordId);
},
editRecord: function(primaryColumnValue) {
    this.Terrasoft.chain(
        function(next) {
            var activeRow = this.findActiveRow();
            this.saveRowChanges(activeRow, next);
        },
        function() {
            var activeRow = this.getActiveRow();
            var typeColumnValue = this.getTypeColumnValue(activeRow);
            var schemaName = this.getEditPageSchemaName(typeColumnValue);
 
            var config = {
                schemaName: schemaName,
                id: primaryColumnValue,
                operation: Terrasoft.ConfigurationEnums.CardOperation.EDIT,
                moduleId: this.getChainCardModuleSandboxId(typeColumnValue)
            };
 
            this.sandbox.publish("PushHistoryState", {
                hash: Ext.String.format("{0}/{1}/{2}/{3}",
                    "CardModuleV2", schemaName, Terrasoft.ConfigurationEnums.CardOperation.EDIT, primaryColumnValue),
                silent: true
            });
            this.openCardInChain(config);
        }, this);
},
addRecord: function(typeColumnValue) {
    if (!typeColumnValue) {
        if (this.get("EditPages").getCount() > 1) {
            return false;
        }
        var tag = this.get("AddRecordButtonTag");
        typeColumnValue = tag || this.Terrasoft.GUID_EMPTY;
    }
    this.addRow(typeColumnValue);
},
copyRecord: function(primaryColumnValue) {
    this.copyRow(primaryColumnValue);
},
getGridRowViewModelConfig: function() {
    var gridRowViewModelConfig =
        this.mixins.GridUtilities.getGridRowViewModelConfig.apply(this, arguments);
    Ext.apply(gridRowViewModelConfig, {entitySchema: this.entitySchema});
    var editPages = this.get("EditPages");
    this.Ext.apply(gridRowViewModelConfig.values, {HasEditPages: editPages && !editPages.isEmpty()});
    return gridRowViewModelConfig;
},
getGridRowViewModelClassName: function() {
    return this.mixins.GridUtilities.getGridRowViewModelClassName.apply(this, arguments);
},
onRender: function() {
    this.callParent(arguments);
    if (!this.get("Restored")) {
        this.reloadGridColumnsConfig(true);
    }
},
getDefaultGridColumns: function() {
    var systemColumns = this.systemColumns;
    var allowedDataValueTypes = this.get("AllowedDataValueTypes");
    var entitySchema = this.entitySchema;
    var entitySchemaColumns = [];
    Terrasoft.each(entitySchema.columns, function(column, columnName) {
        if (Ext.Array.contains(systemColumns, columnName) ||
            !Ext.Array.contains(allowedDataValueTypes, column.dataValueType)) {
            return;
        }
        entitySchemaColumns.push(column);
    }, this);
    var primaryDisplayColumnName = entitySchema.primaryDisplayColumnName;
    entitySchemaColumns.sort(function(a, b) {
        if (a.name === primaryDisplayColumnName) {
            return -1;
        }
        if (b.name === primaryDisplayColumnName) {
            return 1;
        }
        return 0;
    }, this);
    return (entitySchemaColumns.length > 4) ? entitySchemaColumns.slice(0, 4) : entitySchemaColumns;
},
onActiveRowAction: function() {
    this.mixins.ConfigurationGridUtilities.onActiveRowAction.apply(this, arguments);
    this.callParent(arguments);
},
onActiveRowAction: function(buttonTag, primaryColumnValue) {
    switch (buttonTag) {
        case "card":
            this.edit();
            break;
        case "copy":
            this.copyRecord(primaryColumnValue);
            break;
        case "remove":
            this.deleteRecords();
            break;
        case "cancel":
            this.discardChanges(primaryColumnValue);
            break;
        case "save":
            this.onActiveRowSave(primaryColumnValue);
            break;
    }
}

Add following elements into "diff" array:

{
    "operation": "merge",
    "name": "DataGrid",
    "values": {
        "className": "Terrasoft.ConfigurationGrid",
        "generator": "ConfigurationGridGenerator.generatePartial",
        "generateControlsConfig": {"bindTo": "generatActiveRowControlsConfig"},
        "changeRow": {"bindTo": "changeRow"},
        "unSelectRow": {"bindTo": "unSelectRow"},
        "onGridClick": {"bindTo": "onGridClick"},
        "initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},
        "activeRowAction": {"bindTo": "onActiveRowAction"},
        "multiSelect": {"bindTo": "MultiSelect"}
    }
},
{
    "operation": "insert",
    "name": "activeRowActionSave",
    "parentName": "DataGrid",
    "propertyName": "activeRowActions",
    "values": {
        "className": "Terrasoft.Button",
        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
        "tag": "save",
        "markerValue": "save",
        "imageConfig": {"bindTo": "Resources.Images.SaveIcon"}
    }
},
{
    "operation": "insert",
    "name": "activeRowActionCopy",
    "parentName": "DataGrid",
    "propertyName": "activeRowActions",
    "values": {
        "className": "Terrasoft.Button",
        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
        "tag": "copy",
        "markerValue": "copy",
        "imageConfig": {"bindTo": "Resources.Images.CopyIcon"}
    }
},
{
    "operation": "insert",
    "name": "activeRowActionCard",
    "parentName": "DataGrid",
    "propertyName": "activeRowActions",
    "values": {
        "className": "Terrasoft.Button",
        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
        "tag": "card",
        "markerValue": "card",
        "visible": {"bindTo": "HasEditPages"},
        "imageConfig": {"bindTo": "Resources.Images.CardIcon"}
    }
},
{
    "operation": "insert",
    "name": "activeRowActionCancel",
    "parentName": "DataGrid",
    "propertyName": "activeRowActions",
    "values": {
        "className": "Terrasoft.Button",
        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
        "tag": "cancel",
        "markerValue": "cancel",
        "imageConfig": {"bindTo": "Resources.Images.CancelIcon"}
    }
},
{
    "operation": "insert",
    "name": "activeRowActionRemove",
    "parentName": "DataGrid",
    "propertyName": "activeRowActions",
    "values": {
        "className": "Terrasoft.Button",
        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
        "tag": "remove",
        "markerValue": "remove",
        "imageConfig": {"bindTo": "Resources.Images.RemoveIcon"}
    }
},
{
    "operation": "remove",
    "name": "DataGridActiveRowOpenAction"
},
{
    "operation": "remove",
    "name": "DataGridActiveRowCopyAction"
},
{
    "operation": "remove",
    "name": "DataGridActiveRowDeleteAction"
},
{
    "operation": "remove",
    "name": "ProcessEntryPointGridRowButton"
}

Full code of example:

define("ContactSectionV2", ["ConfigurationGrid", "ConfigurationGridGenerator", "ConfigurationGridUtilities"],
    function() {
        return {
            entitySchemaName: "Contact",
            messages: {},
            mixins: {
                ConfigurationGridUtilites: "Terrasoft.ConfigurationGridUtilities"
            },
            attributes: {
                IsEditable: {
                    dataValueType: Terrasoft.DataValueType.BOOLEAN,
                    type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                    value: true
                }
            },
            methods: {
                edit: function() {
                    var procElId = this.getActiveRow().get("ProcessElementId");
                    var recordId = this.get("ActiveRow");
                    if (procElId && !this.Terrasoft.isEmptyGUID(procElId)) {
                        this.sandbox.publish("ProcessExecDataChanged", {
                            procElUId: procElId,
                            recordId: recordId,
                            scope: this,
                            parentMethodArguments: null,
                            parentMethod: function() {
                                return false;
                            }
                        });
                        return true;
                    }
                    this.editRecord(recordId);
                },
                editRecord: function(primaryColumnValue) {
                    this.Terrasoft.chain(
                        function(next) {
                            var activeRow = this.findActiveRow();
                            this.saveRowChanges(activeRow, next);
                        },
                        function() {
                            var activeRow = this.getActiveRow();
                            var typeColumnValue = this.getTypeColumnValue(activeRow);
                            var schemaName = this.getEditPageSchemaName(typeColumnValue);
 
                            var config = {
                                schemaName: schemaName,
                                id: primaryColumnValue,
                                operation: Terrasoft.ConfigurationEnums.CardOperation.EDIT,
                                moduleId: this.getChainCardModuleSandboxId(typeColumnValue)
                            };
 
                            this.sandbox.publish("PushHistoryState", {
                                hash: Ext.String.format("{0}/{1}/{2}/{3}",
                                    "CardModuleV2", schemaName, Terrasoft.ConfigurationEnums.CardOperation.EDIT, primaryColumnValue),
                                silent: true
                            });
                        this.openCardInChain(config);
                    }, this);
                },
                addRecord: function(typeColumnValue) {
                    if (!typeColumnValue) {
                        if (this.get("EditPages").getCount() > 1) {
                            return false;
                        }
                        var tag = this.get("AddRecordButtonTag");
                        typeColumnValue = tag || this.Terrasoft.GUID_EMPTY;
                    }
                    this.addRow(typeColumnValue);
                },
                copyRecord: function(primaryColumnValue) {
                    this.copyRow(primaryColumnValue);
                },
                getGridRowViewModelConfig: function() {
                    var gridRowViewModelConfig =
                        this.mixins.GridUtilities.getGridRowViewModelConfig.apply(this, arguments);
                    Ext.apply(gridRowViewModelConfig, {entitySchema: this.entitySchema});
                    var editPages = this.get("EditPages");
                    this.Ext.apply(gridRowViewModelConfig.values, {HasEditPages: editPages && !editPages.isEmpty()});
                    return gridRowViewModelConfig;
                },
                getGridRowViewModelClassName: function() {
                    return this.mixins.GridUtilities.getGridRowViewModelClassName.apply(this, arguments);
                },
                onRender: function() {
                    this.callParent(arguments);
                    if (!this.get("Restored")) {
                        this.reloadGridColumnsConfig(true);
                    }
                },
                getDefaultGridColumns: function() {
                    var systemColumns = this.systemColumns;
                    var allowedDataValueTypes = this.get("AllowedDataValueTypes");
                    var entitySchema = this.entitySchema;
                    var entitySchemaColumns = [];
                    Terrasoft.each(entitySchema.columns, function(column, columnName) {
                        if (Ext.Array.contains(systemColumns, columnName) ||
                            !Ext.Array.contains(allowedDataValueTypes, column.dataValueType)) {
                            return;
                        }
                        entitySchemaColumns.push(column);
                    }, this);
                    var primaryDisplayColumnName = entitySchema.primaryDisplayColumnName;
                    entitySchemaColumns.sort(function(a, b) {
                        if (a.name === primaryDisplayColumnName) {
                            return -1;
                        }
                        if (b.name === primaryDisplayColumnName) {
                            return 1;
                        }
                        return 0;
                    }, this);
                    return (entitySchemaColumns.length > 4) ? entitySchemaColumns.slice(0, 4) : entitySchemaColumns;
                },
                onActiveRowAction: function() {
                    this.mixins.ConfigurationGridUtilities.onActiveRowAction.apply(this, arguments);
                    this.callParent(arguments);
                },
                onActiveRowAction: function(buttonTag, primaryColumnValue) {
                    switch (buttonTag) {
                        case "card":
                            this.edit();
                            break;
                        case "copy":
                            this.copyRecord(primaryColumnValue);
                            break;
                        case "remove":
                            this.deleteRecords();
                            break;
                        case "cancel":
                            this.discardChanges(primaryColumnValue);
                            break;
                        case "save":
                            this.onActiveRowSave(primaryColumnValue);
                            break;
                    }
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "merge",
                    "name": "DataGrid",
                    "values": {
                        "className": "Terrasoft.ConfigurationGrid",
                        "generator": "ConfigurationGridGenerator.generatePartial",
                        "generateControlsConfig": {"bindTo": "generatActiveRowControlsConfig"},
                        "changeRow": {"bindTo": "changeRow"},
                        "unSelectRow": {"bindTo": "unSelectRow"},
                        "onGridClick": {"bindTo": "onGridClick"},
                        "initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},
                        "activeRowAction": {"bindTo": "onActiveRowAction"},
                        "multiSelect": {"bindTo": "MultiSelect"}
                    }
                },
                {
                    "operation": "insert",
                    "name": "activeRowActionSave",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                        "tag": "save",
                        "markerValue": "save",
                        "imageConfig": {"bindTo": "Resources.Images.SaveIcon"}
                    }
                },
                {
                    "operation": "insert",
                    "name": "activeRowActionCopy",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                        "tag": "copy",
                        "markerValue": "copy",
                        "imageConfig": {"bindTo": "Resources.Images.CopyIcon"}
                    }
                },
                {
                    "operation": "insert",
                    "name": "activeRowActionCard",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                        "tag": "card",
                        "markerValue": "card",
                        "visible": {"bindTo": "HasEditPages"},
                        "imageConfig": {"bindTo": "Resources.Images.CardIcon"}
                    }
                },
                {
                    "operation": "insert",
                    "name": "activeRowActionCancel",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                        "tag": "cancel",
                        "markerValue": "cancel",
                        "imageConfig": {"bindTo": "Resources.Images.CancelIcon"}
                    }
                },
                {
                    "operation": "insert",
                    "name": "activeRowActionRemove",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                        "tag": "remove",
                        "markerValue": "remove",
                        "imageConfig": {"bindTo": "Resources.Images.RemoveIcon"}
                    }
                },
                {
                    "operation": "remove",
                    "name": "DataGridActiveRowOpenAction"
                },
                {
                    "operation": "remove",
                    "name": "DataGridActiveRowCopyAction"
                },
                {
                    "operation": "remove",
                    "name": "DataGridActiveRowDeleteAction"
                },
                {
                    "operation": "remove",
                    "name": "ProcessEntryPointGridRowButton"
                }
            ]/**SCHEMA_DIFF*/
        };
    }
);

IMPORTANT!!!
1. If you want use this for activity section you should comment "activeRowActionCopy" inside "diff" array, because functionality of copying doesn`t work at activity section.
2. If you want use this for Lead section you should add following code into values property of "DataGrid" element inside "diff" array:
```
"applyControlConfig": Terrasoft.EmptyFn
```

1 comments

Oleg Drobina

11:27 May 02, 2022

Marko Maricic,

Hello,

This approach works only with the list view. Please remove the code, select the list view in the columns setup and add the code back. Once done refresh the page and the editable grid will be displayed.

Best regards,

Oscar

Show all comments