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

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

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

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

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

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

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>

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&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

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 FRO SMART TEMPLATE

please do comment if you have any Problem in these controls

Thanks & Regards

Virendra