You created a UI5 control and wrapped it into a UI5 Library in the previous blog: https://blogs.sap.com/2018/03/02/create-your-own-ui5-library-for-ui5lab/ . After that you’re ready to share it with the UI5 Community thanks to UI5Lab. In this blog I’ll show you how you can add your UI5 Library with your own controls in UI5Lab.

More information about UI5Lab can be found here: http://ui5lab.io/

Get a local version of UI5Lab

Start by creating a Fork on the UI5Lab-central Github

https://github.com/UI5Lab/UI5Lab-central/

This can take a few seconds…

Once you have done that, you can clone “UI5Lab-central” from your own Github:

Go to your desktop and open command line, create a folder and navigate to it

I created a folder “ui5lab”

Clone UI5Lab from your github fork:

git clone https://github.com/lemaiwo/UI5Lab-central.git

Add your library

Go to the local UI5Lab folder and add the following files to add your library:

• Libaries.json
• Package.json
• combineProjects.json

 

Add your library name to “libraries.json”

devDependencies name should be same as in the package.json of your library

Copy the the folders from your library in node_modules to the folders of UI5Lab.

• resources folder is used for the library
• test folder is used for your examples

Build UI5Lab on your desktop

After the configuration we can build a local version of UI5Lab with our library in it.

We need to go back in the command line and navigate to the folder

cd UI5Lab-central

Here we need to run the command:

npm install –ignore-scripts

This will load all the required npm dependencies without running their individual scripts

After that, run:

npm run postinstall

This will load bower dependencies and copy all files to the correct places

Last command:

grunt serve

This will run a local webserver to test UI5Lab on your desktop.

Test UI5Lab on your desktop

Go to the local webserver in a browser on your desktop via this url:

http://localhost:8080/test-resources/ui5lab/browser/

Here you’ll see your library

Navigate to your Library and you’ll see the samples that you’ve created:

 

In the local version, it can be possible that not all examples work, including your own. UI5Lab is still not completely finished and this step is still on the todo list to be fixed.

Add changes to your Github fork

Now you’re ready to push your changes back to git. But before you do, don’t forget to set your email. This is required for the contribute license agreement. Do this with the following command:

git config –global user.email “email@example.com”

Add your changes to git with the following commands:

• git add .
• git commit -m “description”
• git push origin master

Do a Pull request

Go back to your fork of UI5Lab-central on Github and create a “New pull request”

 

Click on “Create pull request”

Fill in a name and description for the pull request and click again on “Create pull request”

After that, it will start a “Contributor License Agreement” check and start a Travis CI build.

When the build is done, you should see the following:

 

After that Michael Graf will merge your pull request with the master branch on Github and you’ll see your library in UI5Lab

Find your library in UI5Lab

Welcome to UI5Lab!