Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

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

 

Assigned tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah

      Well said and described Wouter Lemaire
      Keep sharing a lot many more to work differently!

      Author's profile photo Jelena Perfiljeva
      Jelena Perfiljeva

      Thanks for sharing, Wouter! Great post! I'm definitely more of a wizard fan, even though I remember the times when we had to enter DOS commands manually. 🙂

      Good to have different options, so that developers could use IDE of choice. Nicely done!

      Author's profile photo Sauranil Dey
      Sauranil Dey

      Thank you so much for sharing this.

      I was looking out for the exact generator after having used this in SAP BAS.

      Now I can create my app on VSCode too.

       

      Author's profile photo Gerald Kliem
      Gerald Kliem

      Thank you, a great solution, but in my VC I installed SAP Fiori tools - Extension Pack 1.1.2 and I see not Yeoman UI ? Do I need to install it from extend from  https://github.com/SAP/yeoman-ui ?

      Author's profile photo Robert Forster
      Robert Forster

      Hi,

      i do not see the Yeoman with 1.1.2 too