Skip to Content
Author's profile photo Virendra Kumar Soni

Manage Smart Template (List View and Object View ) using Annotations file…

Hi

I have already Explained  Create Smart Template Project………SAP WEB IDE

and adding some basic Controls Adding Controls on Smart template  using Annotations…SAP WEB IDE

Now Manage Smart Template (List View and Object View ) using Annotations file

Flow of Smart Template

/wp-content/uploads/2016/02/12234_881762.png

this explained flow of Smart template ..

When We RUN SMART TEMPLATE we got this output page

1.PNG

After click 1’st tiles we got this view

2.PNG

in this view it show simple table if we want to make a grid table  like this

/wp-content/uploads/2016/02/9_881257.png

just Add this Code at manifest.json

/wp-content/uploads/2016/02/14_881266.jpg

if we want to Add some controls at Line items like DataFieldForAction , DataFieldWithURL

then

use this Code at annotations/localAnnotations_1.xml


7.PNG

if we want to make Some Custom Filter Elements like this

/wp-content/uploads/2016/02/16_881271.png

use this Code at annotations/localAnnotations_1.xml


<Annotation Term=”UI.SelectionFields”>

<Collection>

<PropertyPath>flightDetails</PropertyPath>

<PropertyPath>PRICE</PropertyPath>

<PropertyPath>CURRENCY</PropertyPath>

</Collection>

</Annotation>

If we want to add a column  counter  at line item like this

8.PNG

use this Code at annotations/localAnnotations_1.xml

<Annotation Term=”UI.HeaderInfo”>

  <Record>

  <PropertyValue Property=”Description”>

  <Record Type=”UI.Datafield”>

  <PropertyValue Property=”Value” Path=”CURRENCY”/>

  </Record>

  </PropertyValue>

  <PropertyValue Property=”Title”>

  <Record Type=”UI.DataField”>

  <PropertyValue Property=”Value” String=”Flight Name”/>

  </Record>

  </PropertyValue>

  <PropertyValue Property=”TypeName” String=”Flight Object Page”/>

  <PropertyValue Property=”TypeNamePlural” String=”DOCUMENTS”/>

  <PropertyValue Property=”TypeImageUrl” String=”Hello”/>

  <PropertyValue Property=”ImageUrl” String=”http://www.laptop-computer-comparison.com/image-files/sony-vaio-pink-laptop.jpg“/>

  </Record>

  </Annotation>

if we want to Create one more tiles like this

/wp-content/uploads/2016/02/11_881277.png

go Overview Page at

/wp-content/uploads/2016/02/10_881278.png

So we have almost Controls Deploy at OverView Page

Now Come List View of Smart Template


this is the view of List View

/wp-content/uploads/2016/02/12_881275.jpg

select any column and click Show Details you will get list view

before that

at first Copy this code and paste at

annotations/localAnnotations_1.xml then you will be able to see List view

<Annotation Term=”UI.Identification”>
<Collection>
<Record Type=”UI.DataFieldForAction”>

                               <PropertyValue Property=”Label” String=”ACTION”/>

                          <PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

                       <Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

                  <PropertyValue Property=”Action” String=”CheckFlightAvailability”/>

                </Record>

  <Record Type=”UI.DataField”>

                  <PropertyValue Property=”Label” String=”FLIGHT DETAILS”/>

                <PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

                           <Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

                           <PropertyValue Path=”flightDetails” Property=”Value”/>

                </Record>

<Record Type=”UI.DataField”>

               <PropertyValue Property=”Label” String=”FLIGHT CURRENCY”/>

                <PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

                           <Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

                           <PropertyValue Path=”CURRENCY” Property=”Value”/>

                </Record>

<Record Type=”UI.DataField”>

                  <PropertyValue Property=”Label” String=”FLIGHT TYPE”/>

                <PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

                           <Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

                           <PropertyValue Path=”PLANETYPE” Property=”Value”/>

                </Record>

<Record Type=”UI.DataField”>

                  <PropertyValue Property=”Label” String=”FLIGHT DATE”/>

                <PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

                           <Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

                           <PropertyValue Path=”fldate” Property=”Value”/>

                </Record>

</Collection>
</Annotation>

