New UI5 TypeScript Generator - Flexible Column Layout

[WouterLemaire]

Hi all,

Introduction

Last year I shared my first experience with TypeScript at SAP Teched and I summarized my ideas &  knowledge in a blog post series: “My first experience with TypeScript in UI5” (for the curious ones: https://blogs.sap.com/2021/12/17/my-first-experience-with-typescript-in-ui5-summary/). One of the remarks I mentioned here is about the generator we miss for TypeScript in UI5. We’ve been spoiled over the years with the wizards in Web IDE, the generator in BAS/VS Code and the easy-ui5 generator and now we want to use these generators for TypeScript also!

After my moment at TechEd, I had a meeting with margot.wollny , andreas.kunz and peter.muessig  to see how we could improve TypeScript support for UI5. The generator popped up and Peter mentioned: ”Wouter, don’t be lazy😊”, referring to the fact that I could create a generator myself. That being said, Peter and I teamed up to make a UI5 TypeScript master-detail generator using the Flexible Column Layout.

The result of this was presented at UI5ers live:



Watch the replay or follow the steps below, enjoy TypeScript!

Generator for UI5 TypeScript App using Flexible Column Layout

This generator is provided to you as a sub-generator of the easy-ui5 generator. If you like to know more about the easy-ui5 generator, you can read all about it here:

https://blogs.sap.com/2019/02/05/introducing-the-easy-ui5-generator/

First you need to install the easy-ui5 generator (including Yeoman):

npm install -g yo generator-easy-ui5

Next, you can start the easy-ui5 generator by typing “yo” and select “generator-easy-ui5” or simply run the following command:

yo easy-ui5

This will provide you a list with all generators available as part of the easy-ui5 generator, including the UI5 TypeScript FCL generator. It will be listed with the name: “ts-app-fcl”. You can also run the generator directly with the command:

yo easy-ui5 ts-app-fcl

Besides the options you have in the basic TypeScript template like appname and namespace, we have added more options that will be used to configure the OData service:

Once you provide the OData, the next questions (entity, key, title and other property) will provide you a list of possible values based on the OData service. Here an example of title:

Start app

Once the app has been generated you can simply start the app with the command “npm start”:

Result:

Master:

Master – Detail:

Options explained

EndPoint

This should be an endpoint that points to the Service Document of your OData service, like for example the northwind service: https://services.odata.org/V2/OData/OData.svc/

EntitySet

Based on the provided OData Service Document, the generator will provide you a list of all available OData EntitySets. You will be able to select one as your main EntitySet. The Master page will show a list of all entries in this EntitySet, while the detail page will show the details of the selected entry.

Key

The next option is the key. You'll have to select the field you would like to use as the main key. This will be used in the routing configuration as parameter to navigate to the detail page.

Title

The title option will be bound to the title in the list as well as on the detail page.

Other Field

This last one is an open and free field to bind a second field to the table and on the detail page. It can be a number or a description of the title. Just one additional field to kickstart your project!

 

Contribute

Feel free to improve this template by creating a pull request on this GitHub repository: https://github.com/ui5-community/generator-ui5-ts-app-fcl

 

Special thanks to peter.muessig  for helping with the template and the implementation of the OData support!

 

[former_member5334]

Hi hii757 .

Thanks for the blog.

And my question is about unit tests and opa/wdi tests. Why it doesn't exists in repository? Are tests a problem in typescript?

[WouterLemaire]

It’s not a problem, it’s just not part of the template. You can find an example here https://github.com/ui5-community/hacking-away-sampleapp/tree/main/packages/ui

it could be something to add to the template