Editing Requests Post Approval

When the end user fills the form, the data gets stored in the respective table after the request is approved. There may be scenarios where you may want the approved requests to be displayed as an app in a grid view. In such cases, Canvas felt the need to provide an option to the end user to edit or delete the requests based on the user entitlements by accessing them through the grid. For this, the liveEdit API has been implemented. The end user can edit or delete requests on the click of a row on the grid, button, and link or through a context menu configured in the app. In case of button click, developers must ensure to capture and pass the correct grid row data to the liveEdit API.

In case the custom form container is used, then explicit wiring is needed to proceed with the live edit or delete sequence. The wiring can be done using the executeAction API. For information on custom action wiring, refer API to Wire Custom Actions in the Self-designed Forms or Form Container to the Request Model Actions section.

For information, refer form, app, and menu creation.

The following screen shot is of the Employee Details app which displays the approved requests submitted by the end users through the EMP_DETAILS_FORM.

Edit and Delete menus have been configured in the app.

Let us assume a scenario where a user wants to change the mobile number. The user accesses the form by clicking the Edit menu on the grid and the self-designed form launches with the request details.

The user edits the Mobile number and submits the request for approval.

Sample code used for editing a record by Edit menu

CMHR.registerHandler("EDIT_MENU", function(resp) 
{
	var obj = { "formId" : "EMP_DETAILS_FORM", 
				"LIVE_MODE" : "EDIT", 
				"containerId" : "EMP_DETAILS_FORM_CONT", 
				"widgetId" : "EMP_GRID"
			  };
	var rowData = resp.record.data;
	canvas.modeler.liveEdit(obj, rowData);
}); 

/*  Here, EDIT_MENU is the menu ID. rowData is used to 
*	store the data on the grid row that was right-clicked. 
*	On clicking edit, the EMP_DETAILS_FORM is launched in 
*	a custom container (EMP_DETAILS_FORM_CONT) through the 
*	liveEdit API (Mode being EDIT). The form displays the 
*	details of the row on which the right-click was performed.*/

Sample code used for deleting a record by Delete menu

CMHR.registerHandler("DELETE_MENU", function(resp) 
{
	var obj = { "formId" : "EMP_DETAILS_FORM", 
				"LIVE_MODE" : "DELETE", 
				"containerId" : "EMP_DETAILS_FORM_CONT", 
				"widgetId" : "EMP_GRID"
			  };
	var rowData = resp.record.data;
	canvas.modeler.liveEdit(obj, rowData);
}); 

/*  Here, DELETE_MENU is the menu ID. rowData is used to 
*	store the data on the grid row that was right-clicked. 
*	On clicking delete, the EMP_DETAILS_FORM is launched 
*	in a custom container (EMP_DETAILS_FORM_CONT) through 
*	the liveEdit API (Mode being DELETE). The form displays 
*	the details of the row on which the right-click was performed.*/

Sample code used for editing a record by single-click on the grid row

CWEH.registerHandler('EMP_GRID', CWEC.ROW_CLICK, function(rowInd, record) 
{
	var obj = { "formId" : "EMP_DETAILS_FORM", 
				"LIVE_MODE" : "EDIT", "containerId" : 
				"EMP_DETAILS_FORM_CONT", 
				"widgetId" : "EMP_GRID"
			  }; 
	canvas.modeler.liveEdit(obj, record); 
}); 

/* Here, CWEH is Canvas Widget Event Handler, 
*	CWEC is Canvas Widget Event Constant, 
*	ROW_CLICK is the event for grid row click, 
*	rowInd is the index of the grid row that is clicked 
*	and record indicates the data of the grid row that is clicked. 
*	When a row in the grid is clicked, the EMP_DETAILS_FORM is 
*	launched in a custom container (EMP_DETAILS_FORM_CONT) through 
*	the liveEdit API (Mode being EDIT). The form displays the 
*	details of the row that is clicked.*/