SAPUI5 for dummies part 4: A complete step-by-step exercise

Introduction & Recap

In the previous blog post, we learned how to move our current application into a Master-Detail app displaying Business Partner as a list (master) and its detail information with Sale Orders inside the detail page (detail).

What will be covered on this exercise

With Part 4 of this series of blog posts, we will learn how to create a second drill-down page with information about the Sale Order detail and display a table of Sale Order items.

The most important part of this exercise is to understand how to Delete (part of the CRUD operations) a Sale Order Item of a Sale Order.

• ODataModel: we have already used it to display server-side information about our Business Partner, Order Sale. Now we’re going to use it to display Sale Order Item and delete them from the set. For this purpose, we’re going to use the remove method

This is our main task in this exercise but it’s not the only thing we’ve done in the code. Here’s a list of the things you have to do to get to the final result:

• Add a new route and target in the manifest.json to navigate to the BusinessPartnerSeleOrderItem page
• Listen on the Sale Order click event and navigate to the SaleOrder detail (where we will display sale order detail and sale order items)
• Add a FilterBar to filter the Sale Order Item’s table
• Add a ViewSettingsDialog to sort/group Sale Order Items
• Expand the ToProduct navigation property of a SaleOrderItem entity to display Product information into table’s rows

NB: I’ve encountered a lot of problem on the SaleOrderItemsSet when I needed to filter, sort and group items. You always need to know which fields are enabled (implemented server side) to be filtered, sorted or group.

Cross-team Comunication is a key element in software development

In this case, DeliveryDate is not sortable, Product’s Category and Name are not sortable and filterable and so on. So remember always to communicate properly with your backend team in order to get the server-side implementation needed by your front-end application.

Let’s code: Delete Operation

So what do you need to do to delete a record?

UI/UX

We’re a front-end developer (or full-stack) and UI/UX is an important part of our job. We need to create an interface and a user experience that allow our users to get the job done in less time possible, with fewer steps possible and don’t hate the application they’re using at the end of the day. The result of our work is a happy user that do their job with less time and error and a company that makes more money.

To achieve this UI/UX you can leverage some properties of the ListBase which is extended by our Table. To add the delete button (the big X) you just need to set the Table mode property to Delete and then handle the delete event triggered when the user clicks on the button.

JavaScript Implementation

onDeleteItem: function(oEvent) {
  var controller = this;
  var oModel = this.getView().getModel();
  var sPath = oEvent.getParameter("listItem").getBindingContextPath();
  var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
  var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length;

  controller.byId("tableSalesOrderItem").setBusy(true);
  oModel.remove(sPath, {
    success: function(oData, response) {
      MessageBox.success( oResourceBundle.getText("deleteSaleItemSuccess"), {
        styleClass: bCompact ? "sapUiSizeCompact" : ""
      });
      controller.byId("tableSalesOrderItem").setBusy(false);
    },
    error: function(oError) {
      MessageBox.error( oResourceBundle.getText("deleteSaleItemError"), {
        styleClass: bCompact ? "sapUiSizeCompact" : ""
      });
      controller.byId("tableSalesOrderItem").setBusy(false);
    }
  });
}

So what have we done here?

1. We get the path (that identifies the REST url of our item) from the Binding Context of the listItem clicked
2. We get the ODataModel reference from the framework (we’re using the default model so we don’t need to specify a model name to the getModel method)
3. We set our table to busy. This will display a busy indicator suggesting the user we’re doing some communication with the server.
4. We call the .remove method that has 2 parameters. The first one is the path of the item we would like to delete and the second one is an Object of different parameters. You can check all of them on the official documentation. We just need the callback to the success and error event to give a correct feedback to the user and remove the busy state.

So what happens after the .remove method at the UI/UX?

Well, it’s pretty simple. The record is deleted, the ODataModel is automatically updated by the framework and thanks to the binding mechanism of SAPUI5 the Table is also updated automatically.

What does it mean? That the framework take care to also refresh the Table with the new data (one item has been removed) and we don’t need to bother about it ;)

Conclusion and what’s next in Part 5?

If you want to check out the final result you can directly go to the step_4 branch of our GitHub Project.

In the next part, we will handle the Update operation of a Sale Order Item completing our CRUD operations.

Unfortunately, I’m unable to implement the Create operation because it seems to be some kind of server-side validation issue with the data I’m trying to submit and the error are a lot cryptic :D

Feedback needed

What do you think about this series? Do you want more focus on some specific SAPUI5 aspect?

Write it down on the comment section! Happy coding to everyone!