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 on form, app, and menu creation, refer the Expert Studio Dev Guide available in Unmail > Canvas Technology > Documents > Release 18.1.0.0.
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.*/
Editing Requests Pending for Approval
The saved, pending for approval, and rejected requests are stored in the CT_REQ_MDLR_STATE_MODEL until they are approved. There may be scenarios when you want the data in this table to be displayed in an app in a grid view. In such cases, Canvas felt the need to provide an option to the end user to edit, delete or approve the requests based on the user entitlements by accessing them through the grid. For this the requestEdit API has been implemented. The end user can edit, delete or approve requests on the click of a button, a link or through a context menu configured in the app.
Note: STATE_ID and VERSION columns in the CT_REQ_MDLR_STATE_MODEL table are primary keys and must be provided in the app view. If not, the requestEdit API cannot be used.
If the Model ID is mapped to the form, by default the form is displayed in the Request Modeler container. In case the custom form container is used, then explicit wiring is needed to proceed with the request edit, delete or approve 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 on form, app, and menu creation, refer the Expert Studio Dev Guide available in Unmail > Canvas Technology > Documents > Release 18.1.0.0.
The following screen shot is of the Request Details app which displays the saved, rejected or pending for approval requests. In this example, only Edit and Delete menus have been configured for the app. You can also configure Approve menu for your app as required.
Let us assume a scenario where an employee wants to delete a raised request. The employee accesses the form by clicking the delete menu on the grid and the self-designed form launches in a container with the details.
The following message displays when the user deletes the request.
- Sample code for editing a record
CMHR.registerHandler("STATE_EDIT", function(resp) {
var obj = {formId : "EMP_DETAILS_FORM", requestMode : "EDIT", containerId : "EMP_DETAILS_FORM_CONT"};
canvas.modeler.requestEdit(obj, resp);
});
/* Here, STATE_EDIT is the menu ID. On clicking edit, the EMP_DETAILS_FORM is launched in a custom container (EMP_DETAILS_FORM_CONT) using the requestEdit API (Mode being EDIT). The form displays the details of the row on which the right-click was performed.*/
- Sample code for deleting a record
CMHR.registerHandler("STATE_DELETE", function(resp) {
var obj = {formId : "EMP_DETAILS_FORM", requestMode : "DELETE", modContReqd: "N"};
canvas.modeler.requestEdit(obj, resp);
});
/* Here, STATE_DELETE is the menu ID. On clicking delete, the EMP_DETAILS_FORM is launched in a custom container (EMP_DETAILS_FORM_CONT) using the requestEdit API (Mode being DELETE). The form displays the details of the row on which the right-click was performed.*/
- Sample code for approving a record
CMHR.registerHandler("STATE_APPROVE", function(resp) {
var obj = {formId : "EMP_DETAILS_FORM", requestMode : "APPROVE", containerId : "EMP_DETAILS_FORM_CONT"};
canvas.modeler.requestEdit(obj, resp);
});
/* Here, STATE_APPROVE is the menu ID. On clicking Approve, the EMP_DETAILS_FORM is launched in a custom container (EMP_DETAILS_FORM_CONT) using the requestEdit API (Mode being APPROVE). The form displays the details of the row on which the right-click was performed.*