Modify a Customer Record in an MDK App

Regardless of whether your application is online or offline, you can allow users to modify data in the application.

For online applications, the changes are saved to the backend immediately.

For offline applications, the changes are stored locally until they are synced using an Upload action.

In this step, you will create a Section page with a Form Cell Section to contain the Form Cell controls. The page will provide only a subset of items available on the Customer Detail page. You will add the fields that will be editable by the end-user.

1. Right-click the Pages folder | MDK: New Page | Section | Next.

   

2. In the Base Information step, enter the Page Name Customers_Edit and click Finish to complete the page creation process.

   

3. Once the page opens in the page editor, click on the white area to select it’s Action Bar, and set the Caption to Update Customer.

   

4. Now, you will add the fields (like first name, last name, phone & email address) that will be editable by the end-user. In the Layout Editor, expand the Static Container group. Drag and drop Form Cell section onto the Page area.

   

   Form Cell Section is used to contain Form Cell controls in a section page.

5. You will now add Form Cell controls in the Form Cell Section. Expand the Form Cell Controls group, drag and drop a Simple Property onto the Page area.

   

6. Drag and drop three additional Simple Property controls onto the page so you have four total controls.

   

7. Select the first Simple Property control and provide the below information:

   Property	Value
   Name	FCFirstName
   Caption	First Name
   Value	click the link icon and bind it to FirstName property of the Customer entity

   

8. Select the second Simple Property control and provide the below information:

   Property	Value
   Name	FCLastName
   Caption	Last Name
   Value	click the link icon and bind it to LastName property of the Customer entity

   

9. Select the third Simple Property control and provide the below information:

   Property	Value
   Name	FCPhone
   Caption	Phone
   KeyboardType	Phone
   Value	click the link icon and bind it to PhoneNumber property of the Customer entity

   

   To streamline data entry, the keyboard displayed when editing a SimplePropertyFormCell should be appropriate for the type of content in the field. If your app asks for number, for example, it should display the phone keyboard.

10. Select the last Simple Property control and provide the below information:

    Property	Value
    Name	FCEmail
    Caption	Email
    KeyboardType	Email
    Value	click the link icon and bind it to EmailAddress property of the Customer entity

    

    To streamline data entry, the keyboard displayed when editing a SimplePropertyFormCell should be appropriate for the type of content in the field. If your app asks for an email address, for example, it should display the email address keyboard.

While updating the customer details, you may want to close the current page and cancels or interrupts any execution in process.

1. In Customers_Edit.page, drag and drop an Action Bar Item control to the upper left corner of the action bar.

   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. In the Properties pane, click the link icon to open the object browser for the System Item property.

   Double-click the Cancel type and click OK.

   

   System Item are predefined system-supplied icon or text. Overwrites Text and Icon if specified.

3. In Events tab, click the dotted icon for the OnPress property to open the Object Browser.

   Double click the CloseModalPage_Cancel.action and click OK to set it as the OnPress Action.

   

   You can close pages with the option to terminate ongoing events or wait until they are complete. Visit documentation for more details about Close Page Action.

The next step is to store the updated record locally for an offline application or send the updated record directly back to the backed for online applications.

• You will now add an Action Bar item on the Customers_Edit.page that will call an OData Update Entity action to save the record
• You may want to close the page when the update action is successful
• You may want to show a failure message if the update action fails to save the changes

First, add an action bar item on the Customers_Edit.page

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

   

2. Click the link icon to open the object browser for the System Item property. Double-click the Save type and click OK.

   

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

   

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

   

5. Choose Data in Category | click OData | Next.

   

6. In the Base Information step, provide the below information:

   Property	Value
   Name	Customers_UpdateEntity
   Type	Select UpdateEntity from the dropdown
   Service	Select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	Select Customers from the dropdown
   ReadLink	click link icon and double-click readLink

   

   This action will map the changes to the correct entities in the OData service and save the changes.

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

7. Click Next.

8. In Property and Update Links step, uncheck City.

9. Since in Customers_Detail.page, you defined four properties (First Name, Last Name, Phone & Email) to be edited, now, in this step, you will bind them to respective UI Controls.

   Check the EmailAddress property and click the link icon to open the object browser.

   Change the drop down in the object browser to Controls & ClientData, click the Current Page radio button.

   In the search box start typing the control name FCEmail. The list will filter down to show the matching values. Double-click the Value (Value) entry under the FCEmail field and click OK to set binding.

   

10. Repeat the above step for remaining properties: FirstName, LastName and PhoneNumber.

![MDK](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-edit-customer/img-3.8.png)

Click **Finish**. The action editor will open with the `Customers_UpdateEntity.action` loaded.

>You can find more details about [Update Entity Action](https://help.sap.com/doc/69c2ce3e50454264acf9cafe6c6e442c/Latest/en-US/docs-en/reference/schemadoc/Action/ODataService/UpdateEntity.schema.html).

11. 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 close the page and allow any execution to continue. On its failure, you may want to display an error.

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

    

12. Create a new message action displaying error in case of the update failure. In the Customers_UpdateEntity.action, click the Create a rule/action icon for the Failure Action.

    

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

    

14. Choose Message in Category | click Message | Next.

    

15. In the Base Information, provide the below information and then click Finish.

    Property	Value
    Name	UpdateCustomerEntityFailureMessage
    Type	Select Message from the dropdown
    Message	Failed to Save Customer Updates - {#ActionResults:Customers_UpdateEntity/error}
    Title	Update Customer
    OKCaption	OK
    OnOK	--None--
    CancelCaption	leave it blank
    OnCancel	--None--

    

    Customers_UpdateEntity is the Action Result value of the Customers_UpdateEntity.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.

When Customers_UpdateEntity.action gets executed successfully then CloseModalPage_Complete.action will be triggered or if Customers_UpdateEntity.action fails then UpdateCustomerEntityFailureMessage.action will be triggered.

You will navigate from the Customer Detail page to a new page modifying customer information. For this, you will add an action bar item on the Details page and will link it to a navigation action. When the action bar item is pressed by the end-user that will open the Customers_Edit.page.

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

   

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

   Double-click the Edit type and click OK.

   

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

   

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

   

5. Choose UI in Category | click Navigation | Next.

   

6. Provide the below information:

   Property	Value
   Name	NavToCustomers_Edit
   PageToOpen	Select Customers_Edit.page from the dropdown
   ModalPage	Select true from the dropdown

   

7. Click Finish to complete the action creation process.

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services .

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

Android iOS

1. Tap Check for Updates in the user menu on the Main page, you will see a New Version Available pop-up, tap Now.

   

2. Tap Customers, tap one of the available customer record, you will then navigate to Customer detail page. Tap edit icon. Update existing values for the given customer. You will notice the Phone keyboard appears when updating Phone value. Tap save icon and record gets updated locally.

   

3. You can cross verify if the record has been updated in the backend.

   Backend endpoint can be found in Mobile Services Admin UI .

   Mobile Applications → Native/MDK → click the MDK App myapp.mdk.demo → Connectivity → click Launch in Browser icon

   

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

   But here result is pointing to old values.

   

   Since this is an Offline application, new entry is added to the request queue of the local store which needs to be sent or uploaded to the backend explicitly.

   MDK template has added a Sync Changes option in the user menu 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.

4. Tap on Sync Changes in the user menu On Main page to push the local changes to the backend, a successful message will be shown once data is submitted.

   

Now, refresh the URL to check if record has been updated in the backend. As Sync is pressed, UploadOffline.action gets triggered to upload local changes from device to the backend and on success of this call, DownloadOffline.action is being called.