Skip to Content
Author's profile photo Former Member

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."hcm.approve.timesheet.zts_apv.util.Formatter"); // This line of code declares my extended Formatter.js"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:“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:"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."hcm.myleaverequest.zhcm_lrq_cre.utils.DataManager");

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



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Shanmugham
      Murali Shanmugham


      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"mycustomer.crm.myhanalivereports.CRM_MYHLREPORTS.util.formatter");"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"cmycustomer.crm.myhanalivereports.CRM_MYHLREPORTS.util.formatter");

      Hope this helps.

      Author's profile photo Former Member
      Former Member
      Blog 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!

      Author's profile photo Former Member
      Former Member
      Blog 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.

      Author's profile photo Kenneth Hartman
      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 ?


      Author's profile photo Former Member
      Former Member
      Blog 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.



      Author's profile photo Devisha Bhavik
      Devisha Bhavik



      Looks like, we are missing how to call this formatter function from the XML view in the extension project.


      I have below formatter.js file.

     "my.own.HCM_EMP_ACTION.utils.formatter");sap.ui.define([ ] , function () { "use strict";
      return {
      setPernr: function(v) {  if(v.indexOf("?") !== -1) { return v+ "&PERNR="+ this.getView().getModel("pernrModel").getData().Pernr; } else { return v+ "?PERNR="+ this.getView().getModel("pernrModel").getData().Pernr; } return v; } };


      It is defined in the controller as:"my.own.HCM_EMP_ACTION.utils.formatter");


      It is written in XML View as:-

      "{path:'Value', formatter: '.formatter.setPernr'}"


      Not sure what is being missed in the XML view to reference. I see it is loaded in the browser but getting below error in console.


      2017-08-28 13:42:25.257570 formatter function my.own.HCM_EMP_ACTION.utils.formatter.setPernr not found!


      FYI.... In the XML view, I did try specifying below as well but still got not found error in console.


      href="{path:'Value', formatter: 'my.own.HCM_EMP_ACTION.utils.formatter.setPernr'}" />



      Author's profile photo Suganya Rangarajan
      Suganya Rangarajan

      Hi Devisha,


      Did you get to solve this issue? Can you tell me how you solved it.




      Author's profile photo Naresh D
      Naresh D

      Hi, Did you get to resolve the issue? Having similar kind of issue, where in unable to call the function in custom util.js file from XML view. Appreciate if you can share the solution for the same.