Overriding/extending source files in the util folder when extending/customising Fiori apps

Extending Fiori applications gets a little tricky at times!  I’m having a little doozy with My Leave Requests Ver.2 at the moment and as much as I can I try to avoid these situations – sometimes we just have to make it work to get the outcome we’re after.

Update: I’ve recently learned new things about extending Javascript files in the util folders and some approaches on how to handle these.  I’m also starting to learn about tricky Javsacript things like self invoking/anonymous functions which we’ll discuss.  Thanks to Murali Shanmugham’s input too on method 1 below.

First check it’s possible to extend your file first

If the original source file uses a variable that contains JSON content, use method 1 to redefine and extend a function:

hcm.approve.timesheet.util.Formatter = {
       someFunction: function(someVariable) {
              //function content
       },
};

If your source file uses a self invoking/anonymous Javascript function, you will need to make a copy of the file and add your own changes as all the content is private inside the function – use method 2 to redefine the whole file.  The file may look like this:

hcm.myleaverequest.utils.DataManager = (function() {
       return {
            someFunction: function(someVariable) {
                 //function content
            },
       };
}());

If my information is incorrect I’d love to hear from you.

Method 1 – Extend file and redefine functions

Step 1 – Create a “util” folder in your own extension project

I created a new utils folder in my project extension.

Step 2 – Create your extended file (most likely Formatter.js)

In my utils folder I created a fresh Formatter.js file and declared the following code to override my DateRangeFormatter function.

jQuery.sap.declare("hcm.approve.timesheet.zts_apv.util.Formatter"); // This line of code declares my extended Formatter.js
jQuery.sap.require("hcm.approve.timesheet.util.Formatter"); // This line of code references the standard Formatter.js
hcm.approve.timesheet.util.Formatter.DateRangeFormatter = function(data, sType) {
// Add overriding logic here.
};

From this point I made modifications to my custom Formatter.js file as required.

Step 3 – Refer to your extended file from your custom controller

The next step is to reference my Formatter.js file in my extended application.  Add the following code to your custom controller:

jQuery.sap.require(“hcm.approve.timesheet.zts_apv.util.Formatter”);

Success – you should now be able to override functions in your file!

Method 2 – Make a copy of file, add customisations and override original file

Note: Use this approach if the source file is using an anonymous function to store its functions privately!

Step 1 – Create a “util” folder in your own extension project

I created a new utils folder in my project extension.

Step 2 – Copy file you want to customise (most likely DataManager.js)

In my utils folder I copied the original DataManager.js file here and changed the file definition as follows:

jQuery.sap.declare("hcm.myleaverequest.zhcm_lrq_cre.utils.DataManager");

Make sure you update the declaration on yours too.  Feel free to now make your customisations to the function.

Step 3 – Refer to the new file from your custom controller

Add the following line to your custom controller to refer to the new file you’ve copied.  Please note it will ignore the original source file in the parent Fiori app.

jQuery.sap.require("hcm.myleaverequest.zhcm_lrq_cre.utils.DataManager");

Your Fiori application will now refer to your new DataManager.js file.

Regards,

Ben