Step by step procedure to create SAPUI5 library: It is a very obvious scenario that for customer applications, the standard Fiori controls sometime do not provide the required features and expected look & feel. The custom CSS classes help to a certain extent but when it comes to “adding additional features”, for instance, introducing new attributes or properties or event, we are totally dependent of Custom controls. To make these customs controls reusable across different applications, it is a good practice to keep them inside a library application (like ABAP Utility Classes) and consume them whenever necessary resulting better reusability.

In this article, I would provide necessary steps to create a custom library with one custom control which will be consumed by another application.

Creating Library App:-

  • Create a simple folder structure in the library app. I have the created the application with below folder structure in WebIde.

Pic1 3 5748701

  • SAPUI5 library is a different type of application without any component.js. In the descriptor of UI5 application we need to define the type first. The type would be “library”.

The namespace for my library is “mylib.custom.control”.

My manifest file looks like this:-

{

“_version”: “1.1.0”,

“sap.app”: {

“_version”: “1.2.0”,

“id”: “mylib.custom.control”,

“type”: “library”,

“embeds”: [],

“i18n”: “messagebundle.properties”,

“applicationVersion”: {

“version”: “1.1.0”

},

“title”: “{{title}}”,

“description”: “{{description}}”,

“ach”: “CA-HOME”,

“resources”: “resources.json”,

“offline”: false

},

“sap.ui”: {

“_version”: “1.1.0”,

“technology”: “UI5”,

“deviceTypes”: {

“desktop”: true,

“tablet”: true,

“phone”: false

},

“supportedThemes”: []

},

“sap.ui5”: {

“_version”: “1.1.0”,

“dependencies”: {

“minUI5Version”: “1.40”,

“libs”: {

“sap.ui.core”: {

“minVersion”: “1.40.3”

}

}

},

“contentDensities”: {

“cozy”: false,

“compact”: false

}

}

}

  • Now in the library file register the custom controls under control section. I have kept the library file as simple as possible. Also the library namespace is same as in manifest i.e. “mylib.custom.control”.

The controls which would be registered in this section should use complete path (as provided in costomcontrol metadata file (highlighted in next step) :-

. .

Pic1 5 2379543

  • Now, I have created one custom control which has a renderer file. Both the metadata and renderer file are placed inside the “control” folder.

  • Deploy the application is HCP or ABAP UI5 repository.

After successful deployment:-

Pic1 9 5230812

Till now, we are done creating our custom library. In the next steps we will be creating our consumer application that will use our custom library.

Creating Consumer App:-

 

  • Create a simple APUi5 app from template. I have used “SAPUi5 Application Template”.

New -> Project from Template -> SAPUi5 Application

 

  • My application looks like below:-

 

  • In neo-app.json descriptor we need to provide the resource path of the library.

At the end of this file, I have added another node for the library as below.

  • The name of library would the deployed library name (the name what you have given during deployment)
  • The path would the application namespace of the library followed by the resource folder. Check the first node of the routes to get the resource path. For my case it is “/resources” in the first route node.
  • Now in the view I’ll use the custom control. My view looks like below. Here I have used the custom control of my library.

Pic1 13 3650043

  • Now deploy the application in HCP or ABAP UI5 repository. Both the library and consumer have to be in same stack.

  • Once deployed running the consumer app. The control from the custom library has been consumed successfully the consumer app.

Pic1 15 4199049

Thats It…