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 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:
| Subject | Link |
|---|---|
| SAPUI5 Smart Template Layout | https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.ui.generic.template.sample.Smart... |
| 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!
- SAP Managed Tags:
8 Comments
