Article

Add button into the active row of detail

Case description:

We need to add custom button into the active row of detail.

Algorithm of realization:

  1. Create replacing client module of your detail.
  2. Add localizable string for caption of your button.
  3. Add following code into diff section:

    {
        "operation": "merge",
        "name": "DataGrid",
        "parentName": "Detail",
        "propertyName": "items",
        "values": {
            "activeRowActions": [],
            "activeRowAction": {"bindTo": "onActiveRowAction"}
        }
    },
    {
        "operation": "insert",
        "name": "DataGridActiveRowSomeButton",
        "parentName": "DataGrid",
        "propertyName": "activeRowActions",
        "values": {
            "className": "Terrasoft.Button",
            "style": Terrasoft.controls.ButtonEnums.style.GREEN,
            "caption": resources.localizableStrings.SomeButtonCaption,
            "tag": "someButton"
        }
    }

    With this code you can add button into the active row (element with name equal to "DataGridActiveRowSomeButton") and set method which will handle clicks on this button (activeRowActions into element with name equal to DataGrid).

  4. Add following code into the methods section:

    onActiveRowAction: function(buttonTag) {
        switch (buttonTag) {
            case "someButton":
                this.onSomeButtonClicked();
                break;
            default:
                break;
        }
    },
    onSomeButtonClicked: function() {
        //TODO your logic
        var message = "";
     
        message += "Mobile phone ";
        message += this.getActiveRow().get("MobilePhone");
     
        this.showInformationDialog(message);
    }

     

  5. Here is full example:

define("AccountContactsDetailV2", ["AccountContactsDetailV2Resources"],
    function (resources) {
        return {
            entitySchemaName: "Contact",
            methods: {
                onActiveRowAction: function (buttonTag) {
                    switch (buttonTag) {
                        case "someButton":
                            this.onSomeButtonClicked();
                            break;
                        default:
                            break;
                    }
                },
                onSomeButtonClicked: function () {
                    //TODO your logic
                    var message = "";
                    message += "Mobile phone ";
                    message += this.getActiveRow().get("MobilePhone");
                    this.showInformationDialog(message);
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "merge",
                    "name": "DataGrid",
                    "parentName": "Detail",
                    "propertyName": "items",
                    "values": {
                        "activeRowActions": [],
                        "activeRowAction": { "bindTo": "onActiveRowAction" }
                    }
                },
                {
                    "operation": "insert",
                    "name": "DataGridActiveRowSomeButton",
                    "parentName": "DataGrid",
                    "propertyName": "activeRowActions",
                    "values": {
                        "className": "Terrasoft.Button",
                        "style": Terrasoft.controls.ButtonEnums.style.GREEN,
                        "caption": resources.localizableStrings.SomeButtonCaption,
                        "tag": "someButton"
                    }
                }
            ]/**SCHEMA_DIFF*/
        };
    }
);

 

Like 0

Like

Share

6 comments

How to add one more button next to some button in the datagrid. based on above example. When i tried it is displaying only one button at a time (the first insert). Please find below my code for adding two buttons next to each other in the detail data grid. Kindly help me resolve the same asap

 

diff: /**SCHEMA_DIFF*/[
            {
                        "operation": "merge",
                        "name": "DataGrid",
                        "parentName": "Detail",
                        "propertyName": "items",
                        "values": {
                            "activeRowActions": [],
                            "activeRowAction": {"bindTo": "onActiveRowAction"}
                        }
                    },
             {
                "operation": "insert",
                "name": "DataGridActiveRowSomeButton",
                "parentName": "DataGrid",
                "propertyName": "activeRowActions",
                "values": {
                    "className": "Terrasoft.Button",
                    //"click": {"bindTo": "onButton1Click"},
                    "visible": true,
                    "enabled": true,
                    "style": Terrasoft.controls.ButtonEnums.style.BLUE,
                    "caption": resources.localizableStrings.HierarchyButtonCaption,
                    "tag": "someButton"
                }
            },
            {
                "operation": "insert",
                "name": "DataGridActiveRowSomeButton",
                "parentName": "DataGrid",
                "propertyName": "activeRowActions",
                "values": {
                "className": "Terrasoft.Button",
                    "visible": true,
                    "enabled": true,
                    "style": Terrasoft.controls.ButtonEnums.style.GREEN,
                    "caption": resources.localizableStrings.AddConcessionButtonCaption,
                    "tag": "someButton"
                }
            }

Sri Saranya,

Probably because they have the same name. The tags you have there are also the same, so both those buttons would execute the same code.

Hi All,
How to add the  visibility and enable to a button in "activeRowActions" :

I have implemented the below code. But the button is not visible eventhough we are returning visibility as true.

Hi team how come can change a boolean using this button and save the changes?

Adharsh, you can add a attribute boolean in the detail and setup the parameter in the function onRender, you can find a example in the AccountContactsDetailV2

 

				onRender: function() {
					this.callParent(arguments);
					this.initializeIsOrganizationExists();
				},

 

I tried this but didnt work well. Any ideas?

Show all comments