How to use Smart Templates with SAP Web IDE - Creation

Creation of a new application from Smart Templates

For space requirements I'm going to split this blog in 5 parts:

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

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!