- Developers
- Tutorials
- Modify a Customer Record in an MDK App
Modify a Customer Record in an MDK App
-
Join the conversation on Facebook
-
Join the conversation on Twitter
-
Subscribe to the YouTube Channel
-
Join the conversation on LinkedIn
-
View our projects on GitHub
-
Share via email
Modify a Customer Record in an MDK App
You will learn
- How to create a new page for modifying customer details such as name, email and phone number
- How to store changes locally on Mobile app and sync these changes with backend
- How to update a record in web application

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 the Edit Customer Detail page as a Form Cell Page. This type of page allows for form input style changes. 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.
-
Right-click the Pages folder | MDK: New Page | Form Cell Page | Next.
A Form Cell Page is suitable for pages that generate new objects or modify existing objects. It includes a form cell container by default. You can add multiple containers or action controls to this page. Under each container section, you can add various container items.
You can find more details about Form Cell page.
-
Enter the Page Name
Customers_Edit
and click Next and the Finish on the Confirmation step. -
In the Properties pane set the Caption to Update Customer.
-
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 Control | Container Item section.
Drag and drop a Simple Property onto the Page area.
-
Drag and drop three additional Simple Property controls onto the page so you have four total controls.
-
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 entityMake sure, Format should be set as Binding.
-
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 -
Select the third Simple Property control and provide the below information:
Property Value Name
FCPhone
Caption
Phone
Value
click the link icon and bind it to PhoneNumber
property of the Customer entity -
Select the last Simple Property control and provide the below information:
Property Value Name
FCEmail
Caption
Email
Value
click the link icon and bind it to EmailAddress
property of the Customer entity
You will create a CloseModalPage_Cancel.action
that closes the current page and cancels or interrupts any execution in process. This will be used with the cancel button on the Edit Customer page.
You can close pages with the option to terminate ongoing events or wait until they are complete. Visit documentationfor more details about Close Page Action.
-
Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Close Page Action | Next.
-
Provide the below information:
Property Value Action Name
CloseModalPage_Cancel
DismissModal
Select Canceled
from the dropdownCancelPendingActions
Select true
from the dropdown -
Click Next and then Finish on the confirmation step.
Now, you will add a button on the Edit Customer page and set it’s onPress
to CloseModalPage_Cancel.action
created in step 2.
-
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).
-
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.
-
Now, you will set the
onPress
event toCloseModalPage_Cancel.action
.In Events tab, click the link icon for the
OnPress
property to open the object browser.Double-click the
CloseModalPage_Cancel.action
and click OK to set it as theOnPress
Action.
Now, create a navigation action that will open the Customers_Edit.page
when executed.
-
Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Navigation Action | Next.
-
Provide the below information:
Property Value Action Name
NavToCustomers_Edit
PageToOpen
Select Customers_Edit.page
from the dropdownModalPage
Select true
from the dropdown -
Click Next and then Finish on the confirmation step.
You will add a button to the Customers_Detail.page
called Edit. You will link this button to the navigation action you just created. This event will open the Customers_Edit.page
when the Edit button is pressed by the end-user.
-
In
Customers_Detail.page
, drag and drop an Action Bar Item to the upper right of the action bar. -
Click the link icon to open the object browser for the System Item property.
Double-click the Edit type and click OK.
-
In the Properties pane, click the Events tab, click the link icon for the
OnPress
property to open the object browser.Double-click the
NavToCustomers_Edit.action
and click OK to set it as theOnPress
Action.
The next step is to store newly updated record locally for an offline application or send the updated record directly back to the backed for online applications. You will now create an action to map the changes received from the Customers_Edit.page
to the corresponding field in the OData service. You will also show a failure message if the update action fails to save the changes.
First, define a failure message.
-
Right-click the Actions folder | MDK: New Action | choose MDK Message Actions in Category | click Message Action | Next.
-
Provide the below information:
Property Value Action Name
UpdateCustomerEntityFailureMessage
Type
Select Message
from the dropdownMessage
Failed to Save Customer Updates
Title
Update Customer
OKCaption
OK
OnOK
--None--
CancelCaption
leave it blank OnCancel
--None--
-
Click Next and then Finish on the confirmation step.
-
Next, you will define Close Page-Complete Action which allows the end-user to close the page and allow any execution to continue.
You can close pages with the option to terminate ongoing events or wait until they are complete.
Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Close Page Action | Next.
-
Provide the below information:
Property Value Action Name
CloseModalPage_Complete
DismissModal
Select Completed
from the dropdownCancelPendingActions
Select false
from the dropdown -
Click Next and then Finish on the confirmation step.
-
Next, you will create the OData Update action to update entity action that will map the changes to the correct entities in the OData service and save the changes.
You can find more details about Update Entity Action.
Right-click the Actions folder | MDK: New Action | choose MDK Data Actions in Category | click OData Action | Next.
-
Provide the below information:
Property Value Action Name
Customers_UpdateEntity
Type
Select UpdateEntity
from the dropdownService
Select Sample.service
from the dropdownEntitySet
Select Customers
from the dropdownReadLink
click link icon and Double-click readLink
The
readLink
is a direct reference to an individual entity set entry. -
Click Next.
-
In Property and Update Links step, uncheck City.
-
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 theFCEmail
field and click OK to set binding. -
Repeat the above step for remaining properties:
FirstName
,LastName
andPhoneNumber
.Click Next and Finish on the confirmation screen. The action editor will open with the
Customers_UpdateEntity.action
loaded. -
Next, define Success and Failure actions for
Customers_UpdateEntity.action
.In the action editor for the new action, expand the Common Action Properties and provide the below information:
Property Value Success Action
Click the link icon and bind it to CloseModalPage_Complete.action
Failure Action
Click the link icon and bind it to UpdateCustomerEntityFailureMessage.action
When
Customers_UpdateEntity.action
gets executed successfully thenCloseModalPage_Complete.action
will be triggered or ifCustomers_UpdateEntity.action
fails thenUpdateCustomerEntityFailureMessage.action
will be triggered. -
Next, you will set the
OnPress
event of the Save button.Now, that the Update action is created, you will need to call the Update action when the end-user presses the Save button. You will add a Save button on the
Customers_Edit.page
and link it to theCustomers_UpdateEntity.action
.In
Customers_Edit.page
, drag and drop an Action Bar Item to the upper right corner of the action bar.Click the link icon to open the object browser for the System Item property.
Double-click the Save type and click OK.
-
In the Properties pane | Events tab, click the link icon for the
OnPress
property to open the object browser, bind it toCustomers_UpdateEntity.action
.
Deploy the updated application to your MDK client.
-
Right-click
Application.app
and select MDK: Deploy. -
Select deploy target as Mobile & Cloud.
You should see success message for both deployments.
Make sure you are choosing the right device platform tab above.
-
Re-launch the app on your device, you may asked to authenticate with passcode or Biometric authentication. You will see a Confirmation pop-up, tap OK.
-
Tap CUSTOMER LIST, tap one of the available customer record, you will then navigate to Customer detail page. Tap
edit
icon. -
For example, update First Name from
Isabelle
toCarolina
. Tap save icon.Local record gets updated accordingly.
-
You can cross verify if the record has been updated in the backend.
Backend endpoint can be found in Mobile Services Cockpit.
Mobile Applications | Native/Hybrid | click the MDK App com.sap.mdk.demo | Mobile 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 First Name (
Isabelle
).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 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, tap SYNC, a successful message will be shown.
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.

