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

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

Assigned Tags

Virendra Kumar Soni

February 5, 2016 9 minute read

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

9 Comments

You must be Logged on to comment or reply to a post.

Former Member

February 25, 2016 at 8:27 am

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

Virendra Kumar Soni

Blog Post Author

February 25, 2016 at 9:03 am

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

Former Member

February 25, 2016 at 10:08 am

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

Virendra Kumar Soni

Blog Post Author

February 25, 2016 at 11:14 am

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

Former Member

February 29, 2016 at 5:09 am

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

Iwan Santoso

March 28, 2016 at 11:43 am

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

Michael Appleby

March 28, 2016 at 1:29 pm

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

Erik Hoven

October 7, 2016 at 5:06 am

🙂 Thanx Virendra

Saurabh Sharma

April 4, 2017 at 3:08 am

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

</Collection>

</Annotation>