to create these element

/wp-content/uploads/2016/02/17_881282.png

annotations/localAnnotations_1.xml then you will be able to see  view

<Annotation Term=”UI.HeaderInfo”>

  <Record>

  <PropertyValue Property=”Description”>

  <Record Type=”UI.Datafield”>

  <PropertyValue Property=”Value” Path=”CURRENCY”/>

  </Record>

  </PropertyValue>

  <PropertyValue Property=”Title”>

  <Record Type=”UI.DataField”>

  <PropertyValue Property=”Value” String=”Flight Name”/>

  </Record>

  </PropertyValue>

  <PropertyValue Property=”TypeName” String=”Flight Object Page”/>

<PropertyValue Property=”TypeNamePlural” String=”DOCUMENTS”/>

  <PropertyValue Property=”TypeImageUrl” String=”Hello”/>

  <PropertyValue Property=”ImageUrl” String=”http://www.laptop-computer-comparison.com/image-files/sony-vaio-pink-laptop.jpg“/>

  </Record>

  </Annotation>

<Annotation Qualifier=”hello” Term=”UI.DataPoint”>
<Record>
<PropertyValue Path=”PLANETYPE” Property=”Value”/>
<PropertyValue Property=”Title” String=”Flight ID”/>
</Record>
</Annotation>
<Annotation Qualifier=”hello1″ Term=”UI.DataPoint”>
<Record>
<PropertyValue Path=”fldate” Property=”Value”/>
<PropertyValue Property=”Title” String=”Flight Name”/>
</Record>
</Annotation>
</Annotation>

To Create this

/wp-content/uploads/2016/02/18_881717.png

annotations/localAnnotations_1.xml then you will be able to see  view


<Annotation Term=”UI.Facets”>

<Collection>

<Record Type=”UI.CollectionFacet”>

<PropertyValue Property=”ID” String=”GeneralInformation”/>

<PropertyValue Property=”Label” String=”{@i18n&gt;@GeneralInfoFacetLabel}”/>

<PropertyValue Property=”Facets”>

<Collection>

<Record Type=”UI.ReferenceFacet”>

<PropertyValue Property=”Label” String=”GeneralInformation1″/>

<PropertyValue AnnotationPath=”@UI.Identification” Property=”Target”/>

</Record>

<Record Type=”UI.ReferenceFacet”>

<PropertyValue Property=”Label” String=”GeneralInformation2″/>

<PropertyValue AnnotationPath=”@UI.LineItem” Property=”Target”/>

</Record>

<Record Type=”UI.ReferenceFacet”>

<PropertyValue Property=”Label” String=”GeneralInformation3″/>

<PropertyValue AnnotationPath=”@UI.FieldGroup#generalinformation” Property=”Target”/>

</Record>

</Collection>

</PropertyValue>

</Record>

<Record Type=”UI.ReferenceFacet”>

<PropertyValue Property=”Label” String=”{@i18n&gt;@SecondFacetLabel}”/>

<PropertyValue AnnotationPath=”flightBookings/@UI.LineItem” Property=”Target”/>

</Record>

<Record Type=”UI.ReferenceFacet”>

<PropertyValue Property=”Label” String=”Basic Information”/>

<PropertyValue AnnotationPath=”CarrierToFlight/@UI.Identification” Property=”Target”/>

</Record>

</Collection>

</Annotation>

To create this

/wp-content/uploads/2016/02/19_881718.png


annotations/localAnnotations_1.xml then you will be able to see  view



<Annotation Term=”UI.Identification”>

<Collection>

<Record Type=”UI.DataFieldForAction”>

<PropertyValue Property=”Label” String=”ACTION”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Property=”Action” String=”CheckFlightAvailability”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”FLIGHT DETAILS”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”flightDetails” Property=”Value”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”FLIGHT CURRENCY”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”CURRENCY” Property=”Value”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”FLIGHT TYPE”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”PLANETYPE” Property=”Value”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”FLIGHT DATE”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”fldate” Property=”Value”/>

</Record>

</Collection>

</Annotation>

<Annotation Term=”CarrierToFlight/@UI.Identification”>

<Record>

