Modify a Customer Record in an MDK App
- 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

- Step 1
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 | 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 controls.
You can find more details about Form Cell page.
-
In the Base Information step, enter the Page Name
Customers_Edit
and click Finish to complete the page creation process. -
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 Controls group.
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 entity -
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
KeyboardType
Phone
Value
click the link icon and bind it to PhoneNumber
property of the Customer entityTo 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. -
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 entityTo 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.
In which file format the Mobile Development Kit (MDK) metadata is defined?
-
- Step 2
While updating the customer details, you may want to close the current page and cancels or interrupts any execution in process.
-
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.
-
Navigate to the Events tab. Click the 3 dots icon for the
OnPress
property and select theCreate a rule/action
. -
Keep the default selection for the Object Type as Action and Folders path.
-
Choose UI in Category | click Close Page | Next.
-
In the Base Information, provide the below information and then click Finish to complete the action creation process.
Property Value Name
CloseModalPage_Cancel
DismissModal
Select Canceled
from the dropdownCancelPendingActions
Select true
from the dropdownYou 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.
-
- Step 3
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
-
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.
-
Navigate to the Events tab. Click the 3 dots icon for the
OnPress
property and select theCreate a rule/action
. -
Keep the default selection for the Object Type as Action and Folders path.
-
Choose Data in Category | click OData | Next.
-
In the Base Information step, provide the below information:
Property Value Name
Customers_UpdateEntity
Type
Select UpdateEntity
from the dropdownService
Select SampleServiceV2.service
from the dropdownEntitySet
Select Customers
from the dropdownReadLink
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. -
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 Finish. The action editor will open with the
Customers_UpdateEntity.action
loaded.You can find more details about Update Entity Action.
-
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 theCreate a rule/action
icon for the Success Action. -
Keep the default selection for the Object Type as Action and Folders path.
-
Choose UI in Category | click Close Page | Next.
-
In the Base Information, provide the below information and then click Finish to complete the action creation process.
Property Value Name
CloseModalPage_Complete
DismissModal
Select Completed
from the dropdownCancelPendingActions
Select false
from the dropdown -
Similar, create a message action displaying error in case of the update failure. In the
Customers_UpdateEntity.action
, click theCreate a rule/action
icon for the Failure Action. -
Keep the default selection for the Object Type as Action and Folders path.
-
Choose Message in Category | click Message | Next.
-
In the Base Information, provide the below information and then click Finish.
Property Value Name
UpdateCustomerEntityFailureMessage
Type
Select Message
from the dropdownMessage
Failed to Save Customer Updates - {#ActionResults:update/error}
Title
Update Customer
OKCaption
OK
OnOK
--None--
CancelCaption
leave it blank OnCancel
--None--
Customers_UpdateEntity
is the Action Result value of theCustomers_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 thenCloseModalPage_Complete.action
will be triggered or ifCustomers_UpdateEntity.action
fails thenUpdateCustomerEntityFailureMessage.action
will be triggered.What is the ReadLink value set in Customers_UpdateEntity.action?
- You will now add an Action Bar item on the
- Step 4
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
.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.
Navigate to the Events tab. Click the 3 dots icon for the
OnPress
property and select theCreate a rule/action
.Keep the default selection for the Object Type as Action and Folders path.
Choose UI in Category | click Navigation | Next.
Provide the below information:
Property Value Action Name
NavToCustomers_Edit
PageToOpen
Select Customers_Edit.page
from the dropdownModalPage
Select true
from the dropdownClick Finish to complete the action creation process.
- Step 5
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.
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.
What features does SAP Business Application Studio offer for developing MDK apps?
- Step 6
Make sure you are choosing the right device platform tab above.