Skip to Content

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.

  • 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) :-

<App namespace>  . <folder path upto custom control > . <customcontrol name>

 

  • 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:-

 

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.

 

  • 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.

 

Thats It…

To report this post you need to login first.

4 Comments

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

  1. Former Member

    Hi Former Member,

    Thanks for detailed explanation of library files. Did you try the above scenario in Gateway repository. I tried deploying the above library in Gateway server, but the library is not loading.

     

    Thanks,

    Venkat

    (0) 
    1. Former Member Post author

      Hello,

      Yes..Library had been deployed in Gateway. I would suggest do not use “Project from Template” while creating this library and check you manifest descriptor.

      (0) 
  2. Former Member

     

    Hi Parichay,

    I uploaded the application in Gateway server and below is my manifest.json file. I used the manifest.json file that you pasted above


    SPAN {
    font-family: “Courier New”;
    font-size: 10pt;
    color: #000000;
    background: #FFFFFF;
    }
    .L1S33 {
    color: #009300;
    }
    {
    “_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
    }
    }
    }”

    When I am trying to consume in consumer app, the library is not getting loaded. Please see the attached images.

    Thanks,

    Venkat.

    (0) 
    1. Prerana CV

      Hi Venkat,

      I had same error in my console. By modifying manifest.json file helped me resolve the error and now i’m able to use this custom control in other apps. For example,

       

      I found the solution from this link –

      https://stackoverflow.com/questions/38593261/one-app-with-multiple-component-js-how-to-load-shared-modules

      Check out these additional blogs. They are quite helpful.

      https://blogs.sap.com/2017/04/05/sapui5-how-to-reuse-parts-of-a-sapui5-application-in-othermultiple-sapui5-applications/

      https://blogs.sap.com/2017/10/23/demystifying-the-art-of-component-reuse-in-sapui5/

      https://blogs.sap.com/2018/02/20/creating-a-reusable-library-in-sap-ui5/

      Happy coding!

       

      Thanks,

      Prerana

       

      (0) 

Leave a Reply