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

/wp-content/uploads/2016/04/01_929715.png

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

/wp-content/uploads/2016/04/02_929716.png


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

/wp-content/uploads/2016/04/03_929729.png


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

/wp-content/uploads/2016/04/04_929730.png


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

/wp-content/uploads/2016/04/05_929731.png


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

/wp-content/uploads/2016/04/06_929739.png


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

/wp-content/uploads/2016/04/08_929740.png


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

/wp-content/uploads/2016/04/09_929750.png


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

/wp-content/uploads/2016/04/10_929751.png


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

/wp-content/uploads/2016/04/11_929752.png


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.

/wp-content/uploads/2016/04/12_929753.png


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

/wp-content/uploads/2016/04/13_929762.png


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

/wp-content/uploads/2016/04/14_929763.png

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

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Pavankumar Reddy

    Hi Simmaco,

    At 5 step I am not able find ES4 system in service catalog drop down. How to configure ES4 system?

    Could you please guide here.

    Regards,

    Pavan

    (0) 
  2. Pavel Veremenyuk

    Ciao Simmaco! First of all – great series of blogs, saved hours of self investigations.

    Hope that would be trivial question and there is positive answer. Any way to get smart template application displaying data right after its run w/o clicking Go button?

    I found in UI adaptation editor option for SmartFilterBar – Live mode. Its description says “If set the search will be automatically triggered, when a filter value was set via the event.” Can’t figure out if I need to use that property from SmartFilterBar and how to set event for filter.

    Appreciate your feedback.

    (0) 

Leave a Reply