Skip to Content

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.

/wp-content/uploads/2016/04/04_929694.png

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 https://sapes4.sapdevcenter.com/: 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.

Goals

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

/wp-content/uploads/2016/04/02_929208.png

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:

/wp-content/uploads/2016/04/03_929209.png

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”!

Prerequisites

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

Steps

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.LineItem

UI.SelectionFields

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

Create the Object Page

UI.HeaderInfo

UI.FieldGroup

UI.DataPoint

UI.HeaderFacets

UI.Facets

UI.CollectionFacets

UI.ReferenceFacets



Useful links

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

Subject Link
SAPUI5 Smart Template Layout https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.ui.generic.template.sample.SmartTemplate/preview
CDS – Core Data Services CDS – Core Data Services – ABAP Development – SCN Wiki
STDemo project https://github.com/simfer/STDemo.git

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

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. 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?

    Regards,

    Trond

    (0) 
    1. SIMMACO FERRIERO 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 (http://scn.sap.com/community/developer-center/front-end/blog/2016/04/16/how-to-build-a-drop-down-list-using-smart-template-cds-view) to see if this is what you need for consuming CDS views in Smart Controls.

      Regards,

      Simmaco

      (0) 
  2. 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. 

    (0) 
  3. 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 🙂

    Regards
    Virendra

    (0) 

Leave a Reply