UI5ers Buzz #35: UI5 Templates – Your Easy Start into UI5 Development
When you start to code a new app, the first steps are usually no fun at all. Instead of focusing on your UI and business logic, you have to set up the right development environment, create the correct folder structure, generate the basic OPA and Qunit tests etc. You know the drill …
But with UI5 you can kick start your app development by using one of our OpenUI5 templates.
These are generic apps that can be used as a good starting point for developing custom UI5 apps with ease.
They contain ready-to-use apps that follow the SAP Fiori design guidelines, include basic yet extendable test functionality, and incorporate the latest best practices and recommendations for UI5 development.
We offer three “flavors” of templates tailored to the following use cases:
The basic template is a good foundation if you want to start with a simple, but properly set up structure.
The worklist template implements a typical worklist floorplan, including routing configuration and preconfigured content.
The master-detail template uses the flexible column layout, a layout control that displays multiple floorplans on a single page.
Where can you find them?
All templates are available under Demo Apps in the Demo Kit, in SAP Web IDE, and in the SAP Repository on GitHub.
|Template||Demo Kit||Name in SAP Web IDE||GitHub Repository|
|Basic template||Online Example Download||SAPUI5 Application||openui5-basic-template-app|
|Worklist template||Online Example Download|| SAP Fiori Worklist Application /
SAP Fiori Worklist Application – OData V4
|Master-Detail template||Online Example Download||SAP Fiori Master-Detail Application||openui5-masterdetail-app|
If you want to use SAP Web IDE to work with the templates, simply choose “File – New – Project from Template” in the menu.
As you can see, SAP Web IDE even offers a Worklist template that is optimized for using OData V4 data sources.
In the Demo Kit, the templates can easily be downloaded via the Download button on the Demo Apps page.
The templates on GitHub can be forked and cloned or downloaded as a ZIP file. Just as you need it.
How can you benefit from templates?
If you use the templates, you automatically follow the latest best practices in UI5 development. Just to name a few:
- All templates are already set up for the UI5 Evolution by using async flags and new APIs from the modular core where possible.
- The unit and integration tests shipped with the templates follow our latest recommendations and support karma as a test runner.
- The master-detail template showcase a flexible column layout with two columns adhering to the Fiori 2.0 Design Guidelines.
- All three GitHub templates demonstrate the use the new ui5 build tools as well as Karma.
As you can see: Our templates can make your life easier and improve your apps at the same time. Who wouldn’t want that, right?
Have a great day,
Previous Post: UI5ers Buzz #34
|Arnd is an Expert Developer at SAP. He discovered the art of programming on pocket calculators, legacy home computers and game consoles. Today his focus is mainly on Web development technologies and UI5.|