How to leverage vocabulary based annotations in SAPUI5 applications

• Update 06.08.2018 – added code for relative binding and absolute path

When working on a customer requirement where vocabulary based annotations had to be used I stumbled accross the problem how to make use of the same in a SAPUI5 application which wasn’t using any SAP Fiori Elements components.

Thanks to the comment by Nabi Zamani about the difference of relative binding and absolute paths I changed my Code, but it is not working completely.

SAPUI5 documentation: Property Metadata Binding

Since I did not find any simple how to guide I thought that this was worth a small blog after I finally was able to solve the Problem with the help of some colleagues.

While classic sap annotations can be used as follows (using relative binding):

<ObjectAttribute text="{Category/#@sap:label}" />

For vocabulary based annotations the coding looks like follows:

You have to use two hash tags ## instead of @# and you have to use a /String in the end to retrieve the value of the vocabulary based annoation.

<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="ZGW_PRODUCT_SRV.Product/Category">

<Annotation String="Label for category" Term="Common.Label"/>

<Annotation String="Heading for category" Term="Common.Heading"/>

<Annotation String="Quickinfo for category" Term="Common.QuickInfo"/>

</Annotations>

If we for example add the following Code into the Detail.view.xml file of an app that has been generated using the Master Detail Template provided by SAP Web IDE

<ObjectHeader
	id="objectHeader"
	title="{Name}"
	number="{
		path: 'Price',
		formatter: '.formatter.currencyValue'
		}"
	numberUnit="{CurrencyCode}">
	
        <attributes>	

		    <ObjectAttribute text="Relative path: Vocabulary based annotation"/>
			<ObjectAttribute text="{Category/##com.sap.vocabularies.Common.v1.Label/String}" />
			<ObjectAttribute text="Absolute path: Vocabulary based annotation"/>
			<ObjectAttribute text="{/#Product/Category/#com.sap.vocabularies.Common.v1.Label/String}" /> 
			<ObjectAttribute text="Relative path: sap:label"/>
			<ObjectAttribute text="{Category/#@sap:label}" />
			<ObjectAttribute text="Absolute path: sap:label"/>
			<ObjectAttribute text="{/#Product/Category/@sap:label}" />

	</attributes>
	<!-- 	<ObjectAttribute text="{Category/#@sap:label}" /> -->			
</ObjectHeader>

We will get the following result.

What did not work was to get the vocabulary based annotations via an absolute patch (see above red highlighted are).

The functions described in the SAPUI5 documentation to retrieve the numbers for the Schema, the Entity Type and the Property seems not to be executed correctly.

I only get the following string:

===’ZGW_PRODUCT_SRV’]/entityType/[$===’Product’/property/[$===’Category’/com.sap.vocabularies.Common.v1.Label/String}

Hope this will nevertheless help SAPUI5 developers that are not using SAP Fiori Elements also to leverage vocabulary based annotations.

For more Information how to create vocabulary based annotations for sap:label, sap:heading and sap:quickinfo please see my following blog:

https://blogs.sap.com/2018/07/20/how-to-change-the-annotations-saplabel-sapheading-and-sapquickinfo/