How to use Smart Templates with SAP Web IDE - Creation

[former_member125464]

Creation of a new application from Smart Templates

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

Link	Content
How to use Smart Templates with SAP Web IDE - Introduction	How to use Smart Templates with SAP Web IDE - Introduction
This part	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

Let's get started with the creation of our first Smart Template application in SAP Web IDE.

1 - Open your SAP Web IDE

2 - From the File menu choose New --> Project from Template

3 - Choose to start from a new Smart Template Application and click on Next

4 - Enter a name for the project, a title, a namespace and a description and click on Next

Parameter	Value
Project Name	STDemo
Title	STDemoTitle
Namespace	com.st.demo
Description	STDemo Application

5 - Choose the ES4 datasource, select the GWSAMPLE_BASIC service and click on Next

6 - For this H2G we don't want to use any annotation file coming from the server, even because on GWSAMPLE_BASIC we don't have one: so just click on Next

7 - Select the OData Collection and the OData Navigation entity sets and click on Finish. For this exercise we are going to use "ProductSet" as the main entity set and we want to navigate to the Sales Order Line Items

8 - The project is created: what we need to do now, in order to start the application, is to select the Component.js file and click on the Run button on the toolbar

9 - Enter the credentials to the ES4 system if needed

10 - The application starts: however, by clicking on the Go button, you won't be able to get any data from the system because the application doesn't know yet how to display your data

11 - You'll get this error instead, informing you that since you don't have any column in your template, the application cannot show any data

12 - You can add some columns manually by clicking on the little gear icon on the toolbar

13 - For example you can add Price, ProductID and Product Name

14 - The application shows you some data, but the changes you have done to the app won't be saved: those changes are simply not persistent; once you close the app, you will lose those changes.

15 - So, the only way to workaround this problem is to use annotation files and this is what we are going to explore here. Before this, let me firstly change the application title and the ListReport title. The first one can be found in the i18n.properties file located directly under the i18n folder of the webapp directory. The second instead can be found in the i18n file located under the ListReport/ProductSet subfolder

16 - At the end, if you refresh or restart the app you will see the two labels have been successfully updated

Let's continue with the next part where we'll learn How to use Smart Templates with SAP Web IDE - ListReport!