Manage Smart Template (List View and Object View )...

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

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z

virendra_soni2 · ‎02-05-2016

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

</Record>

</PropertyValue>

</Record>

</PropertyValue>

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

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

</Record>


						<Record Type="UI.DataField">

</Record>



			<Record Type="UI.DataField">

</Record>

</Record>

</Record>

to create these element

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

<PropertyValue Property="Description">

<Record Type="UI.Datafield">

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

</Record>

</PropertyValue>

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

</Record>

</PropertyValue>

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

<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

<Record Type="UI.CollectionFacet">

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

<PropertyValue Property="Label" String="{@i18n>@GeneralInfoFacetLabel}"/>

<PropertyValue Property="Facets">

</Record>

</Record>

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

</Record>

</Record>

</Record>

</Record>

</Record>

</Collection>

</Annotation>

</Record>

</Collection>

</PropertyValue>

</Record>

</Annotation>

</Record>

</Record>

</Record>

</Record>

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

</Collection>

</Annotation>