Implement Create Entity and Linking Entities in an MDK App

In this step, you will create the Create Order 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 on the Pages folder | New MDK 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 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 SalesOrderHeaders_Create and click Next and the Finish on the Confirmation step.

   

3. In the Properties pane, set the Caption to Create Order.

   

4. Now, you will add the fields (like Currency Code, Net Amount, Tax Amount, Gross Amount, Life cycle status, Life cycle status name and order creation date) for creating a new sales order record by the end-user.

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

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

5. Drag and drop a Simple Property onto the Page area.

   

6. Drag and drop five additional Simple Property controls and one Date Picker control onto the page so you have seven total controls.

   

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

   Property	Value
   Name	FCCreateCurrencyCode
   Caption	CurrencyCode
   isEditable	true
   Value	EUR

   

   Under Value property, you can set some default values.

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

   Property	Value
   Name	FCCreateNetAmount
   Caption	NetAmount
   isEditable	true
   Value	18.010

   

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

   Property	Value
   Name	FCCreateTaxAmount
   Caption	TaxAmount
   isEditable	true
   Value	108.010

   

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

    Property	Value
    Name	FCCreateGrossAmount
    Caption	GrossAmount
    isEditable	true
    Value	126.02

    

11. Select the fifth Simple Property control and provide the below information:

    Property	Value
    Name	FCCreateLifeCycleStatus
    Caption	LifeCycleStatus
    isEditable	true
    Value	N

    

12. Select the sixth Simple Property control and provide the below information:

    Property	Value
    Name	FCCreateLifeCycleStatusName
    Caption	LifeCycleStatusName
    isEditable	true
    Value	New

    

13. Select the last control Date Picker and provide the below information:

    Property	Value
    Name	FCCreatedate
    Caption	Creation Date
    isEditable	true
    Mode	datetime
    Value	Enter Date

    

    At the end, page should look like below:

    

14. Save the changes to the SalesOrderHeaders_Create.page.

Now, you will add a button on the Create Order page and set its 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).

   

2. In the Properties pane, click the link icon to open the object browser for the System Item property.

   Double click on the Cancel type and click OK.

   

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

3. Now, you will set onPress to CloseModalPage_Cancel.action.

   In Events tab, click the link icon for the OnPress property to open the object browser.

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

   

4. Save the changes to the SalesOrderHeaders_Create.page.

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

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

   

2. Provide the below information:

   Property	Value
   Action Name	NavToSalesOrderHeaders_Create
   Page To Open	select SalesOrderHeaders_Create.page
   ModalPage	check this option

   

3. Click Next and then Finish on the confirmation step.

You will add a toolbar item to the Customers_Detail.page called Create Order. You will link this button to the navigation action you just created. This event will open the SalesOrderHeaders_Create.page when the Add button is pressed by the end-user.

1. In Customers_Detail.page, drag and drop a Toolbar Item to the lower left of the page.

   

2. In the Properties pane, set Caption to Create Order.

   

3. In the Properties pane, click the Events tab, click the link icon for the OnPress property to open the object browser.

   Double Click on the NavToSalesOrderHeaders_Create.action and click OK to set it as the OnPress Action.

   

4. Save the changes to the Customers_Detail.page.

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 Create Order 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. Define a failure message.

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

   

   Provide the below information:

   Property	Value
   Action Name	CreateSalesOrderHeaderEntityFailureMessage
   Type	select Message
   Message	Failed to Create Sales Order record
   Title	Create Sales Order
   OKCaption	OK
   OnOK	--None--
   CancelCaption	leave it blank
   OnCancel	--None--

   

   Click Next and then Finish on the Confirmation step.

2. You will create the OData action to create a sales order entity.

   You can find more details about Create Entity Action.

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

   

   Provide the below information:

   Property	Value
   Action Name	SalesOrderHeaders_CreateEntity
   Type	CreateEntity
   Service	SampleServiceV2
   EntitySet	SalesOrderHeaders

   

3. Click Next.

4. Since in SalesOrderHeaders_Create.page, we have defined seven properties (Currency Code, Net Amount, Tax Amount, Gross Amount, Life Cycle Status, Life Cycle Status Name and Creation Date) to be added, now in this step, we will bind them to respective UI Controls.

   Check the CreatedAt property (if not already) 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 FCCreatedate. The list will filter down to show the matching values. Double click on the Value (Value) entry under the FCCreatedate field and click OK to set binding.

   

5. Repeat the above step for remaining properties: CurrencyCode, GrossAmount, LifeCycleStatus, LifeCycleStatusName, NetAmount and TaxAmount.

   

6. Under CreateLinks, select the checkbox for CustomerDetails and provide {{#Page:-Previous/#Property:@odata.readLink}} value under Options column.

   

   CreateLinks allows you to link one or more entity objects to one of the target Entity’s navigation property.

   Page:-Previous: A target path that when resolved will return the PageProxy object of the page before the currently displayed page.

   In Mobile Services sample backend, click Metadata URL and you will find CustomerDetails navigation property for SalesOrderHeader entity.

   

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

7. Define Success and Failure actions for SalesOrderHeaders_CreateEntity.action.

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

   Property	Value
   Success Action	CloseModalPage_Complete.action
   Failure Action	CreateSalesOrderHeaderEntityFailureMessage.action

   When SalesOrderHeaders_CreateEntity.action gets executed successfully then CloseModalPage_Complete.action will be triggered or if SalesOrderHeaders_CreateEntity.action fails then CreateSalesOrderHeaderEntityFailureMessage.action will be triggered.

   

8. Save the changes to the SalesOrderHeaders_CreateEntity.action.

9. Now that the SalesOrderHeaders_CreateEntity.action has been created, you will need to call this action when the end-user presses the Save button. You will add a Save button on the SalesOrderHeaders_Create.page and link it to the SalesOrderHeaders_CreateEntity.action.

   In SalesOrderHeaders_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 on the Save type and click OK.

   

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

    

11. Save the changes to the SalesOrderHeaders_Create.page.

In Customers_Detail.page you added total number of order counts for a given customer. When a new SalesOrder is created, this count doesn’t get updated automatically unless you navigate back and forth to this page.

DataSubscriptions : it is a way to listen to data changes that when triggered should cause a UI element to redraw. If your control or section has a target, that target is automatically subscribed for data change events. Otherwise you can also explicitly subscribe to DataSubscriptions by specifying an entity set name or readLink in an array. You can find more details here.

1. In Customers_Detail.page, select Customer Orders Object Table control. In Properties section, click + icon under Misc and double click SalesOrderHeaders and click OK.

   

2. Save the changes to the Customers_Detail.page.

1. Deploy the updated application to your MDK client.

   Right-click on the DemoSampleApp MDK Application in the project explorer pane and select MDK Deploy and Activate.

   

2. Since we have deployed already both the destination and app id should be pre-selected based on the last time you deployed our application.  Confirm the Destination Name is mobileservices_cf and the Application Id is com.sap.mdk.demo and click Next.

   

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

Congratulations, you have enhanced your MDK app with additional functionalities. You may now start exploring other tutorials.