Skip to Content

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 on Mobile app and sync these changes with backend
  • How to delete a record in web application
jitendrakansalJitendra KansalJanuary 29, 2023
Created by
jitendrakansal
October 4, 2022
Contributors
maximilianone
jitendrakansal

You may clone an existing project from GitHub repository to start with this tutorial.

MDK
  • Step 1

    You will add an action bar item to the Customer Detail page called Trash and link it to an event.

    1. In Customers_Detail.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 (at the top of the page).

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

      Double click the Trash type and click OK.

      MDK
    3. Navigate to the Events tab. Click the 3 dots icon for the OnPress property and select the Create a rule/action.

      MDK
    4. Select the Object Type as Rule and keep the default Folders path.

      MDK

      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.

    5. Enter the Rule name as Customers_DeleteConfirmation and click Finish to complete the rule creation process.

      MDK
    6. Replace the generated code with below snippet.

      JavaScript
      Copy
      export default function DeleteConfirmation(context) {
          return context.executeAction('/DemoSampleApp/Actions/DeleteConfirmation.action').then((result) => {
              if (result.data) {
                  return context.executeAction('/DemoSampleApp/Actions/Customers_DeleteEntity.action').then(
                      (success) => Promise.resolve(success),
                      (failure) => Promise.reject('Delete entity failed ' + failure));
              } else {
                  return Promise.reject('User Deferred');
              }
          });
      }
      

      In above code there are references to DeleteConfirmation.action and Customers_DeleteEntity.action , those don’t exist in your metadata project yet. You will create these actions in next steps.

      MDK

    7. In the above rule, double-click on the red line highlighting missing reference for DeleteConfirmation.action. You will notice a bulb icon suggesting some fixes, click on it, select MDK: Create action for this reference, and click Message Action.

      MDK
    8. Provide the below information in the DeleteConfirmation.action:

      Field Value
      Message Delete current entity?
      Title Delete Confirmation
      OKCaption OK
      OnOK --None--
      CancelCaption Cancel
      OnCancel --None--
      MDK

      When user taps or clicks the Trash icon on the Customer Detail page, a message will be displayed to confirm if user wants to delete current record. On it’s confirmation, Customers_DeleteEntity.action is executed.

    9. Similarly, fix the path reference for the missing Customers_DeleteEntity.action. Switch back to the Customers_DeleteConfirmation.js or open it again if it was closed. Double-click on the red line highlighting missing reference for Customers_DeleteEntity.action. You will notice a bulb icon suggesting some fixes, click on it, select MDK: Create action for this reference, and click ODataService DeleteEntity Action.

      MDK
    10. Provide the below information in the Customers_DeleteEntity.action:

      Property Value
      ServiceSelect SampleServiceV2.service from the dropdown
      EntitySet Select Customers from the dropdown
      ReadLinkclick link icon and double click readLink
      MDK

      This action will store deleted record locally for an offline application or delete directly back to the backed for online applications.

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

      You can find more details about Delete Entity Action.

    In general, there are two databases in a mobile offline store. What are those?

  • Step 2

    When the above OData action is executed, you may want to display messages on its success and failure behavior. For example, on its success, you may want to display a success message and allow any execution to continue. On its failure, you may want to display an error.

    1. In the Customers_DeleteEntity.action, scroll down and expand the Common Action Properties section. Click the link icon to open the object browser for the Success Action and bind it to CloseModalPage_Complete.action.

      MDK
    2. Create a message action for displaying a message in case deleting of a customer fails. In the Customers_DeleteEntity.action, provide value as delete for the Action Result and click the Create a rule/action icon for the Failure Action.

      MDK
    3. Keep the default selection for the Object Type as Action and Folders path.

      MDK
    4. In the Template Selection step, choose Message in Category | click Message | Next.

      MDK
    5. In the Base Information step, provide the below information:

      Property Value
      NameDeleteCustomerEntityFailureMessage
      Type Select Message from the dropdown
      Message Delete entity failure - {#ActionResults:delete/error}
      Title Delete Customer
      OKCaption OK
      OnOK --None--
      CancelCaption leave it blank
      OnCancel --None--
      MDK

      delete is the Action Result value of the Customers_DeleteEntity.action. 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.

    6. Click Finish to complete the action creation process.

    When Customers_DeleteEntity.action gets executed successfully then CloseModalPage_Complete.action will be triggered or if Customers_DeleteEntity.action fails then DeleteCustomerEntityFailureMessage.action will be triggered.

    Which component distributes the Mobile Development Kit (MDK) metadata to the MDK Mobile client?

  • Step 3

    Deploy the updated application to your MDK client.

    1. Right-click Application.app and select MDK: Deploy.

      MDK
    2. Select deploy target as Mobile & Cloud.

      MDK

      You should see success message for both deployments.

      MDK

      Alternatively, you can select MDK: Redeploy in the command palette (View menu>Find Command OR press Command+Shift+p on Mac OR press Ctrl+Shift+P on Windows machine), it will perform the last deployment.

      MDK

  • Step 4

    Make sure you are choosing the right device platform tab above.

    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/MDK | click the MDK App com.sap.mdk.demo | Mobile Connectivity | click Launch in Browser icon

    MDK

    It will open the URL in a new tab, remove ?auth=uaa and add /Customers at the end of the URL.


    What is the ActionResult value set in the Customers_DeleteEntity.action?

Back to top