Skip to Content

Create a Customer Record in an MDK App

test
0 %
Create a Customer Record in an MDK App
Details

Create a Customer Record in an MDK App

September 10, 2020
Created by
May 23, 2019
Allow the user to create a customer record in an MDK app.

You will learn

  • How to create a customer record
  • How to store this record locally
  • How to sync local changes with backend

Prerequisites

If you didn’t follow the pre-Prerequisite then you may clone an existing project from GitHub repository to start with this tutorial.


MDK
Step 1: Create new page for new customer record

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.

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

    MDK

    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.

  2. Enter the Page Name Customers_Create and click Next and the Finish on the Confirmation step.

    MDK
  3. In the Properties pane, set the Caption to Create Customer.

    MDK

    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.

  4. In the Layout Editor, expand the Control | Container Item section.

    Drag and drop a Simple Property onto the Page area.

    MDK

    You can find more details about available controls in Form Cell page.

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

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

    Property Value
    Name FCCreateFirstName
    Caption First Name
    IsEditable Select true from the dropdown
    PlaceHolder Enter Value
    MDK
  7. Select the second Simple Property control and provide the below information:

    Property Value
    Name FCCreateLastName
    Caption Last Name
    IsEditable true
    PlaceHolder Enter Value
    MDK
  8. Select the third Simple Property control and provide the below information:

    Property Value
    Name FCCreatePhone
    Caption Phone
    IsEditable true
    PlaceHolder Enter Value
    MDK
  9. Select the last Simple Property control and provide the below information:

    Property Value
    Name FCCreateEmail
    Caption Email
    IsEditable true
    PlaceHolder Enter Value
    MDK
  10. Drag and drop a Date Picker control onto the page area for date of birth parameter.

    MDK

    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: Add cancel button on create customer page

Now, you will add a button on the Create Customer page and set it’s onPress to CloseModalPage_Cancel.action.

  1. 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).

    MDK
  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.

    MDK

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

  3. Now, you will set the onPress event to CloseModalPage_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 the OnPress Action.

    MDK
Log on to answer question
Step 3: Create navigation action

Now, create a navigation action that will open the Customers_Create.page when executed.

  1. Right-click the Actions folder | MDK: New Action | choose MDK UI Actions in Category | click Navigation Action | Next.

    MDK
  2. Provide the below information:

    Property Value
    Action Name NavToCustomers_Create
    PageToOpen Select Customers_Create.page from the dropdown
    ModalPage Select true from the dropdown
    MDK
  3. Click Next and then Finish on the confirmation step.

Log on to answer question
Step 4: Add create button to customer list page

You will add a button to the Customers_List.page called Add. You will link this button to the navigation action you just created. This event will open the NavToCustomers_Create.action when the Add button is pressed by the end-user.

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

    MDK
  2. Click the link icon to open the object browser for the SystemItem property. Double click the Add type and click OK.

    MDK
  3. 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_Create.action action and click OK to set it as the OnPress Action.

    MDK
Log on to answer question
Step 5: Store the created data locally

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 now create an action to map the changes received from the Customers_Create.page to the corresponding field in the OData service. You will also show a failure message if the create action fails to save the changes.

  1. Right-click the Actions folder | MDK: New Action | choose MDK Message Actions in Category | click Message Action | Next.

    MDK

    Provide the below information:

    Property Value
    Action Name CreateCustomerEntityFailureMessage
    Type Select Message from the dropdown
    Message Failed to Create Customer record
    Title Create Customer
    OKCaption OK
    OnOK --None--
    CancelCaption leave it blank
    OnCancel --None--
    MDK

    Click Next and then Finish on the Confirmation step.

  2. Next, you will create the OData Create 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 Create Entity Action.

    Right-click the Actions folder | MDK: New Action | choose MDK Data Actions in Category | click OData Action | Next.

    MDK

    Provide the below information:

    Property Value
    Action Name Customers_CreateEntity
    Type Select CreateEntity from the dropdown
    Service Select SampleService.service from the dropdown
    EntitySet Select Customers from the dropdown
    MDK

    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 the FCCreateDOB field and click OK to set binding.

    MDK

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

    MDKMDK

    Click Next and Finish on the confirmation screen. The action editor will open with the Customers_CreateEntity.action loaded.

  3. Next, define Success and Failure actions for Customers_CreateEntity.action.

    In the action editor for the new action, expand the Common Action Properties and provide the below information:

    Property Value
    Success Action Select CloseModalPage_Complete.action from the dropdown
    Failure Action Select CreateCustomerEntityFailureMessage.action from the dropdown
    MDK

    When Customers_CreateEntity.action gets executed successfully then CloseModalPage_Complete.action will be triggered or if Customers_CreateEntity.action fails then CreateCustomerEntityFailureMessage.action will be triggered.

  4. Next, you will set the OnPress event of the Save button.

    Now, that the Create action is created, you will need to call the Create action when the end-user presses the Save button. You will add a Save button on the Customers_Create.page and link it to the Customers_CreateEntity.action.

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

    MDK

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

    Double click the Save type and click OK.

    MDK

    In the Properties pane | Events tab, click the link icon for the OnPress property to open the object browser, bind it to Customers_CreateEntity.action.

    MDK
Log on to answer question
Step 6: Deploy and activate the application

Deploy the updated application to your MDK client.

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

MDK

You should see Deploy Succeeded message.

MDK
Log on to answer question
Step 7: Test the application

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

  1. Re-launch the app on your device, you may asked to authenticate with passcode or Fingerprint. You will see a Confirmation pop-up, tap OK.

  2. Tap CUSTOMER LIST, click + icon to create a new record.

    MDK
  3. Enter the values, and tap save icon.

    MDK

    Local record gets created accordingly.

    MDK

    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.

  4. On Main page, tap SYNC, a successful message will be shown.

    MDK
  1. Re-launch the app on your device, you may asked to authenticate with passcode or Touch ID. You will see a Confirmation pop-up, tap OK.

  2. Tap Customer List, click + icon to create a new record.

    MDK
  3. Enter the values, and tap Save.

    MDK

    Local record gets created accordingly.

    MDK

    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.

  4. On Main page, tap Sync, a successful message will be shown. 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.

    MDK

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/Hybrid | click the MDK App com.sap.mdk.demo | Mobile Sample OData ESPM | click Root URL v2 | add /Customers/ at the end of the URL

MDK

Congratulations! You have successfully created a Customer Record and you are now all set to Delete a Customer Record in an MDK App.

When is DownloadOffline action being called?
×

Next Steps

Back to top