Skip to Content
Author's profile photo SIMMACO FERRIERO

How to use Smart Templates with SAP Web IDE – Creation

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!

Assigned tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pavankumar Reddy
      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

      Author's profile photo Ahmed Syeda
      Ahmed Syeda

      Hello Pavan -

      Do you have a login for ES4? If not you'll have to request and set it up.Try below link to get the info needed to onboard ES4 the demo / SAP IDES system

      http://scn.sap.com/docs/DOC-40986

      Author's profile photo Pavankumar Reddy
      Pavankumar Reddy

      Hello Ahmed,

      Ya I have login for ES4. I not able to find ES4 in drop down.

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      Hi Pavan,

      in order to see the ES4 in the drop down box, you need to have configured previously a destination to ES4 in your system, as described in this blog:

      How to configure an external GW system with SAP Web IDE

      Have you already done it? If yes and you still have problems, could you please post here a screen shot of your destination configuration?

      Regards,

      Simmaco

      Author's profile photo Pavankumar Reddy
      Pavankumar Reddy

      Hi Simmaco,

      Able to configure with above link.

      Thank you 🙂 .

      Regards,

      Pavan

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Shubhangi Pandey
      Shubhangi Pandey

      Hi Simmaco,

      Thanks for the information, I need to ask if the WEB IDE environment is available in India , as I am not able to open WEB IDE. If it is , Kindly guide me through!

       

      Thanks in advance

      Shubhangi

      Author's profile photo Former Member
      Former Member

      Hi Shubhangi

      The WebIDE is enabled in India too. I've been using it for a while now. Please check this link for more details.

      https://cloudplatform.sap.com/dmp/capabilities/us/product/SAP-Web-IDE/9e5c9d90-e8e0-4e82-aed2-09087a10c973