-
Re-launch the app on your device, you may asked to authenticate with passcode or Biometric authentication. You will see a Confirmation pop-up, tap OK.
-
Tap Customer List, tap one of the available customer record, you will then navigate to Customer detail page. Tap Edit.
-
For example, updating First Name from
Isabelle
toCarolina
. Tap Save.Local record gets updated accordingly.
-
You can cross verify if the record has been updated in the backend.
Backend endpoint can be found in Mobile Services Cockpit.
Mobile Applications | Native/Hybrid | click the MDK App com.sap.mdk.demo | Mobile 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 First Name (
Isabelle
).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 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, tap Sync, a successful message will be shown.
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.

-
Either click the highlighted button or refresh the web page to load the changes.
If you see the error
404 Not Found: Requested route ('xxxxxtrial-dev-nsdemosampleapp-approuter.cfapps.xxxx.hana.ondemand.com') does not exist.
while accessing the web application, make sure that in your space cockpit, highlight applications are in started state. -
Click Customer List, click one of the available customer record, you will then navigate to Customer detail page.
-
Click Edit.
-
For example, updating First Name from
Isabelle
toCarolina
. Click Save.Record gets updated accordingly.
-
You can cross verify if the record has been updated in the backend.
Backend endpoint can be found in Mobile Services Cockpit.
Mobile Applications | Native/Hybrid | click the MDK App com.sap.mdk.demo | Mobile 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.
Congratulations, you have successfully modified a Customer Record and you are now all set to define a Validation Rule in an MDK App.
Next Steps
-
Step 1: Create a new page for modifying customer data
-
Step 2: Define a close page-cancel action
-
Step 3: Add cancel button on the Edit Customer page
-
Step 4: Create navigation action
-
Step 5: Add edit button to customer details page
-
Step 6: Store the updated data locally
-
Step 7: Deploy the application
-
Step 8: Test the application
- Back to Top