Create a Customer Record in an MDK App
- How to create a customer record
- How to store changes locally on Mobile app and sync these changes with backend
- How to update a record in web application
Prerequisites
- You have created an MDK app as described in Create Your First Mobile App with the Mobile Development Kit (MDK).
If you didn’t follow the prerequisite then you may clone an existing project from GitHub repository to start with this tutorial.

- Step 1
In this step, you will create the
Customers_Create.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 form sections, 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.
-
In the Base Information step, enter the page Name as
Customers_Create
and click Finish to complete the page creation wizard. -
In the Properties pane, set the Caption to Create Customer.
Now, you will add the fields (like first name, last name, phone, email address & date of birth) for creating a new customer record by the end-user.
-
In the Layout Editor, expand the Controls section, drag and drop a Simple Property onto the Page area.
You can find more details about available controls in Form Cell page.
-
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
FCCreateFirstName
Caption
First Name
PlaceHolder
Enter Value
-
Select the second Simple Property control and provide the below information:
Property Value Name
FCCreateLastName
Caption
Last Name
PlaceHolder
Enter Value
-
Select the third Simple Property control and provide the below information:
Property Value Name
FCCreatePhone
Caption
Phone
KeyboardType
Phone
PlaceHolder
Enter Value
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. -
Select the last Simple Property control and provide the below information:
Property Value Name
FCCreateEmail
Caption
Email
KeyboardType
Email
PlaceHolder
Enter Value
KeyboardType
streamlines the data entry. When entering an email address, it would display the email address keyboard in mobile clients. -
Drag and drop a Date Picker control onto the page area for date of birth parameter.
Provide the below information:
Property Value Name
FCCreateDOB
Caption
DOB
Which UI technology is used by the Mobile Development Kit (MDK) client to display views?
-
- Step 2
While creating a customer record, you may want to close the current page and cancels or interrupts any execution in process.
Now, you will add a button on the Create Customer page and set it’s
onPress
toCloseModalPage_Cancel.action
.Drag and drop an Action Bar Item 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 3 dots icon for the
OnPress
property to open the object browser. Double click theCloseModalPage_Cancel.action
and click OK to set it as theOnPress
Action.
- Step 3
The next step is to store newly created record locally for an offline application or send the new record directly back to the backed for online applications.
- You will add an Action Bar item on the
Customers_Create.page
that will call an OData Create Entity action to save the record - You may want to close the page when the OData Create Entity action is successful
- You may want to show a failure message if the OData Create Entity action fails to save the changes
First, add an action bar item on the
Customers_Create.page
.-
In
Customers_Create.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.
-
In the Template Selection, choose Data in Category | click OData Action | Next.
-
In the Base Information step, provide the below information:
Property Value Name
Customers_CreateEntity
Type
Select CreateEntity
from the dropdownService
Select SampleServiceV2.service
from the dropdownEntitySet
Select Customers
from the dropdown -
Click Next.
-
In Property and Create Links step, uncheck City.
Since in
Customer_Create.page
, you defined five properties (First Name, Last Name, Phone, Email & date of birth) to be added, now in this step, you will bind them to respective UI Controls.Check the
DateOfBirth
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
FCCreateDOB
. The list will filter down to show the matching values. Double click the Value (Value) entry under theFCCreateDOB
field and click OK to set binding. -
Repeat the above step for remaining properties:
EmailAddress
,FirstName
,LastName
andPhoneNumber
. -
Click Finish to complete the action creation process. The action editor will open with the
Customers_CreateEntity.action
loaded.You can find more details about Create 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_CreateEntity.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 toCloseModalPage_Complete.action
. -
Create a message action displaying error in case of the update failure. In the
Customers_CreateEntity.action
, click theCreate a rule/action
icon for the Failure Action. -
Keep the default selection for the Object Type as Action and Folders path.
-
In the Template Selection step, choose Message in Category | click Message Action | Next.
-
In the Base Information step, provide the below information:
Property Value Name
CreateCustomerEntityFailureMessage
Type
Select Message
from the dropdownMessage
Failed to Create Customer record - {#ActionResults:Customers_CreateEntity/error}
Title
Create Customer
OKCaption
OK
OnOK
--None--
CancelCaption
leave it blank OnCancel
--None--
Customers_CreateEntity
is the Action Result value of theCustomers_CreateEntity.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.
-
Click Finish to complete the action creation process.
When
Customers_CreateEntity.action
gets executed successfully thenCloseModalPage_Complete.action
will be triggered or ifCustomers_CreateEntity.action
fails thenCreateCustomerEntityFailureMessage.action
will be triggered.What is the DateOfBirth property value passed in the Customers_CreateEntity.action?
- You will add an Action Bar item on the
- Step 4
You will open the
Customers_Create.page
from the Customer List page. For this, you will add an action bar item on the List page and will link it to a navigation action. When the action bar item is pressed by the end-user that will open theCustomers_Create.page
.In
Customers_List.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
SystemItem
property. Double click the Add 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.
In the Template Selection step, choose UI in Category | click Navigation | Next.
In the Base Information step, provide the below information:
Property Value Name
NavToCustomers_Create
PageToOpen
Select Customers_Create.page
from the dropdownModalPage
Select true
from the dropdownClick Next and then Finish on the confirmation step.
- 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.
- Step 6
Make sure you are choosing the right device platform tab above.
You can cross verify if a record has been updated 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
It will open the URL in a new tab, remove
?auth=uaa
and add/Customers
at the end of the URL.When is DownloadOffline action in Mobile application being called?