How to use Smart Templates with SAP Web IDE – Introduction

Introduction

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

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

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

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:

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