Skip to Content
Author's profile photo Wouter Lemaire

Consume libraries from UI5Lab

UI5Lab is a community driven project to establish a repository for UI5 Custom Control Libraries. It is meant to gather forces throughout the community and enable everyone to use UI5 Custom Controls easily. More information about UI5Lab can be found here:


In this community driven project everyone can share his own UI5 custom controls. To do this, you need to wrap your UI5 control into a library. You can do this by following the steps in this blog:

After you created a library, you can add it to UI5Lab:

There’s also an SAP Web IDE template to make it easier to create your own library:

Besides contributing to UI5Lab, you can also consume from UI5Lab. Every library on UI5Lab is available for all UI5 developers to use these libraries in UI5 projects. There are multiple ways to include one or more of these libraries in your project and it can be different depending on your environment. In this blog I will show how you can consume a library from UI5Lab on the SAP Cloud Platform and how you can use it in multiple projects. You’ll notice that I won’t include the library directly in my UI5 project but deploy it as a separate library project. This gives me the possibility to reuse it in multiple UI5 projects.

For this blog, I’m going to consume the “Space” library.

Get your library

Go to UI5Lab: and select “Browse repo”.  Search the library that you want to use and click on “Source Code” of the library.

This will bring you to the github repo of the library, in this case the following

Here you can find the web URL to clone the library

You can use this web URL to clone the library by using git on your desktop. Open a command line and run: “git clone <library git>”

Move to the created folder where the library has been cloned into:

Build the library

Next, we must build the library. These steps are also described in the following github:

run “npm install” in the folder of the library

If you now open the folder in the explorer, you’ll find the “dist” folder. In this folder there are two folders:

  • Resources: which contains the library
  • Test-resources: this one contains the test folder to test the library

Import the library in the SAP Web IDE

Select the resource folder (which contains the library) and zip it.

Go to the SAP Web IDE (full stack) and create an empty folder for this library, for example “UI5LibSpace”:

Right click on this folder –> import –> File or Project

Select the zip file that you’ve created in the previous step and change the “import to” path to “src”

Your project will now look like this:

Configure the library project in the SAP Web IDE

Show hidden files

Go to the project settings of the library and just click on save. This will generate some hidden files that we need to use the project as a library.

Refresh workspace items

You’ll see a new folder “.che”. This contains the configuration of the project but will also contain the name of the project after the deployment. We need that name to consume the library.

Deploy the library

Deploy to SAP Cloud Platform

We need the application name in the following dialog to consume the library. Try to remember it ?

The library is now running in your SCP account and ready to use


Create consuming app

Create a basic UI5 app to use the library.

We use the namespace “” for consuming the library. Our UI5 app will try to look for the library in the “/resource” folder. But this is a custom UI5 library and is not available in the resource folder of the SDK.

We need to add the following to the neo-app.json to use the library and solve this issue. This will redirect each call to “/resources/ui5lab/wl/space” to the application that contains the library and add “/src” in front of the path.

We must add “/src” because we added the “resource” folder in the “src” folder. If you leave the “src” folder out of it, you won’t have to change the entryPath.

You can copy the json object here:

      "path": "/resources/ui5lab/wl/space",
      "target": {
        "type": "application",
        "name": "ui5libspace",
        "entryPath": "/src/resources/ui5lab/wl/space"
      "description": "UI5Lab Space Library"

In the manifest.json, we add our library as a dependency.

Include the namespace in the view and use the controls of the library

 <space:Intro intro="Hello all !"
              title="Welcome to UI5Lab"
              text="This blog helps you consuming libraries from UI5Lab."/>

And you’re done!

As you can see, it’s not that hard! Use as many libraries from UI5Lab as you want! Some of the libraries are even able to build in the Web IDE, that makes it even easier.

You can use the libraries also on your ABAP systems. Therefore, you need to deploy them to your system and add the following at the top of the “component.js”“”, “/sap/bc/ui5_ui5/sap/<BSP App Name>/src/resources/ui5lab/wl/space “);