<PropertyValue Property=”Data”>

<Collection>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”PRICE”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”PRICE” Property=”Value”/>

</Record>

</Collection>

</PropertyValue>

</Record>

</Annotation>

<Annotation Term=”UI.LineItem”>

<Collection>

<Record Type=”UI.DataFieldForAction”>

<PropertyValue Property=”Label” String=”ACTION”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Property=”Action” String=”CheckFlightAvailability”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”FLIGHT DETAILS”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”flightDetails” Property=”Value”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”DATE”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”fldate” Property=”Value”/>

</Record>

<Record Type=”UI.DataField”>

<PropertyValue Property=”Label” String=”PRICE”/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Neutral”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Path=”PRICE” Property=”Value”/>

</Record>

<Record Type=”UI.DataFieldForAction”>

<PropertyValue Property=”Label” String=”ACTION_1″/>

<PropertyValue Property=”Criticality” String=”UI.CriticalityType/Negative”/>

<Annotation EnumMember=”UI.ImportanceType/High” Term=”UI.Importance”/>

<PropertyValue Property=”Action” String=”GetFlightDetails”/>

</Record>

</Collection>

</Annotation>

So it was some Custom Controls .which you can Add in List view

now click EDIT button then you are able to see a massage Notification tab




/wp-content/uploads/2016/02/20_881719.png

USE THIS ANNOTATIONS CODE For SMART TEMPLATE

please do comment if you have any Problem in these controls

Thanks & Regards

Virendra

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      hi Vrendra,

      Thnks for this wondeful blog, its very useful.

      Do u hv any reference about control crossponding to its annotation.

      ex: for Select control--- ref annotation name.

      Hope i m clear...




      Regards

      Shadan




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

      HI Syed

      Smart controls in Based on Annotation code . no need to do code on JS or XMl.

      if you want to add any controls according to your requirement you have to use Annotation Edition or Annotation Modeler

      Go with Annotation Modeler you can easily add controls in Smarttemplate.

      follow these steps

      /wp-content/uploads/2016/02/1_894905.jpg

      Step 2

      2.JPG

      step 3

      3.JPG

      these are annotation list  you can select your controls

      step 4

      4.JPG

      step 5

      5.JPG

      i hope you will get your answer

      and let me know if you are facing any prob.

      regards

      virendra

      Author's profile photo Former Member
      Former Member

      Thanks virendra,

      But i am creating annotation directly at odata level (transaction SEGW), from there how can i do the same as u mentioned.

      Regards

      Syed Shadan

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

      HI Shadan

      yon can Activate some Static Controls only by using  Odata Annotations like  Search field  at filterBar , different View of Value help etc.

      But in case of Line item , data field, action for these fields you have to use Annotation in UI side as mention above .

      Regards

      Virendra

      Author's profile photo Former Member
      Former Member

      hi virendra,

      let me tell you my requirement.

      I have to create two view. one view will have smart table, and click of one records,it has to navigate to second view. Now the second view will have three tabs having line items of first view.

      so, can we create tabs having line items based on annotation??

      can this requirement possible with smart Table control or annotations??

      Hope you understood my requirement.

      Regards

      Shadan

      Author's profile photo Iwan Santoso
      Iwan Santoso

      Hi Virendra,

      Thanks for detailed blog. I'm using the free trial of Web IDE and have three questions:

      1) On the header info, you have a nice blue background and when I tried to create smart template app using my trial account, I do not have it. It looks like just the screen shot below. That is from the wizard.

      2) In the same screen shot within the wizard, some information is having bold and bigger font. Can you tell me the annotation to control this?

      3) Can the same be used also in the details (UI.Identification)?

      SmartTemplate.jpg

      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 Erik Hoven
      Erik Hoven

      🙂 Thanx Virendra

      Author's profile photo Saurabh Sharma
      Saurabh Sharma

      Hey Virendra,

      Thanks for the blog. Did you crack the variant management question that you had asked some time back. I was able to get the control specific variant by putting this in manifest file -

      "smartVariantManagement": true

      But I was more interested in page variant (where we can club it for multile controls). Any pointers how o achieve that.

       

      Best regards,

      Saurabh Sharma