Creating New Entities through an OData Model

Objective

After completing this lesson, you will be able to Create new entities for an OData service via an SAPUI5 OData model.

Batch Control

Group IDs

The OData V4 model sends requests in the following cases:

  • Implicit read requests to retrieve data for a binding

    For example, a list binding with the absolute path /UX_Customer triggers a GET UX_Customer to read data.

  • Implicit update requests via two-way binding

    For example, update a customer’s name through a property binding with the relative path CustomerName, which has a context with path /UX_Customer(00505604-4e85-1edd-818f-21e64b9cd2cf) triggering PATCH UX_Customer(00505604-4e85-1edd-818f-21e64b9cd2cf) with the customer name's value as JSON payload.

  • Explicit requests triggered through API calls like ODataListBinding.refresh() or ODataContextBinding.execute()

For each of these cases, it is possible to specify a Group ID of type string that allows you to group multiple operations into a single HTTP request payload (batch request).

I.e. the OData model's use of batch requests is controlled by such Group IDs. For this purpose a Group ID has one of the following submit modes:

  • sap.ui.model.odata.v4.SubmitMode.API
  • sap.ui.model.odata.v4.SubmitMode.Auto
  • sap.ui.model.odata.v4.SubmitMode.Direct

The following figure shows the valid Group IDs in SAPUI5 and explains their corresponding submit modes.

Usage of Group IDs in XML Views

In the example shown in the figure, Usage of Group IDs in XML Views, the binding context of the form is set to /UX_Customer(00505604-4e85-1edd-818f-21e64b9cd2cf) via the binding attribute of the <SimpleForm> tag. In addition, the Group ID for read and update requests is set to $direct ($$updateGroupId and $$groupId parameters). Therefore, the data for the form, that is, name and city of the customer with Id 00505604-4e85-1edd-818f-21e64b9cd2cf, is read directly without batch. Likewise, updates for the name and the city through two-way binding are sent directly without batch.

The default for the Group ID of the OData model is $auto. The value of Group ID is used as default for the Update Group ID of the OData model.

On instantiation of the OData model, you can also provide both a Group ID and an Update Group ID; if specified, these values are used as defaults if the corresponding binding parameters are not explicitly set.

For explicit requests, the Group ID can be specified as an optional parameter to the corresponding API method. The Group ID or Update Group ID of the binding is used as a default.

Creating an Entity

In the example shown in the following figure a new customer is created when the Create Customer button on the UI is pressed.

The sample application uses a table with Id customerTable on the UI, via whose items aggregation the customer entity set is displayed. For this entity set, a new entity is to be created.

Implement an OData Create Operation

Business Scenario

When pressing the Create Customer button on the Overview view, a popup currently displays with the info text that the customer will be created later via an OData service. In this exercise, you will implement this create operation. To do this, you will first delete the implementation of the popup and the info text used there. Then you will reimplement the event handler method for the Create Customer button so that a new customer is created via the OData service already integrated in the application.

Template:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/20_OData_model_(read)
Model solution:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/21_OData_model_(create)

Task 1: Delete the Implementation of the Popup as well as the Used Info Text

Steps

  1. The implementation of the popup can be found in the Dialog.fragment.xml file. Delete this file from the webapp/view folder.

    1. Open the context menu for the Dialog.fragment.xml file in the project tree.

    2. Choose Delete.

    3. Confirm the Move File to Trash dialog with OK.

  2. Open the i18n.properties resource bundle file from the i18n folder in the editor.

  3. Delete the following key-value pair from the file, which is now no longer needed:

    Code Snippet
    Copy code
    Switch to dark mode
    1
    dialogText=Customer {0} is later saved via an OData service.

Task 2: Create a New Customer via the OData Service when the Button is Pressed

Steps

  1. In the next steps, you will implement the creation of a new customer via the OData service. In doing so, a corresponding translatable message will be displayed on the UI in case of success. For this purpose, create the following key-value pair in the i18n.properties resource bundle file:

    Code Snippet
    Copy code
    Switch to dark mode
    1
    customerCreatedMessage=Customer successfully created

    Result

    The i18n.properties resource bundle file should now look like this:

  2. Now open the Overview.controller.js file from the webapp/controller folder in the editor.

  3. The success message created above is to be displayed via a message toast on the UI. For this purpose, add the sap/m/MessageToast module to the dependency array of the view controller and a corresponding parameter named MessageToast to the factory function.

    Result

    The view controller should now look like this:

  4. Replace the current implementation of the onSave event handler method with the following coding:

    Code Snippet
    Copy code
    Switch to dark mode
    123456789101112131415161718
    var oModelData = this.getView().getModel("customer").getData();
var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();

if (oModelData.Discount === undefined) { oModelData.Discount = 0; }

this.byId("customerTable").getBinding("items").create({
  "Form": oModelData.Form,
  "CustomerName": oModelData.CustomerName,
  "Discount": oModelData.Discount + "",
  "Street": oModelData.Street,
  "PostCode": oModelData.PostCode,
  "City": oModelData.City,
  "Country": oModelData.Country,
  "Email": oModelData.Email,
  "Telephone": oModelData.Telephone
}).created().then(function () {
  MessageToast.show(oResourceBundle.getText("customerCreatedMessage"));
});

    Note

    The coding creates a new customer entity with the data entered in the form. After the creation is finished, the success message from the resource bundle is displayed as a message toast.

    Result

    The onSave event handler method should now look like this:

  5. Test run your application by starting it from the SAP Business Application Studio.

    Caution

    As in the previous exercise, the OData service is not called in the back-end system for testing. Instead, access to the remote system is simulated via a mock server. To do this, use the npm script called start-mock to start the application instead of the start-noflp script used previously.
    Make sure that when you press the Create Customer button, a new customer is created with the data entered in the form. The success message should appear as a message toast and the customer should be automatically added to the customer table.

    Note

    Be aware that the customer data is not really persisted via the mock server. That is, if you restart the application, all newly created customers will be lost.

    1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.

    2. Select the npm script named start-mock in the dialog that appears.

    3. In the opened application, check if the component works as expected.

Log in to track your progress & complete quizzes