In my previous blog I explained how you can create your own SAPUI5 Library that you can share with UI5Lab: https://blogs.sap.com/2018/03/02/create-your-own-ui5-library-for-ui5lab/

I’ve created this blog for developers that don’t use the SAP WebIDE. UI5lab is opensource and focusing on openUI5. This also brings non-SAP developer that won’t use the SAP Web IDE. To make it easier for developers that use the SAP Web IDE to contribute, I’ve created a UI5Lab Library template. With this template, you generate a UI5 library that’s compatible with UI5Lab and you only need to focus on your UI5 controls.

More information about UI5Lab: http://ui5lab.io

Just create a new project from template and select the category “UI5Lab”. There you’ll find the template “UI5Lab Library”:

Give you your library a name and a namespace. The namespace will be used for the folder structure and it will become the name of your library!

You can immediately create a first control. This will generate a sample control which you can use to start with.

It will generate you the following folder structure.

• Src folder: This folder contains the library, controls and the less files for each theme. The structure is based on your namespace. The first control is just a basic template but uses the namespace and name from the wizard. The control is also added to the library.js file and ready to use.
• Test folder: This folder contains already a sample to test the first control. If you add any changes to the control, you’ll need to change the sample. The index.json needs to be configured for UI5Lab. (you’ll have to update this file when you’re ready)
• The template has some additional scripts to generate your final library. The build script includes logic specific for the SAP Web IDE but also for other IDE’s.

When your control is finished, you can build your library.

This will generate you a “dist”folder. The “dist” folder contains the following:

• Resources: the build version of your library which you can use productive
• Test-resources: generates the samples for outside the SAP Web IDE
• Test-resources-webide: generates the samples that will work in the SAP Web IDE

Go to your sample in the folder “test-resources-webide” and run it as a web application:

The generated control is just a div with a red background and a text in it.

To make the samples work in and outside the SAP Web IDE, I’ve added a generic path to the UI5 SDK: “UI5-SDK-PATH”. When running the build process, this will be replaced with:

• For the folder “test-resources” it will be replaced with “resources/sap-ui-core.js”. Outside the SAP Web IDE, the resources folder will also contain the UI5 SDK
• For the folder “test-resources-webide” it will be replaced with “../resources/sap-ui-core.js”. In the SAP Web IDE, the build process will not load the UI5 SDK in the resources folder. The SAP Web IDE has the UI5 SDK in the root folder.

Test-resources:

Test-resources-webide:

Get the template

You can use my template by creating a destination in the SAP Cloud Platform:

Name=UI5LabFeature
URL=https\://p935700trial-trial-dev-ui5lablibrary.cfapps.eu10.hana.ondemand.com/
ProxyType=Internet
Type=HTTP
WebIDEEnabled=true
Authentication=NoAuthentication
WebIDEUsage=feature
Description=UI5Lab Feature

And activate it in your SAP Web IDE

The template is running on my trial account and will not be running all the time. Therefore you could import the project into your SAP Web IDE from github by cloning the project:

https://github.com/lemaiwo/UI5LabLibraryTemplate

After that, deploy it to your Cloud Foundry environment like described here:

https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#/topic/54b865d25425437a8215d903f3a434be

Create a destination in your SAP Cloud Account like described here:

https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#/topic/b309319775964d47a35c8c151401b21d

Activate it in the SAP Web IDE and you’re ready ?

Start sharing your UI5 controls to UI5Lab in no time!