New UI5 TypeScript Generator - Flexible Column Lay...
Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
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:
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”:
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!