Skip to main content
Version: v11.9.4

Adding CRUD functionalities to dynamic data table

When we bind a data table to a web service variable associated with a GET API, editing, inserting, and deleting the entries become unfeasible due to the read-only nature of the GET API. This can be handled by creating dedicated variables.

Variables to add CRUD functionalities​

Dedicated variables need to be created that are responsible for invoking the necessary POST, PATCH, and DELETE calls, enabling the modification and manipulation of the data.

This approach helps to seamlessly handle scenarios where the primary variable is confined to a GET API, ensuring comprehensive control over the data interaction within the data table.

CRUD Functionalities for GET API Variable​

  1. Import the HRDB employee GET API into the studio as a web service. To know more about web services and how to import different web services, see Web Services.

getemployeeapi.png

  1. Create a web service variable for the above imported GET API and bind it to a data table.

  2. Go to the Advanced Settings of the data table.

advancedsettings_img.png

  1. Navigate to the Actions tab and enable New, Edit, and Delete actions.

advancedsetting_actions.png

Inserting New Entries in Data Table​

  1. Import POST API as a Web Services.

post_apidynamicdatatable.png

  1. Create the respective web service variable.

post_apivariablecreation.png

  1. Go to the Events tab of the data table and set On Before Record Insert event to JavaScript.

insertnewrecord_dynamic_table.png

  1. Add the below code. Here svPostEmployee is the web service variable that is bound to POST API, wm_data_json is the name of the body parameter, and row is the data that we are inserting into the data table.
Page.employeeTable1Beforerowinsert = function($event, widget, row, options) {

 Page.Variables.svPostEmployee.setInput({
 "wm_data_json": row
 });

 Page.Variables.svPostEmployee.invoke();

};

Editing Entries within Data Table​

  1. Import PATCH API as a Web Services.

patch_path_param_dymanictable.png

  1. Create a respective web service variable.

patch_api_variable_creation.png

  1. Go to the Events tab of the data table and set On Before Record Update event to JavaScript.

before_updatepatch.png

  1. Add the below code. Here svEditEmployee is the web service variable that is bound to PATCH API, RequestBody is the name of the body parameter, and row.empId is the path parameter.
Page.employeeTable1Beforerowupdate = function($event, widget, row, options) {
 Page.Variables.svEditEmployee.setInput({
 "empId": row.empId,
"RequestBody": row
})

Page.Variables.svEditEmployee.invoke();
};

Deleting Entries from Data Table​

  1. Import DELETE API as a Web Services.

delete_apidynamictable.png

  1. Create a respective web service variable.

delete_apicreatevariable.png

  1. Go to the Events tab of the data table and set On Before ROW Delete event to JavaScript.

before_rowdeletedynamic.png

  1. Add the below code. Here svDeleteEmployee is the web service variable that is bound to DELETE API, RequestBody is the name of the body parameter, and row.empId is the path parameter.
Page.employeeTable1Beforerowdelete = function($event, widget, row, options) {

 Page.Variables.svDeleteEmployee.setInput({
 "empId": row.empId
 });

 Page.Variables.svDeleteEmployee.invoke();
};