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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Murali Shanmugham

    Hi,

    I generally follow the below approach. I am just pasting my code and you may have to work it out.

    In my example, I have Util>Formatter.js (in standard) which has a method formatEdmData which I am looking to overwrite.

    1) Create a folder called Util and a file called Formatter.js within it inside your extension project.

    2) In the Formatter.js I added the below code

    jQuery.sap.declare(“mycustomer.crm.myhanalivereports.CRM_MYHLREPORTS.util.formatter”);

    jQuery.sap.require(“cus.crm.myhanalivereports.util.formatter”);

    cus.crm.myhanalivereports.util.formatter.formatEdmData = function(data, sType) {

    //Add overwrite logic here

    };

    The first line declares my formatter.

    The second line references the formatter in Standard App

    The third line is the actual overwrite of the method formatEdmData

    3) I open the custom controller which uses this method and add the below line

    jQuery.sap.require(“cmycustomer.crm.myhanalivereports.CRM_MYHLREPORTS.util.formatter”);

    Hope this helps.

    (0) 
    1. Benjamin Kwong Post author

      Cheers thanks Murali, I knew I was missing something!  I’ve updated the blog with your content so I don’t lead people down the wrong path.  I was obviously very long winded and your comment cleared it all up in my mind.

      When you mentioned overriding the formatter and I actually did this when overriding my Formatter.js in a previous Fiori extension and didn’t think to use this as an example!

      Thank you!

      (0) 
    2. Benjamin Kwong Post author

      The plot thickens!

      So I noticed some source files use variables storing functions as JSON you could easily override and extend.

      However some source files are using anonymous Javascript functions which from my understanding make it not possible to override these functions unless you rewrite the code in the anonymous function.  Hence making a copy of the file, making changes and referring to this in the extended controller would be necessary unless there’s a better approach again I’m not aware of!

      DataManager.js and even some Formatter.js files tend to do this due to their design.

      (0) 
      1. Kenneth Hartman

        Hello Ben,

        When you speak of “extending the controller” are you referring to changing it in the original controller view or are you saying that one needs to be copied and pasted into View folder similar to how you created a DataManager.js component under “utils” folder ?

        Thanks!

        (0) 
        1. Benjamin Kwong Post author

          Hi Kenneth,

          When I mention anything to do with extending the controller it would be in the instance of when you’re enhancing Fiori apps.  So yes, creating a new file in the view folder and defining it in your Component.js file under the customizing – “sap.ui.controllerExtensions” metadata section.

          This guide refers to working with the utils files only which takes a slightly different approach.

          Hope that helps.

          Regards,

          Ben

          (0) 

Leave a Reply