Skip to Content
Author's profile photo Virendra Kumar Soni

Create Smart Template Project………SAP WEB IDE

Hi All

SAP Recently Release SMART TEMPLATE  Project on SAP WEB IDE.

its completely Based on Annotation no need to write  Code on JS or XMl etc.

SO to Create SMART TEMPLATE Project Following steps are.

STEP1

Create Account on Cloud Cockpit and open SAP HANA Cloud Platform Cockpit

and click on Destnation .

1.PNG

STEP 2 . Create NORTWIND Destnation  click here How to use Northwind OData service with SAP Web IDE

2.PNG

STEP 3

Click Services and 1st column click flpportal

3.PNG

then click Application URL

4.PNG

After that you will enter  SAP WEB IDE HOME PAGE like this

5.PNG

STEP 4

Click NEW ->PROJECT FROM TEMPLATE

/wp-content/uploads/2016/01/6_876119.png

STEP 5

Select SMART TEMPLATE Project

and click on NEXT

7.PNG

STEP 6

Enter the Project Name and Title Click on NEXT

STEP 7

DATA Connection  Click Service URL -> Select Northwind ODATA Services -> Write URI As  Northwind/Northind.svc => Click NEXT

8.PNG

STEP 8

Go your DESKTOP  Create a File name as  “metadata.xml”

put this code inside file

<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

    xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>

    <edmx:DataServices m:DataServiceVersion=”2.0″>

        <Schema Namespace=”NorthwindModel” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

STEP 9

click Add annotation file => select From file system

/wp-content/uploads/2016/01/9_876125.jpg

STEP 10

Browse yr metadata.xml file form Desktop and click OK button

10.PNG

then you will get a file “local_Annotation.xml ” will be created

then click Next

11.PNG

STEP 11

Chose ODATA Collection and ODATA  Navigation

12.PNG

then Click Next Then click finish

NOW YOU HAVE BEEN CREATED SMART TEMPLATE PROJECT.

NO got At your PROJECT  and  open it

u wil get this  format of your Project

13.PNG

Here annotation folder consist Annotations file which is used for editing or adding some additional controls because we cant write JS or XML code .we can add controls only from Annotations.

i18n folder contain some Standard text which is display on output screen you can edit also.

localServices folder contains northwind metadata file and mockserver file.

for running the project  Select flpSandbox.html and click on Run

and you will get this view at output

14.PNG

here click on 1st tiles  then you will get OVERVIEW PAGE like this

15.PNG

its is the overview page of smart template

i have attached project file.

SO its was the HOW TO CREATE SMART Template PROJECT .

and  for Editing or adding some controls pls  click here

Adding Controls on Smart template  using Annotations…SAP WEB IDE

thank you

Virendra

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri

      Its Good Blog Virendra Soni

      Thanks for sharing

      Author's profile photo Jason Scott
      Jason Scott

      If I follow these exact steps running the application fails with all sorts of spurious errors and I get an empty table.

      I use the same northwind destination in other test project so I know its configured correctly.

      Is anyone else having issue with this? Seems the "smart" stuff aint quite ready for use yet....

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi Jason

      if you are getting this output

      ans.PNG

      then please click Setting icon to select columns to display data in the table

      after selecting the columns please click GO button of filter bar.

      then data will display in Table

      or

      please share  snapshot of your Output page ,

      Regards,

      Virendra

      Author's profile photo Jason Scott
      Jason Scott

      Thankyou Virendra,

      Choosing the setting icon to select the column and then pressing GO has solved the problem and I do see the data now (though its a mess but the annotations will fix that).

      there are still a hell of allot of errors in the chrome dev tools console though.

      Author's profile photo Jason Scott
      Jason Scott

      Hopefully you can configure this smart table to auto-display the data - I wouldn't want users to have to click the Go button every time....

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi jason

      if you want some Column is automatically  display Data is automatically  come on that column without using Setting Icon

      use this annotation code at annotations/localAnnotations_1.xml


      it is for Column

      /wp-content/uploads/2016/02/json1_881733.png


      and if you want create some Filter Elements display at filterbar without using filter settings

      then it for Filter elements

      /wp-content/uploads/2016/02/json2_881734.png

      it will solve your problem ............

      or follow this Blog  Manage Smart Template (List View and Object View ) using Annotations file... you will get everything.

      Regards

      Virendra Soni

      Author's profile photo Jason Scott
      Jason Scott

      Thanks again for your reply Virendra but getting the object page to display is pretty difficult given the formatting of all the xml for the annotations. The tooling is simply not their yet and I certainly wouldn't adise the use of the smart stuff in PRD yet.

      Much easier (and much more logical) to use the classic fiori controls and template.

      Author's profile photo Jose Amaya
      Jose Amaya

      Hello Virendra, thanks for taking the time to share this

      I'm giving my first steps on this kind of dev and having my downteps too, I'm trying to adapt your guide to the example that I'm making, I have an Odata service created on hana (HANA XS app) and I want to used it to run an Smart Template Project but I think I'm not doing all that I need on creating the destination, for example, I don't know the WebIDESystem

      Also, I only know how to acces the app from the web development workbench, I dont have it on "Subscriptions"

      Hope you can help me

      Best regards

      Jose

      Author's profile photo Former Member
      Former Member

      I would be please if someone come up with this strategy too.

      Thanks,

      An Thanh

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi An Thanh ,Jose

      As per my knowledge  working on Smart Template and Smart Overview Page is possible in only SAP WEB IDE ..Because in Eclipse external plugin is not available for Smart Template and  Smart Overview Page.

      So you should  prefer SAP WEB IDE for implementing Smart Template.

      and let me know if you have any issue on same

      Regards,

      Virendra Soni

      Author's profile photo Former Member
      Former Member

      Hi Virendra Soni,

      Thanks. I got your point. BTW is it normal because I see there are many errors in dev tools console?

      - I can see the data after pressing the GO button, but when I click any rows, it navigates to a blank page. Does anybody get this same problem?

      Regards,

      An Thanh

      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Thanks, I created another Discussion (Smart template using northwind Odata service)

      Author's profile photo Michael Appleby
      Michael Appleby

      Thank you!

      Author's profile photo Former Member
      Former Member

      Nice blog Soni ! Thank You!

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Thank You Moni 🙂

      Author's profile photo Former Member
      Former Member

      Thanks, Virendra Soni 🙂