You need to do this to consume your library from your on-premise system in your app. This solution will work when your app is running in the Web IDE, Fiori Launchpad and even as a standalone app. You could also do this in the manfiest.json, but that solution will not use the absolute path and result in different behavior depending on the runtime environment. This would require a different path when running in the web ide or in Fiori or as standalone app.

Example on how to use this:


Start consuming libraries from UI5Lab !





Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabi Zamani
      Nabi Zamani

      Another nice blog - thanks!
      However, when deploying to NW ABAP correctly then it's absolutely not necessary to add something like this to the Component.js:“”, “/sap/bc/ui5_ui5/sap/<BSP App Name>/src/resources/ui5lab/wl/space “);

      Thanks to the App Index UI5 will automatically know where to find the library. In other words: make sure to deploy the library correctly, then reference the lib just like it's a standard ui5 lib. Works like a charm on both SAPCP and NW ABAP.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Thanks Nabi, Didn't know that. The system that I'm using was still 7.40 and did not use cachebuster so also no App index. We recently updated, so should not need that anymore 🙂 Thanks!

      Author's profile photo Nagandla Raghu Ram
      Nagandla Raghu Ram

      Hi Wouter,

      The blog is interesting. I have followed all the steps in your Blog to consume Signature Custom Control from UI5 Lab. It works fine when I run with WebIde, it is not working when I deploy the app to FLP.

      I tried using“”, “/sap/bc/ui5_ui5/sap/<BSP App Name>/src/resources/ui5lab/wl/space “);

      But it is showing error.

      I have tried Nabi's method of Indexing. But we are not using component.js file in our custom lib, so this also did not work.

      Could you please suggest me work around.

      Thank you...

      Author's profile photo Tiago Almeida
      Tiago Almeida

      Very detailed. Thanks a lot for helping the community consume the UI5Lab stuff 🙂

      Author's profile photo Michael Graf
      Michael Graf

      Thanks you for documenting this very detailed and easy to follow, its great to have such a comprehensive guide now. Will definitely cross-link in our soon to be updated documentation!

      To all: We are always open for contributions, if you are interested in UI5Lab, have a look at and see what's in for you 🙂


      Author's profile photo Michelle Crapo
      Michelle Crapo

      Using other "stuff" instead of creating it again. What a novel idea.  Really - thank you for this blog. I would have never known where to go looking without it. (Unless I got luck with a google search)


      Author's profile photo Alexander Eggers
      Alexander Eggers


      I am able to follow all of this right up until the point where I actually USE the library. When I declare the dependency in my manifest.json, the app tries to load my library from instead of from the SCP where I deployed it.  Obviously that won't work and I get a 404. What am I doing wrong here?

      Cheers, Alex

      Author's profile photo Ethan Jewett
      Ethan Jewett

      It sounds like you're missing the neo-app.json piece. That is the part that redirects the request to either local resources or another application.

      Author's profile photo Alexander Eggers
      Alexander Eggers

      EDIT: Fixed! Apparently I needed to add my library to the resourceroots in the index.html. As soon as I did, my app started looking in the correct place. I do wonder why I have to do this for my library but not, for example, when I want to use destinations.


      This is my neo-app.json entry. It doesn’t seem to be recognized by my app.

      “path”: “/resources/ui5lab/wl/space”,
      “target”: {
      “type”: “application”,
      “name”: “ui5libspace”,
      “entryPath”: “/src/resources/ui5lab/wl/space”
      “description”: “UI5Lab Space Library”

      Author's profile photo Anirup Patnaik
      Anirup Patnaik

      Hi @Alexander Eggers,

      Please can you help how you added the library to the resourceroots in the index.html (line of code).


      Anirup Patnaik

      Author's profile photo Anirup Patnaik
      Anirup Patnaik

      I got the solution to this. Once both the apps were deployed to the gateway server, it was not able to load the library-preload.js file of the custom library.

      But giving the path of the library app in the resource roots solved the prob.

      Below is the code :

      <script id="sap-ui-bootstrap"
      "nabi.sample.ui5app": "",