Fiori-like Purchase Order Approval with OData - Part II

[joao_sousa2]

As I said in Part I, this application is heavily inspired by the work done in Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises so please do complete the exercises since this is a complement.

This blog is divided in three sections, so check Part I if you haven't done so:

• Part 1 - Backend Logic (ABAP) + SAP Gateway
• Part 2 – SAPUI5 Frontend

SAPUI5 Application

Create a new SAPUI5 Project, File -> New -> Other -> SAPUI5 Application Development -> Application Project. Select “Target Device” as “Mobile” and uncheck the “Create Initial View”.

Open the Webcontent folder, and paste the contents of the UI\Webcontent folder from GitHub. I will now try to explain each of the files.

• Index.html
  • Nothing special to take notice of, it contains nothing but the shell;

• Component.js
  • This file is special because the name is “hardcoded” in the framework, it serves as the component controller, similar to the component controller in Webdynpro. The createContent method is called automatically after defining the ComponentContainer in the index.html;
  • It starts by creating the App view, based on the App.view.js file;
  • Then it gets the resources properties. This file is very important because of localization considerations. You shouldn’t hardcode strings directly in the view because that makes the translation effort very painful. The file is in folder i18n;
  • After that we define the OData model that we created in part I. Keep in mind that proxy/http/ refers to a proxy that overrides the CrossDomain check. If you tried to use http://, you would get a 401 Not Authorized error when accessing the Odata model. You will need to change this in order to deploy the application in a SAP Server;

• App.view.js
  • This is the only view defined in JS instead of XML;
  • All JS views have a method called getControllerName: function () that returns the controller for the view;
  • The createContent function in a JS view .. creates the content. The line this.app = new sap.m.SplitApp(), defines this view as split view, and the following two blocks add the master and detail view (in this case an empty view);
  • The “true” and “false” in the addPage method tells the SplitApp which page is the master and which is not;
  • The master.getController().nav = this.getController() is very important because it will be the basis of the navigation, that will be handled by the App.controller;

• App.controller.js
  • The App.controller handles the navigation like I said, so you have a “to” and “back” method that will be used often by the application. The back is very straightforward;
  • The “To” method starts by checking if we are navigating to the master or a detail view;
  • If the detail view isn’t created, it creates the view. Remember we only added “Empty” in the initialization;
  • It sets the destination, and the context. This setting of the context, is what makes the detail view show the selected PO;

• Master.controller.js
  • HandleListItemPress is pretty straightforward, sets the context to the selected PO, and navigates to the detail;
  • HandleSearch sets a filter on the model. If you look at the OData model in SAP we added the code to use a filter on PurchaseOrderID property, so now we use that filter. Keep in mind that a call is made to the server, the model isn’t filtered on the frontend.

• Detail.controller.js
  • HandleNavButton calls the “Back” method of the App controller to navigate back to the master view;
  • OnBeforeRendering is important because it sets the Form that we defined in the XML to the correct context. This of course depends on having made the relation between PO and Suppler 1:1 in the OData model;
  • The handleApprove and handleReject are the methods that update the OData model with the user action.
  • These methods set the “approved” property with “X” when approved and “R” when reject. Check the method PURCHASEORDERSET_UPDATE_ENTITY of the OData service to understand the behavior;
  • If the PO is approved or rejected, the detail view is set to “Empty” and the application navigates back to Master View (which refreshes automatically);

There is some functionality that is still missing and would be nice to have, like:

• Comments during approval/rejection;
• SSL for safe transmission of user/password;
• Settings page for stuff like user and password;

Final remarks: I will try to correct any bugs that you happen to discover in the app, in order to keep the repository as bug free as possible but please take into account that I work for a living and may take some time to correct something. Thank you, and please share your opinion.