Skip to Content
Technical Articles
Author's profile photo Geert-Jan Klaps

Kickstart your UI5 library development with the UI5 Library Generator

During some of my latest projects I had to make use of custom UI5 libraries to centralize some custom controls. Personally since the release of the UI5 tooling, I’m using VS Code to do all my developments related to UI5 / Cloud.

I noticed that for creating a custom library there’s no straight forward way to generate a template for custom libraries. Actually there is one, which doesn’t seem to be maintained anymore for over 2 years.

So at that point, I was still using a template generated by SAP Web IDE. The template itself is great, but still isn’t using the latest features of the UI5 tooling. So I thought to myself, why not create a custom generator based on this template, fully enabled with the latest features of UI5 tooling.

Let me introduce the UI5 Library Generator, a custom UI5 library generator based on the original Web IDE template and some of concepts of the Easy UI5 generator.

Generating a new library using the UI5 Library Generator

First install Yeoman and the UI5 Library Generator using the command line.

npm install -g yo
npm install -g generator-ui5-library

Next open the command line in the folder in which you want the generator to create your new UI5 library and start the generator using:

yo ui5-library

Anwer the questions posed by the generator:

After choosing the framework you want to use, the generator will create your new UI5 library and you’re up and running right away.

You can test the demo control using:

npm run start

Which will result in the UI5 tooling launching the demo control:

 

Next steps

This is the first version of the UI5 Library Generator. The essence of the generator is in place: generating a custom UI5 Library in a matter of minutes. But still there are a few things I have in mind to add, like:

  • Automated testing for the generator
  • CI / CD setup for automated deployment to NPM
  • Deploy configuration
  • Sub generators for e.g. creating a new control

So still a lot of things to do, contributions are always highly appreciated!

Enjoy kickstarting your custom UI5 library projects!

 

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær

      Great initiative.

      I'm excited to see where you take this.

      Author's profile photo Samuel Mok Kay Wai
      Samuel Mok Kay Wai

      Thanks for this!

      Author's profile photo Marco Beier
      Marco Beier

      This definitely addresses a pain point. Everything around custom libraries seems to have been neglected over the past ~2 years. Especially with all the tooling and IDE changes there have been.

      Great initiative, can't wait for the rest of the #SAPCommunity to once again uplift the entire ecosystem bit by bit. 🙌🙌

      Author's profile photo Margot Wollny
      Margot Wollny

      Great blog post and wonderful you shared your project with the community. I believe this helps a lot of people to make a jump start with custom libs. Therefore we featured your blog post on the SAPUI5 community topic page and will add your generator to the developer tools section.

      Maybe you also want to contribute your project to our OpenUI5 Project page? We are actually about to update this page and highlight more recent projects. So your project would be definitively in the short list to be displayed directly on the page 😉

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Thanks for the feedback! Well I'm actually in contact with Peter to contribute this project to the new UI5 community GitHub repository as well. So for sure, I just added it to the OpenUI5 Project Page (pull request on GitHub is pending)!

      Author's profile photo Tim Anlauf
      Tim Anlauf

      Geert-Jan Klaps 

      Is there any way to generate the mta.yaml with the tool? What have to be included there ? An example available for the mta.yaml file?

      With that it could be deployed to CF ... I guess this must be installed in the HTML5 repo? Own approuter needed?