Creating a reusable library in SAP UI5

Re-usability in software development is the key for rapid development by making sure you do not start from scratch every time and consistency across the suite.

We had invested considerable time in our UI5 Applications and we wanted to re use some of the artifacts. But to my surprise there was no straight way to create a reusable library(something like sap.m) in WebIDE which is the preferred way to develop UI5 apps. I was finally able to crate a library and use it in multiple apps. When I started my analysis I found this blog and was really excited but unfortunately the option is not available in our version of WebIDE  –

https://blogs.sap.com/2017/12/18/create-link-a-custom-fiori-library-reusable-component-using-web-ide12/

This blog provides a summary of the steps that I followed by doing online research and studying and debugging the standard SAP libraries.

• Create a SAP UI5 Application using Web IDE template –

• Give the project a name and select none in the view and press Finish –

• Delete the controller and the view folders which were automatically generated and create a new file library.js in the webapp folder as below(This is just a skeleton to make sure it is treated like a library by SAP server) –

sap.ui.define([
	"sap/ui/core/Core",
	"sap/ui/core/library"
],function(Core, Library) {
	"use strict";

	sap.ui.getCore().initLibrary({
		name : "com.in.reuse",
		noLibraryCSS: true,
		dependencies : [
			"sap.ui.core"
		],
		types: [],
		interfaces: [],
		controls: [],
		elements: [],
		version: "1.0.0"
	});

	return com.in.reuse;

}, /* bExport= */ false);

• Right click on the app and Deploy as a new app on SAP Frontend Server.

Now the fun Part –

If you check your WebIDE application there will be a new folder created called ‘dist’. This is  used to deploy the app on ABAP front-end server. If we expand the folder structure there will be a new file created called Component-preload.js. This is what we are interested in.

Open your app (deployed as BSP component) in the ABAP Frontend server. The folder structure will look something like this –

Notice I have a javascript file initMap.js which I would like to reuse from the different application.

• Open the UIRepositoryPathMapping.xml. Find the Mapping entry for Component-preload.js and replace the path with library-preload.js. Save and activate the file. Activate the application as well (as it does some sort of regeneration). Now recalculate the SAPUI5 application index using the report /UI5/APP_INDEX_CALCULATE(For more details refer to SAP help documentation).

On the consuming application

• Open the consuming application and declare it as a dependency in manifest –

Now whenever you need the libraries just do a jQuery.sap.require and the javascript files will load up.

jQuery.sap.require("com/in/reuse/lib/initMap");

How to check if things worked 

• Open the developer tools(on chrome F12) and place a break point at a source code line right after the “require” statement so that the processing stops.

• Go to the Network tab and filter on library. We will be able to find the library-preload.js file here  –

• Now go to the Sources tab. We can see that our library has a separate folder and the JavaScript file has loaded as well –

All done and dusted. You can now just plug and play your own Ui5 libraries in any UI5 app deployed on launchpad on Front-end server. You can use it for moving 3rd party APIs to SAP application server (to avoid CORs) or create a library of custom controls or any other use case that might be applicable in your environment.

Regards, Saurabh