Bundle Custom Controls in a Library

Introduction

There is a lot of information about creating libraries. Sadly not many are really "up-to-date" therefore you kind of have to work your way through everything and figure out what works best for you. Since I do not cover a custom library in my playground application, I'll list a few examples together with some info-material at the end of this page. Also make sure to take a look at this repository and all the information linked there.

Basic File Structure

This diagram depicts the complete folder structure of a library named "some.lib" containing one control named "SomeControl" (so the full control name is "some.lib.SomeControl") - from Docs.

some.lib/
+---src/
|   +---some/
|       +---lib/
|           +---themes/
|               +---base/
|                   +---img/
|                       img-RTL/
|                       library.source.less
|                       SomeControl.less
|                   sap_bluecrystal/
|                   +---img/
|                       img-RTL/
|                       library.source.less
|                       SomeControl.less
|           .library
|           library.js
|           messagebundle.properties
|           messagebundle_<any-locale>.properties
|           SomeControl.js
|           SomeControlRenderer.js
+---test/
    +---some/
        +---lib/
            +---SomeControl.html
                qunit/
                +---testsuite.qunit.html
                    SomeControl.qunit.html
                visual/
                +---visual.suite.js
                    SomeControl.spec.js

Basic Steps for Consumption

1. Build & Deploy to application
2. Add new library as dependency of the consumer application
3. (Adjust resourceroots of consuming application to where the library sits)
4. Use custom control in the application:
   • Add XML namespace
   • Use XML namespace+control

A Few Steps in Pictures

Credits to Flexso Digital.

1.

2.

3.

4.

5.

Credits:

• Grunt-Tasks for UI5, Important Task: 'Preload'
• Developing Content for UI5 - control-libraries
• Create UI5 Lib. for Ui5Lab
• Creating a reusable library in UI5 - with WebIDE
• Example Library for Flatpickr
• UI5Con BE, 2020