Skip to Content
Technical Articles

SAP UI5 Standard Apps using libraries deployed on SAP Cloud Platform

Recently I ran into a problem when we imported a standard application from on-premise system and deployed to the SAP Cloud platform since we didn’t have Fiori cloud subscription.

Let me explain the problem first. The standard application was imported and deployed successfully but the application was not working as it was using a reuse library. Now even if we import the library from on-premise and deploy it on the cloud it would not work since the module registration inside the application does not have correct path. Lets solve this.

Disclaimer: This is not the standard approach recommended by SAP we should use Fiori apps available for cloud since we don’t have Fiori cloud subscription and had necessary components installed in gateway we can pull the app from ABAP Repository and deploy in cloud, but by doing so the app would not get updated when SAP provides any update and new features it behaves like a custom UI5 application.

We will add the standard app Order Products which uses library RTST_REUSE *

App ID : F0752

Prerequisite:

  1. Activate the ICF node mentioned in the Fiori apps library.
  2. Register the OData needed for the application mentioned in the Fiori apps library.

Importing and deploying application and Library to SCP

  1. On WebIDE Right click on Workspace -> Import -> Application from SAP UI5 ABAP Repository

 

2. Select the required Backend system and select the standard application to be imported

 

3. Once the application is imported successfully We are done with the application import next is to import the Library

4. Follow the same to import the library. Right click on Workspace -> Import -> Application from SAP UI5 ABAP Repository -> Select the required Back-end system and select the library mentioned in the Fiori app config document.

5. Now the Deploy the Library to SAPĀ  Cloud Platform as new application.

 

Next step is to change the Module registration in the application.

 

Change Module Registration in Application

 

  1. Right the imported standard application and select Project -> Add Reference to Library

 

2. Select SAP Cloud Platform as Repository and the library name which we deployed in previous step. Select the version as active.

3. Now an entry would be added to the neo.app.json. This gives the reference for our application to the library we deployed.

{
	"welcomeFile": "index.html",
	"routes": [{
		"path": "/resources",
		"target": {
			"type": "application",
			"name": "rtstreuse"
		},
		"description": "Reuse Library for Fiori Retail Store Applications"
	}, 

Change the path as below to avoid any conflict of loading other libraries in the application.

{
	"welcomeFile": "index.html",
	"routes": [{
		"path": "/Custom-resources",
		"target": {
			"type": "application",
			"name": "rtstreuse"
		},
		"description": "Reuse Library for Fiori Retail Store Applications"
	},

4. Open Component.js file and beautify the code by pressing Ctrl+Alt+B. We could see the the module is registered through the line

jQuery.sap.registerModulePath("sap.retail.store.lib.reuse", p + "../rtst_reuse/sap/retail/store/lib/reuse/");

5. Change the path of the and app name since we have deployed it to the SCP the name of the application would have changed Or we could move the registermodulepath outside of the function since we know that the component belongs to orderproductapp.

	(function () {
					var p = jQuery.sap.getModulePath("retail.store.orderproduct");
					var P = p.toLowerCase();
					if (P.indexOf("/rtstorderprod") !== -1 || P.indexOf("/zrtstorderprod") !== -1) !== -1) {
					if (p.lastIndexOf("/") !== p.length - 1) {
						jQuery.sap.registerModulePath("sap.retail.store.lib.reuse", "/Custom-resources/sap/retail/store/lib/reuse/");
					}
				}
			}());

6. If you don’t have a build system the component-preload would not be updated open the component-preload.js and make the same change there on the modules -> appNameSpace.Component.js property.

7. Next we need to remove the library from manifest.json as the libraries mentioned in manifest.json would be tried to load from sap cdn when deployed to SCP.

	"sap.ui5": {
		"_version": "1.0.0",
		"dependencies": {
			"minUI5Version": "1.28.5",
			"libs": {
				"sap.m": {},
				"sap.me": {},
				"sap.ndc": {},
				"sap.ca.scfld.md": {},
				"sap.retail.store.lib.reuse": {} //remove from manifest
			}
		},
		"config": {
			"sapFiori2Adaptation": {
				"back": true
			}
		}
	}

8. Deploy the application to the SAP cloud platform and register the application to the Fiori launchpad.

 

We are all done now lets open the application and check the network from where the library is loaded.

The application and library is now loaded from SAP Cloud platform through the changes we made in neo-app.json and module registration in component.js. Now the application and library is residing in SAP cloud platform and the library could be reused for other standard application as well through the same steps. The library we deployed to SCP can also be used for other custom applications also if needed.

Cheers !!! Hope this was useful. Thanks for reading.

 

Thanks and Regards,

Vigneshkkar

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