Implement Create Entity and Linking Entities in an MDK App

In this step, you will create a Section page with a Form Cell Section to contain the Form Cell controls. You will then add the fields that will be editable by the end-user.

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

   

2. In the Base Information step, enter the Page Name as SalesOrderHeaders_Create and click Finish to complete the page creation process.

   

3. Once the page opens in the page editor, click on the white area to select it’s Action Bar, and 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 Static Container group. Drag and drop Form Cell section onto the Page area.

   

   Form Cell section is used to contain Form Cell controls in a section page.

5. You will now add Form Cell controls in the Form Cell Section. Expand the Form Cell Controls group, 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	Currency Code
   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	Net Amount
   Value	18.010

   

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

   Property	Value
   Name	FCCreateTaxAmount
   Caption	Tax Amount
   Value	108.010

   

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

    Property	Value
    Name	FCCreateGrossAmount
    Caption	Gross Amount
    Value	126.02

    

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

    Property	Value
    Name	FCCreateLifeCycleStatus
    Caption	Lifecycle Status
    Value	N

    

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

    Property	Value
    Name	FCCreateLifeCycleStatusName
    Caption	Lifecycle Status Name
    Value	New

    

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

    Property	Value
    Name	FCCreatedate
    Caption	Creation Date
    Mode	Select Datetime from the dropdown if not selected by default

    

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 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 the onPress event to CloseModalPage_Cancel.action.

   In Events tab, click the dotted 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.

   

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 SalesOrderHeaders_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

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

   

2. Click the link icon to open the object browser for the System Item property. Double-click the Save type and click OK.

   

3. Navigate to the Events tab. Click the dotted icon for the OnPress property and select the Create a rule/action.

   

4. Keep the default selection for the Object Type as Action and Folders path.

   

5. In the Template Selection step, choose Data in Category | click OData | Next.

   

6. In the Base Information step, provide the below information:

   Property	Value
   Name	SalesOrderHeaders_CreateEntity
   Type	Select CreateRelatedEntity from the dropdown
   Service	Select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	Select SalesOrderHeaders from the dropdown

   

   CreateRelatedEntity action creates the new entity against the navigation property of an existing entity with which the relationship is to be established. You can find more details about Create Related Entity Action.

7. Click Next.

8. In Parent Link and Properties Selection step, provide the below information:

   Property	Value
   ParentLink	LinkItem Reference
   Target EntitySet	Select Customers from the dropdown
   ReadLink	click link icon and double click readLink
   Property	Select SalesOrders from the dropdown

   

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

9. 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 Properties section, you will bind them to respective UI Controls.

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

   

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

    

11. Click Finish to complete the action creation process. The action editor will open with the SalesOrderHeaders_CreateEntity.action loaded.

12. 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 SalesOrderHeaders_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 to CloseModalPage_Complete.action.

    

13. Create a message action displaying error in case of the create failure.

    The MDK template generates some generic actions, such as GenericMessageBox.action, that can be reused at many places in your project and can be overridden with specific information. Of course, you can also create a new action, as you have done in previous tutorials.

    In the SalesOrderHeaders_CreateEntity.action, click the link icon to open the object browser for the Failure Action.

    

14. Bind it to GenericMessageBox.action and click OK.

    

15. You will now override its properties. Click on the Overrides Properties for selected action icon.

    

16. In the Override Action Properties step, provide the below details and click OK.

    Property	Value
    Message	Failed to Create Sales Order record - {#ActionResults:SalesOrderHeaders_CreateEntity/error}
    Title	Create Sales Order

    

    SalesOrderHeaders_CreateEntity is the Action Result value of the SalesOrderHeaders_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.

    When the SalesOrderHeaders_CreateEntity.action gets executed successfully then the CloseModalPage_Complete.action will be triggered or if SalesOrderHeaders_CreateEntity.action fails then a failure message will be displayed with error information.

You will open the SalesOrderHeaders_Create.page from the Customer Detail page. For this, you will add a ToolBar item on the Customer Details page and will link it to a navigation action. When the ToolBar item is pressed by the end-user that will open the SalesOrderHeaders_Create.page.

1. In Customers_Detail.page, drag and drop a Toolbar Item on the page area.

   

2. In the Properties pane, provide the below details.

   Property	Value
   ButtonType	Primary
   Title	Create Order

   

3. Navigate to the Events tab. Click the dotted icon for the OnPress property and select the Object Browser. Bind it to the GenericNavigation.action.

   

4. You will now override the GenericNavigation.action properties. Click the dotted icon for the OnPress property and select Overrides.

   

5. In the Override Action Properties window, provide the below information and click OK to complete the action override process.

   Property	Value
   PageToOpen	Select SalesOrderHeaders_Create.page from the dropdown
   ModalPage	Select true from the dropdown

   

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

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

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services .

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

Once you complete this tutorial, you can continue with Level Up with the mobile development kit mission.