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
this explained flow of Smart template ..
When We RUN SMART TEMPLATE we got this output page
After click 1’st tiles we got this view
in this view it show simple table if we want to make a grid table like this
just Add this Code at manifest.json
if we want to Add some controls at Line items like DataFieldForAction , DataFieldWithURL
then
use this Code at annotations/localAnnotations_1.xml
if we want to make Some Custom Filter Elements like this
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
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
go Overview Page at
So we have almost Controls Deploy at OverView Page
Now Come List View of Smart Template
this is the view of List View
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
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
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>@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>@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
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
USE THIS ANNOTATIONS CODE For SMART TEMPLATE
please do comment if you have any Problem in these controls
Thanks & Regards
Virendra
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
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
Step 2
step 3
these are annotation list you can select your controls
step 4
step 5
i hope you will get your answer
and let me know if you are facing any prob.
regards
virendra
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
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
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
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)?
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
🙂 Thanx Virendra
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