Catch submit event on C3.view.EditableForm


#1

Hi,
I’m implementing the C3.view.EditableForm component and want to setup a custom action on submit event button. I defined this config Option

"buttons": true, //to show the button
"customSubmitAction":true, //to define my custom action
"submitClass": "submitFromPlan", //to define the class of the button

Then in the behaviour section I’m trying to catch the onSubmit event but I’m not able to do that. I wrote this piece of code

    "behavior" : {
        "$ .submitFromPlan": {
        	"click": {
        		"type": "LCI.SaveProjectFromDetailedPage_ProjectPage"
        	}
        }
    }

What is the right way to catch the event?

Thanks,
Laura


#2

I post the entire definition of c3ui. I underline that for remove button it works.

ui module Enterprise {
    page Project {
        "url": "project",
        "title": "{~Enterprise.Project.title~}",
        "template": "Enterprise.Project",
        "breadcrumbs": {
            "dependencyCrumbs":[
            {
                "pageId": "Enterprise.Projects",
                "forbidWith": "Enterprise.Facility",
                "link": "/enterprise/projects",
                "text": "Projects"
            }],
            "crumbs":[{
                "link": "/enterprise/project/{{ params.id }}",
                "text": "{{ name }}"
            }]
        },
        "data": {
            "record": "Enterprise.Project"
        },
        "permissions": [
            {
                "typeName": "Project",
                "action": "remove"
            }, {
                "typeName": "PEATEngine",
                "action": "updateRecommendation"
            }
        ],
        "pageRenderActions": [
            {
                "type": "HideFooter"
            }
        ],
        "projectEditorText": "{~Enterprise.Project.projectEditorText~}",
        "components": [
            {
                "id": "SideMenu",
                "component": "Enterprise.Menu",
                "renderTo": "#side-menu",
                "activeItem": "enterprise"
            },
            {
                "id": "SideSubMenu",
                "component": "Enterprise.SubMenu",
                "renderTo": "#side-sub-menu",
                "activeItem": "projects"
            },
            {
                "id": "Enterprise.ProjectDetail",
                "component": "EditableForm",
                "renderTo": "#detail-panel",
                "buttons": true,
                "customSubmitAction":true,
                "submitClass": "submitFromPlan",
                "removeText": "{~Enterprise.Project.ProjectDetail.removeText~}",
                "removeClass": "removeFromPlan",
                "data": {
                    "record": "Enterprise.Project"
                },
                "sections" : [
                    {
                        "type": "Header",
                        "text": "{~Enterprise.Project.ProjectDetail.text~}",
                        "size": "h3",
                        "italic": false,
                        "border": false
                    },

                    {
                        "type": "InputColumns",
                        "columnWidths": [12],
                        "totalColumns": 1,
                        "rows": [
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.name~}",
                                "field" : "name"
                            }
                        ]
                    },
                    {
                        "type": "DefinitionList",
                        "id": "facilityInfoDefinitionList",
                        "renderTo": "#DetailOne",
                        "tooltipAlign": "bottom",
                        "dtWidth": 0,
                        "cls": "dl-horizontal",
                        "inline": true,
                        "rows": [
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.facility~}",
                                "field" : "facility.name"
                            }
                        ]
                    },
                    {
                        "type": "InputColumns",
                        "columnWidths": [6, 6],
                        "totalColumns": 2,
                        "rows": [
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.project~}",
                                "field" : "energyConservationOption.productCategory.name"
                            }, {
                                "label" : "{~Enterprise.Project.ProjectDetail.status~}",
                                "field": {
                                    "component": "field.Select",
                                    "name": "userStatus.value",
                                    "valueField": "value",
                                    "opts": [
                                        { "id": "opt1", "text": "{~Enterprise.Project.ProjectDetail.status.opt1~}" , "value": "In Progress"},
                                        { "id": "opt2",  "text": "{~Enterprise.Project.ProjectDetail.status.opt2~}" , "value": "Completed"},
                                        { "id": "opt3",  "text": "{~Enterprise.Project.ProjectDetail.status.opt3~}" , "value": "Canceled"}
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        "type": "Header",
                        "text": "{~Enterprise.Project.ProjectDetail.timeline~}",
                        "size": "h3",
                        "italic": false,
                        "border": true
                    },
                    {
                        "type": "InputColumns",
                        "columnWidths": [6, 6],
                        "totalColumns": 2,
                        "rows": [
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.start~}",
                                "field" : {
                                    "component" : "field.DateField",
                                    "name" : "start",
                                    "dateTimePicker": true
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.end~}",
                                "field" : {
                                    "component" : "field.DateField",
                                    "name" : "end",
                                    "dateTimePicker": true
                                }
                            }
                        ]
                    },
                    {
                        "type": "Header",
                        "text": "{~Enterprise.Project.ProjectDetail.metrics~}",
                        "size": "h3",
                        "italic": false,
                        "border": true
                    },
                    {
                        "type": "InputColumns",
                        "columnWidths": [6, 6],
                        "totalColumns": 2,
                        "rows": [
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.cost~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "projectCost.value"
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.incentive~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "incentiveAmount.value"
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.electricSavings~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "annualElectricSavings.value"
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.costSavings~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "annualCostSavings.value"
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.gasSavings~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "annualNaturalGasSavings.value"
                                }
                            },
                            {
                                "label" : "{~Enterprise.Project.ProjectDetail.payback~}",
                                "field" : {
                                    "component" : "field.Number",
                                    "name" : "simplePayback"
                                }
                            }
                        ]
                    }
                ],
                "tour": {
                    "body": "Update project information (name, category, status, energy savings, etc.) to reflect the current state of the energy energy efficiency project.",
                    "marginTop": -35
                }
            }
        ],
        "behavior" : {
            "$ .export-csv": {
                "click": {
                    "type": "EnterpriseExportCSV",
                    "target": "ProjectListTabs.ProjectListView",
                    "displayName": "label",
                    "dataField": "field",
                    "exportFileName": "Projects"
                }
            },
            "$ .removeFromPlan": {
                "click": {
                    "type": "LCI.RemovePrjFromPlanRedirect_ProjectPage"
                }
            },
            "$ .submitFromPlan": {
                "click": {
                    "type": "LCI.SaveProjectFromDetailedPage_ProjectPage"
                }
            }
        }
    }
}

Best way for user to update a record
#3

Hi, I bypassed the problem disabling the submit button and creating a custom button outside the EditableForm. I could not capture the event on the button inside the EditableForm