Component JS for Fiori Extension Projects basic tit-bits:

[HemendraS]

One of my friend (shaktibpandey) approached me to help. He was failing to see the extended fields in app. He was doing this extension in “Eclipse” using “Fiori Toolkit”. I confirmed many times whether he is following all the steps religiously. His version was, when I am running this app in “Fiori Launchpad with the extended tile”, it is showing the “Actual” app data (Which is prior to extension), but the extended UI elements are missing on screen. I suggested him to debug in browser. He said that some error in “Component.js” is visible in debugger window. So this gave me the use case to write blog and I found below as the missing links in extension project.

If you are doing the extension of Fiori Projects using Eclipse with Fiori Toolkit (However, SAP is discouraging Fiori Toolkit and suggesting to use SAP Web IDE, which is more matured and very user friendly) you will always face lot many challenges. Specifically people forget to extend the “Component.js” of the extension project, in absence of which you would not be able to see the extensions in the app. Add the following to “Component.js”. Here I am giving the example of Fiori “My Leads” extension:

jQuery.sap.registerModulePath("cus.crm.lead",'/sap/bc/ui5_ui5/sap/crm_leads');

jQuery.sap.declare("zcus.crm.lead.CRM_LEADSExtension.Component");

jQuery.sap.require("cus.crm.lead.Component");

cus.crm.lead.Component.extend("zcus.crm.lead.CRM_LEADSExtension.Component", {

                metadata: {

                                //metadata details i.e.  configuration, customizing and routing data

               }

});

For better understanding, the detailed meanings of above are as follows:

jQuery.sap.registerModulePath – This creates reference to the standard application. The jQuery.sap.registerModulePath or sap.ui.localResources make the location of a component's resources known to SAPUI5.

jQuery.sap.declare – This declares a module as existing, kindly notice the “ZCUS” namespace.

jQuery.sap.require – This ensures that given module is loaded first (i.e. cus.crm.lead.Component) and executed prior to this current execution of extension code.

cus.crm.lead.Component.extend – This is to be extended.

I hope that helps.

Warm Regards

Hemendra