UI5 Freestyle Generator wizard in VSCode

I know many of you are a big fan of Command Line Interfaces (CLI) (por to DJ Adams  😉) but probably some of us are also used to more intuitive UI interfaces (not saying that CLI is not a nice UI 😊). Many of us have been using the wizards in Web IDE which helps you very well to boost starting your project. This is something many of us want to keep using in the future as well. Therefore, SAP provides similar wizards for the Business Application Studio (BAS).

As you may know, BAS is based on Eclipse Theia which supports VSCode extensions. This means that the extensions that SAP provides as VSCode extensions can also be used in VSCode! Be aware that not everything in BAS is created with VSCode extensions. Luckily SAP used VSCode extensions for the “new” wizards. E.g. SAP uses this for the Fiori elements wizards. You’ve probably seen in many tutorials that the wizards are also available in VSCode as part of the “SAP Fiori tools – Extension Pack”.

Now, many of these things are already out in the SAP Community for a while. Nevertheless, I came across something by accident I did not found online yet or maybe overlooked. I was using the wizard in BAS for creating a freestyle UI5 app and wanted to us this in VSCode. Knowing that this is a VSCode extension, as mentioned earlier, I started looking to get the same wizard in VSCode. Eventually I found a way to do so by following the next steps in VSCode:

• First install the VSCode extension for SAP Fiori tools

• Start for the command (ctrl + shift + p )  “Yeoman UI Generators”
  • “Yeoman UI Generators” is a Yeoman generator with a UI on top. This is something that SAP has created on top of Yeoman: https://github.com/SAP/yeoman-ui
  • It comes as part of the “SAP Fiori tools – Extension Pack”

• The Fiori Elements extension comes with the wizards for Fiori elements. On first sight there is no UI5 Freestyle wizard available. Nevertheless, a UI wizard for freestyle UI5 apps does exists. To be able to use this, you have to install this wizard additionally. This can be done by going to “Explore and Install Generators” from “Yeoman”.

• Search for “@sap” to have a full overview of all UI wizards provided by SAP. One of them will have the name “@sap/generator-fiori-freestyle”. Click on “install” to start the installation.

• If error occurs during install run clear npm cache with the following two commands:
  • npm cache clean –force
  • npm cache verify

• When you go back to the Yeoman UI the Fiori freestyle template is now available

And you are ready!

This UI wizard will have all the same questions and steps as the Yeoman generator I used in this blog post:

https://blogs.sap.com/2020/07/08/ui5-freestyle-app-in-cap/

The only difference is that I’m now using a UI to answer the questions 😊

• Provide a Data source

• Complete the project settings and click on finish

CLI is nice but for UI5 starters a wizard might be useful. Just wanted to share this to make upi aware that this is possible and available to be used outside BAS. In case you like the wizard approach like in Web IDE or in Business Application Studio, this might be you alternative for VSCode.

Kr, Wouter