Consume libraries from UI5Lab

[WouterLemaire]

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: http://ui5lab.io/

 

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: https://blogs.sap.com/2018/03/02/create-your-own-ui5-library-for-ui5lab/

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

https://blogs.sap.com/2018/03/02/add-your-ui5-library-to-ui5lab/

There’s also an SAP Web IDE template to make it easier to create your own library: https://blogs.sap.com/2018/03/08/sap-web-ide-ui5-library-template-for-ui5lab/

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: https://ui5lab.io/ 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

https://github.com/lemaiwo/UI5Lab-library-space

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:

https://github.com/UI5Lab/UI5Lab-app-simple

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 “ui5lab.wl.space” 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

 xmlns:space="ui5lab.wl.space"

 <space:Intro intro="Hello all !"

              logo="http://openui5.org/resources/OpenUI5_newlogo_orange_only.png"

              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”

jQuery.sap.registerModulePath("ui5lab.wl.space", "/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: https://blogs.sap.com/2017/06/06/sapui5-how-to-create-a-custom-library-and-how-to-use-the-js-files-i...

 

Start consuming libraries from UI5Lab !

 

Greetings,

Wouter