Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to use Smart Templates with SAP Web IDE - Introduction

former_member125464
Advisor
Advisor
‎2016 Apr 14 2:53 PM
12,987

Introduction

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

LinkContent
This partHow to use Smart Templates with SAP Web IDE - Introduction
How to use Smart Templates with SAP Web IDE - CreationHow 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 PageHow to use Smart Templates with SAP Web IDE - Object Page
How to use Smart Templates with SAP Web IDE - ExtensibilityHow 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 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:

SubjectLink
SAPUI5 Smart Template Layouthttps://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.ui.generic.template.sample.Smart...
CDS - Core Data ServicesCDS - Core Data Services - ABAP Development - SCN Wiki
STDemo projecthttps://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!

8 Comments
Labels in this area
Popular Blog Posts