Skip to Content
Author's profile photo Arnd vom Hofe

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.

Choose wisely!

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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Emanuele Ricci
      Emanuele Ricci

      I would like to talk about the new sap.f.FlexibleColumnLayout

      As far as I get you would like to deprecate the SplitApp (I don't remember from the home PC where I read it) in favor of the FlexibleColumnLayout. With this choice (that follows the Fiori 2.0 design pattern) you are giving all the implementation work to the developer that has no more a framework-level implementation of this behavior. In your demo app on GitHub, all the interaction (previously owned and done by the SplitApp) on both mobile and the web is done by the Master.controller.js

      Is this the new path chosen by SAPUI5? Should the developer adopt the FlexibleColumnLayout and deprecate the SplitApp? Is it a good choice to let the developer handle all the basic interaction instead of levering the power and stable implementation done by core developers from SAP?

      Author's profile photo Arnd vom Hofe
      Arnd vom Hofe
      Blog Post Author

      The sap.m.SplitApp is a deprecated design pattern from the Fiori Design guidelines that is replaced with the more powerful Flexible Column Layout in Fiori 2.0 .

      The SplitApp-control itself is not deprecated but we don't use it anymore in new Fiori apps. 

      If all developers use Fiori 2.0 design patterns, allusers will benefit, as they can adapt to new apps more easily, because all apps "feel" the same.

      Flexible Column Layout works fine in mobile scenarios, but the developer has to implement some layout parameter.