Skip to Content
Author's profile photo SIMMACO FERRIERO

How to use Smart Templates with SAP Web IDE – Introduction


For space requirements this blog has been split in 5 parts:

Link Content
This part How to use Smart Templates with SAP Web IDE – Introduction
How to use Smart Templates with SAP Web IDE – Creation How to use Smart Templates with SAP Web IDE – Creation
How to use Smart Templates with SAP Web IDE – ListReport

How to use Smart Templates with SAP Web IDE – ListReport

How to use Smart Templates with SAP Web IDE – Object Page How to use Smart Templates with SAP Web IDE – Object Page
How to use Smart Templates with SAP Web IDE – Extensibility How to use Smart Templates with SAP Web IDE – Extensibility

A Smart Template is a special template provided by SAP Web IDE where you can create powerful applications just by acting on the user interface, without writing a line of code (or at least a few ones!). This SAP Web IDE template is a sort of wizard that properly implements and configure for you the new SAPUI5 Smart Template Layout available at SAPUI5 Explored

Smart Templates are based on “annotation” files: such files can be found mainly in two different places: they can come together with the service or as separate files in the application itself. If an annotation files comes with the service, then it means that it has been created within a CDS view, just as an annotation to the view itself.

More information about CDS view can be found at CDS Views – SAP HANA Developer Guide for SAP HANA Studio – SAP Library

Here below you can find also an example of this kind of file.


SAP recommends to have, as much as possible, annotations directly on CDS views. If this is not possible or if you want either to enrich or override the annotation file coming from the service with other features, you can have an annotation file directly inside the application.

An annotation file can be added to a Smart Template application in several ways: from Service, from File System, from Workspace, from Annotation URL. A single annotation file can be used by different applications, all using the same OData schema. In order to create an annotation file you can use a special SAP Web IDE plugin named Annotation Modeller (from this moment on here AM): this plugin is automatically included and activated within the latest SAP Web IDE releases.

In this H2G we are going to see how to create an annotation file from scratch and how to use it inside a smart template application. I’m going to use the public gateway system ES4 located at you just need to register at Sign up and get started with the SAP Gateway – Demo Consumption System.

During this long journey through Smart Templates you will see that 3 are the most important files involved in the creation of this kind of applications:

1 – the metadata.xml file: it tells to the application which are the data to be displayed

2 – the annotation file: it tells to the application how data are going to be displayed

3 – the manifest.json file, which ties these two things together.

It’s important to consider that no JavaScript code is generated when working with smart templates: this means that content of the application is always rendered just at runtime.


We are going to create a new application in SAP Web IDE using the “Smart Template Application” template.


The final result will be a sort of Master-Detail application showing, on the first screen, a list of all the Products in the ProductSet collection and, on the second screen, the product’s details, plus some information regarding product’s sales data.

The two screens will look more or less like these:


If you are impatient and you want to go directly to the final result you can clone the Git repository for the STDemo project listed here in the section “Useful Links”!


The only two prerequisites for the entire H2G are:

  • SAP Web IDE (you can get a free trial account here)
  • An account on the ES4 Public Gateway: you can register for free here


This is the complete list of steps we are going through:

Create a Smart Template application

Run the application without an annotation file

Add a new annotation file

Create the List Report



UI.DataField and UI.DataFieldForAction in the UI.LineItem

Create the Object Page








Useful links

Here below you can find some useful links for understanding Smart Templates:

Subject Link
SAPUI5 Smart Template Layout
CDS – Core Data Services CDS – Core Data Services – ABAP Development – SCN Wiki
STDemo project

Let’s continue with the next part where we will see How to use Smart Templates with SAP Web IDE – Creation!

Assigned Tags

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

      Hi Simmaco,

      great blog - really helpful in understanding the annotations principle.

      Just one question: you say that annotations can either come from the service itself or be provided on the frontend. In your blog, you show such a frontend file. What are the options however for delivering and consuming annotations directly in a service? Obviously, you can provide these in a CDS view, but how do we then consume these in our Smart Control? And what about the ABAP services?

      All blogs I've seen so far on annotations have focused on local annotation xml files; this is surely not in line with the "generate UI from the backend" principle?



      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      Hi Trond,

      when I talked about annotation files coming from a service, I actually meant annotation files in CDS views, which are proposed to consumers through a service on the Gateway. The service is automatically created by the special annotation "@OData.publish: true". You just need to register the service as I explained in my blog on CDS views, that's all.

      Maybe you can check this blog ( to see if this is what you need for consuming CDS views in Smart Controls.



      Author's profile photo Ransome Mathias
      Ransome Mathias

      Hi Simmaco,
      I am unable to see the option 'Smart Template Application' on my SAP Web IDE account while creating the project from Template. Can you please help me figure out the reason. Thank you for response in advance. 

      Author's profile photo Dominik Steinrücken
      Dominik Steinrücken

      I can not find the "Smart Template Application" Template as well.

      How can I import the template ?


      Best regards


      Author's profile photo saurabh deshmukh
      saurabh deshmukh

      it was ‘Smart Template’ previously.Instead, now ‘List Report’ , ‘Master Detail’ and ‘Worklist app’ has been provided.

      Author's profile photo Thomas Schmidt
      Thomas Schmidt

      its now called "List Report Application"

      Author's profile photo saurabh deshmukh
      saurabh deshmukh

      it was 'Smart Template' previously.Instead, now 'List Report' , 'Master Detail' and 'Worklist app' has been provided.

      Author's profile photo virendra soni
      virendra soni


      Hi Simmaco Ferriero

      IF i want to add more facets in Object View of Smart template.

      is it possible by CDS annotation or can be done by only UI annotation only..???? 🙁

      please help here 🙂