Skip to Content

Delete a Customer Record in an MDK App

test
0 %
Delete a Customer Record in an MDK App
Details
// Explore More Tutorials

Delete a Customer Record in an MDK App

Allow the user to delete a customer record in an MDK app.

You will learn

  • How to delete a customer record
  • How to store changes locally
  • How to sync local changes with backend


Step 1: Store the deleted record locally

The next step is to store deleted record locally for an offline application or delete directly back to the backed for online applications. You will now create an OData delete action to delete a customer record. You will also show a failure message if the delete action fails.

First, define a failure message action for displaying a message in case deleting of a customer fails.

Right click on the Actions folder | New MDK Action | Message Action | Next.

MDK

Provide the below information:

Property Value
Action Name DeleteCustomerFailure
Type select Message
Message Delete entity failure - {{#ActionResults:delete/#Property:error}}
Title Delete Customer
OKCaption OK
OnOK --None--
CancelCaption leave it blank
OnCancel --None--

In this expression {{#ActionResults:delete/#Property:error}}, delete is a reference to the Action Result name in the Delete Entity action (you will create this action in following step). This reference is used to pass the results to subsequent actions in the chain. These actions can reference the action result as needed. In this case if there is a failure, you access the error property of the action result to display the OData failure message.

This is the standard Binding Target Path (also called Dynamic Target Path) syntax used when you need to include a binding with other bindings or within a string as used in the message here.

You could exclude above expression and can just display a generic message.

MDK

Click Next and then Finish on the Confirmation step.

Next, you will create the OData Delete action to delete a customer record.

You can find more details about Delete Entity Action.

Right click on the Actions folder | New MDK Action | OData Action | Next.

MDK

Provide the below information:

Property Value
Action Name DeleteCustomer
Type DeleteEntity
Service SampleServiceV2
EntitySet Customers
Read Link {@odata.readLink}
MDK

The readlink is a direct reference to an individual entity set entry.

Click Next and Finish on the confirmation screen. The action editor will open with the DeleteCustomer action loaded.

Next, set Common Action Properties for DeleteCustomer action.

Provide the below information:

Property Value
Action Result delete
Success Action ClosePageComplete.action
Failure Action DeleteCustomerFailure.action

When DeleteCustomer action gets executed successfully then ClosePageComplete action will be triggered or if DeleteCustomer action fails then DeleteCustomerFailure action will be triggered.

delete value for Action Result is reference to DeleteCustomerFailure.action created in step 1.

You could also show a success message for Success Action or chain a message to success of ClosePageComplete.action.

MDK

Save the changes to the DeleteCustomer action.

Log on to answer question
Step 2: Create a new dialog confirmation

In the MDK editor, you will write a rule in JavaScript called Customers_DeleteConfirmation.js to display a dialog to confirm if user wants to delete current record. On it’s confirmation, customer delete entity action is executed.

You can find more details about writing a Rule.

Right click on the Rules folder | New | File.

MDK

Enter the file name Customers_DeleteConfirmation.js, click OK.

Copy and paste the following code.

export default function DeleteConfirmation(clientAPI) {
	let dialogs = clientAPI.nativescript.uiDialogsModule;
	return dialogs.confirm("Delete current record?").then((result) => {
		if (result === true) {
			return clientAPI.executeAction('/DemoSampleApp/Actions/DeleteCustomer.action').then(
				(success) => Promise.resolve(success),
				(failure) => Promise.reject('Delete entity failed ' + failure));
		} else {
			return Promise.reject('User Deferred');
		}
	});
}

You can navigate from a JavaScript file to the MDK file by right clicking on it.
MDK

Log on to answer question
Step 3: Add a trash button to customer details page

You will add a button to the Customer Detail page called Trash. You will link this button to the Customers_DeleteConfirmation.js rule you just created. This event will display a dialog when the Trash button is pressed by the end-user.

In CustomerDetail page, drag and drop an Action Bar Item to the upper right of the action bar.

MDK

Action Bar Item is a button that users can use to fire actions when pressed. You can add an Action Bar Item only to the Action Bar (normally at the top of the page).

In the Properties pane, set Position to Right.

MDK

Click the link icon to open the object browser for the System Item property.

Double click on the Trash type and click OK.

MDK

Next, click the Events tab, click the link icon for the OnPress property to open the object browser.

Double Click on the Customers_DeleteConfirmation.js rule and click OK to set it as the OnPress Action.

You could link OnPress property directly to OData delete action directly instead to this JavaScript file. Idea of linking to JavaScript file is to let you understand another way to achieve similar functionality.

MDK

Save the changes to the CustomerDetail page.

Log on to answer question
Step 4: Deploy, activate and test the application

Deploy the updated application to your MDK client.

Right click on the MDK Application in the project explorer pane and select MDK Deploy and Activate, click Next and deploy to Mobile Services.

Make sure to select required Destination Name and Application Id as per your target environment (Neo or Cloud Foundry).

Re-launch the app on your device, you may asked to authenticate with passcode or Touch ID. You will see a Confirmation pop-up, click OK.

Click Customer List | click any record | click trash icon.

MDK

A confirmation dialog appears for user action, click OK.

MDK

Since this is an Offline application, record has been removed from local store and deletion request has been added to request queue. This has to be sent or uploaded to the backend explicitly.

MDK base template has added a Sync button on main page of the app to upload local changes from device to the backend and to download the latest changes from backend to the device. Actions | Service | UploadOffline.action & DownloadOffline.action.

On Main page, click Sync, a successful message will be shown.

MDK

Re-launch the app on your device, you may asked to authenticate with passcode or Fingerprint. You will see a Confirmation pop-up, click OK.

Click Customer List | click any record | click trash icon.

MDK

A confirmation dialog appears for user action, click OK.

MDK

Since this is an Offline application, record has been removed from local store and deletion request has been added to request queue. This has to be sent or uploaded to the backend explicitly.

MDK base template has added a Sync button on main page of the app to upload local changes from device to the backend and to download the latest changes from backend to the device. Actions | Service | UploadOffline.action & DownloadOffline.action.

On Main page, click SYNC, a successful message will be shown.

MDK

You can cross verify if this record has been deleted in the backend.

Backend URL can be found in Mobile Services Cockpit.

Mobile Applications | Native/Hybrid | Click on the MDK App | Sample Back End | click Root URL v2 | append /Customers

As Sync is pressed, UploadOffline.action gets trigger to upload local changes from device to the backend and on success of this call, DownloadOffline.action is being called.

In general, there are two databases in an offline store. What are those?
×

Next Steps

Back to top