Referencing Resources Inside an SAPUI5 Component

For referencing JavaScript modules of your own component, always use the fully qualified module name. The unified shell registers a module path for the root of the component. Example on an AS ABAP front-end server: Component name is mycompany.samples.mysample and it is deployed as BSP application mycompany/my_sample_bsp. In this case, the module path mycompany.samples.mysample is mapped to /sap/bc/ui5_ui5/mycompany/my_sample_bsp.

The unified shell then locates your elements as follows:

• It retrieves the mycompany.samples.mysample.Component component from /sap/bc/ui5_ui5/mycompany/my_sample_bsp/Component.js.
• It retrieves the sap.samples.mysample.view.S2 view from /sap/bc/ui5_ui5/my_sample_bsp/view/S2.view.xml.

You can then reference all modules contained in the component with the fully qualified module name using the require mechanism. For more information, see Modularization and Dependency Management in the documentation of SAPUI5. For example, you can load a JavaScript file located in /sap/bc/ui5_ui5/my_sample_bsp/morejs/MyJSFile.js by using jQuery.sap.require("mycompany.samples.mysample.morejs.MyJsFile");.

To include custom stylesheets, use the includes property of the component metadata as shown in the example in Component Metadata in the documentation of SAPUI5.

For referencing other files, you may need to build a URI for a resource, for example, when creating a resource model. You can do this by calculating the absolute path based on the relative module path of your own component. The following code snippet shows an example:

var effectiveUrl = jQuery.sap.getModulePath("mycompany.samples.mysample") + "/" +
"i18n/i18n.properties"
var resourceBundle = jQuery.sap.resources({
   url : effectiveUrl
});