Question

Make read only column on Editable detail

Hi Community,

I created an editable detail according to the source code provided on the Academy.

The problem is that I don't know how to make Columns to be a Read Only column.

Please find the link to the academy article:

https://academy.bpmonline.com/documents/technic-sdk/7-13/adding-detail-editable-list

Please find here the code from the Academy:

// Defining schema and setting its dependencies from other modules.
define("UsrCourierServiceDetail", ["ConfigurationGrid", "ConfigurationGridGenerator",
    "ConfigurationGridUtilities"], function() {
    return {
        // Detail object schema name.
        entitySchemaName: "UsrCourierService",
        // Schema attribute list.
        attributes: {
            // Determines whether the editing is enabled.
            "IsEditable": {
                // Data type — logic.
                dataValueType: Terrasoft.DataValueType.BOOLEAN,
                // Attribute type — virtual column of the view model.
                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                // Set value.
                value: true
            }
        },
        // Used mixins.
        mixins: {
            ConfigurationGridUtilities: "Terrasoft.ConfigurationGridUtilities"
        },
        // Array with view model modifications.
        diff: /**SCHEMA_DIFF*/[
            {
                // Operation type — merging.
                "operation": "merge",
                // Name of the schema element, with which the action is performed.
                "name": "DataGrid",
                // Object, whose properties will be joined with the schema element properties.
                "values": {
                    // Class name
                    "className": "Terrasoft.ConfigurationGrid",
                    // View generator must generate only part of view.
                    "generator": "ConfigurationGridGenerator.generatePartial",
                    // Binding the edit elements configuration obtaining event
                    // of the active page to handler method.
                    "generateControlsConfig": {"bindTo": "generateActiveRowControlsConfig"},
                    // Binding the active record changing event to handler method.
                    "changeRow": {"bindTo": "changeRow"},
                    // Binding the record selection cancellation event to handler method.
                    "unSelectRow": {"bindTo": "unSelectRow"},
                    // Binding of the list click event to handler method.
                    "onGridClick": {"bindTo": "onGridClick"},
                    // Actions performed with active record.
                    "activeRowActions": [
                        // [Save] action setup.
                        {
                            // Class name of the control element, with which the action is connected.
                            "className": "Terrasoft.Button",
                            // Display style — transparent button.
                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                            // Tag.
                            "tag": "save",
                            // Marker value.
                            "markerValue": "save",
                            // Binding button image.
                            "imageConfig": {"bindTo": "Resources.Images.SaveIcon"}
                        },
                        // [Cancel] action setup.
                        {
                            "className": "Terrasoft.Button",
                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                            "tag": "cancel",
                            "markerValue": "cancel",
                            "imageConfig": {"bindTo": "Resources.Images.CancelIcon"}
                        },
                        // [Delete] action setup.
                        {
                            "className": "Terrasoft.Button",
                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                            "tag": "remove",
                            "markerValue": "remove",
                            "imageConfig": {"bindTo": "Resources.Images.RemoveIcon"}
                        }
                    ],
                    // Binding to method that initializes subscription to events
                    // of clicking buttons in the active row.
                    "initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},
                    // Binding the active record action completion event to handler method.
                    "activeRowAction": {"bindTo": "onActiveRowAction"},
                    // Identifies whether multiple records can be selected.
                    "multiSelect": {"bindTo": "MultiSelect"}
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});
Like 0

Like

2 comments

Displaying some columns on editable detail in readonly mode can be implemented via js development. There is a base method named getCellControlsConfig which returns configuration of an editable registry cell. Please feel free to override the method in the detail schema. Set the enabled property to false to make concrete column readonly.

In the example below the UsrTest column is readonly:

// Defining schema and setting its dependencies from other modules.

define("UsrCourierServiceDetail", ["ConfigurationGrid", "ConfigurationGridGenerator",

    "ConfigurationGridUtilities"], function() {

    return {

        // Detail object schema name.

        entitySchemaName: "UsrCourierService1",

        // Schema attribute list.

        attributes: {

            // Determines whether the editing is enabled.

            "IsEditable": {

                // Data type — logic.

                dataValueType: Terrasoft.DataValueType.BOOLEAN,

                // Attribute type — virtual column of the view model.

                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,

                // Set value.

                value: true

            }

        },

        // Used mixins.

        mixins: {

            ConfigurationGridUtilities: "Terrasoft.ConfigurationGridUtilities"

        },

        methods:{

            getCellControlsConfig: function(entitySchemaColumn) {

                var columnName = entitySchemaColumn.name;

                var enabled = (entitySchemaColumn.usageType !== Terrasoft.EntitySchemaColumnUsageType.None) &&

                    !Ext.Array.contains(this.systemColumns, columnName);

                    

                if (columnName === "UsrTest") {

                    enabled = false;

                }

                

                var config = this.getDefaultCellControlsConfig(columnName, {

                    enabled: enabled,

                    caption: entitySchemaColumn.caption

                });

                if (entitySchemaColumn.dataValueType === Terrasoft.DataValueType.LOOKUP) {

                    config.showValueAsLink = false;

                }

                if (entitySchemaColumn.dataValueType !== Terrasoft.DataValueType.DATE_TIME &&

                    entitySchemaColumn.dataValueType !== Terrasoft.DataValueType.BOOLEAN) {

                    config.focused = {"bindTo": "Is" + columnName + "Focused"};

                }

                return config;

            }

        },

        // Array with view model modifications.

        diff: /**SCHEMA_DIFF*/[

            {

                // Operation type — merging.

                "operation": "merge",

                // Name of the schema element, with which the action is performed.

                "name": "DataGrid",

                // Object, whose properties will be joined with the schema element properties.

                "values": {

                    // Class name

                    "className": "Terrasoft.ConfigurationGrid",

                    // View generator must generate only part of view.

                    "generator": "ConfigurationGridGenerator.generatePartial",

                    // Binding the edit elements configuration obtaining event

                    // of the active page to handler method.

                    "generateControlsConfig": {"bindTo": "generateActiveRowControlsConfig"},

                    // Binding the active record changing event to handler method.

                    "changeRow": {"bindTo": "changeRow"},

                    // Binding the record selection cancellation event to handler method.

                    "unSelectRow": {"bindTo": "unSelectRow"},

                    // Binding of the list click event to handler method.

                    "onGridClick": {"bindTo": "onGridClick"},

                    // Actions performed with active record.

                    "activeRowActions": [

                        // [Save] action setup.

                        {

                            // Class name of the control element, with which the action is connected.

                            "className": "Terrasoft.Button",

                            // Display style — transparent button.

                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,

                            // Tag.

                            "tag": "save",

                            // Marker value.

                            "markerValue": "save",

                            // Binding button image.

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

                        },

                        // [Cancel] action setup.

                        {

                            "className": "Terrasoft.Button",

                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,

                            "tag": "cancel",

                            "markerValue": "cancel",

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

                        },

                        // [Delete] action setup.

                        {

                            "className": "Terrasoft.Button",

                            "style": this.Terrasoft.controls.ButtonEnums.style.TRANSPARENT,

                            "tag": "remove",

                            "markerValue": "remove",

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

                        }

                    ],

                    // Binding to method that initializes subscription to events

                    // of clicking buttons in the active row.

                    "initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},

                    // Binding the active record action completion event to handler method.

                    "activeRowAction": {"bindTo": "onActiveRowAction"},

                    // Identifies whether multiple records can be selected.

                    "multiSelect": {"bindTo": "MultiSelect"}

                }

            }

        ]/**SCHEMA_DIFF*/

    };

});

Thanks a lot Alina ! it works.

God bless you.

Show all comments