Essential Utilities for SAPUI5/Fiori Apps (Part 1)

Intro

Apart from the essential files necessary to bootstrap a SAPUI5/Fiori app, there are a few implementation files that helped me a lot to be an efficient developer. In this blog post I will share the components I use all the time. These components will help to structure code better, which leads to more efficient development cycles and better maintainability in the long-run.

The components I can't do without in my projects are:

  1. Base.controller.js
  2. Formatter.js
  3. Conditions.js
  4. Validator.js
  5. Service.js
  6. Feature.js

In the first post of this series I will talk about the project structure, the base controller and the formatter utility. In subsequent posts I will address the other utilities.

Project Structure

I usually start off with the standard SAPUI5 template in the WebIDE. I then proceed to create the necessary project structure to ultimately end up with something like this:

The most interesting part of this the util folder, in which all of the abovementioned files are.

Base.controller.js

All controllers inherit from the Base controller. I typically put common functions into the Base controller, such as an initialization function for authorizations or even UI functions such as showing/hiding application errors. In addition it ties together all the other utilities (Services, Formatters, etc.)

In addition, I would typically have multiple Feature controllers (needless to say "Feature" will be replaced by what it actually does, e.g. Profile.controller.js if it was a page to manage a profile).

This is how a controller would inherit from the Base controller:

sap.ui.define([
    "hcpboston/controller/Base",
    "sap/ui/model/json/JSONModel"
], function(Base, JSONModel) {
    "use strict";
    return Base.extend("hcpboston.controller.Feature", {
        //All functions in  Base.controller.js will be available here.
    });
});
Formatter.js

The formatter is one of my most-used utilities, and serves as the shared function to alter all model data to display in the desired format in the view. I would typically have functions to format dates, currency and numbers. In addition I also often use it to perform simple calculations that are used for display purposes only.

In our example the Percent is calculated with the following function:

Referenced in the view (Base.view.xml):

<Text text="{parts: ['model>/stock', 'model>/sold'], formatter: '.formatter.calculate'}%"/>

Defined in the Formatter.js file:

calculate: function(stock, sold){
            var oNumberFormat = NumberFormat.getFloatInstance({
              maxFractionDigits: 2,
              groupingEnabled: true,
              groupingSeparator: ",",
              decimalSeparator: ".",
              decimals: 2
            });
            var formattedNum = oNumberFormat.format(sold/stock*100);
            return formattedNum;
        }

Now the percentage is formatted:

Formatter files can get really long, so in some cases it make sense to create one by Feature.

Conclusion

In this post I introduced useful utilities I always make part of my SAPUI5/Fiori projects. I briefly discussed the project structure, the base controller and the formatter utility. In the next post I will talk about the other utilities.

Ultimately we will have a simple app that will dynamically show a success message if all the stock is complete.


© 2017