Skip to Content
Author's profile photo Andre Fischer

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/

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabi Zamani
      Nabi Zamani

      Hi Andre,

      It’s always a pleasure to read your crystal clear blogs – Thank You!!!

      It might be worth to mention that your first example

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

      is using Property Metadata Binding in the UI5 terminology. In your specific example your are using a relative binding, which means the binding path gets resolved “relative” to the current context. In your example it gets resolved to the value of the OData 2 annotation called @sap:label. You could have used absolute binding here as well, for details see the link…

      The Annotations snippet you offered contains basically OData 4 annotations, right? Theses can be made available directly via the metadata, or (another) annotation service, or via some annotation file (i.e. shipped with UI5 app itself). Unfortunately, AFAIK there is no documentation in the SAPUI5 demokit illustrating how to use OData Annotation Binding (did I just invent a term?) – I’m glad your example serves as documentation now:

      <ObjectAttribute text="{Category/##com.sap.vocabularies.Common.v1.Label/String}" />
      <ObjectAttribute text="{Category/##com.sap.vocabularies.Common.v1.Heading/String}" />
      <ObjectAttribute text="{Category/##com.sap.vocabularies.Common.v1.QuickInfo/String}" />

       

      The good thing is that in UI5 the V2 ODataModel knows how to hanlde V4 annotations (at least to some extend). In other words: although using the OData 4 annotations of your examples we can still keep using the V2 ODataModel in UI5. I guess your generated code sets “odataVersion”: “2.0” in the manifest.json file, correct?

      Helmut Tammen has answered some time ago one of his own questions which illustrates even more cool stuff:

      <Annotation Term="Common.Label" String="{@i18n>ZCONTRNBR}"/>

      The value of “String” is filled from an i18n file at runtime. This works together with your example as well… I’d say that’s pretty cool, isn’t it?

      I’d love to see OData Annotation Binding being explicitely documented in the demokit (I’d expect it somewhere here). I’m receiving too many questions about it, now I have a link to this blog ?

      Thanks, Nabi

      ps blame it on my lazyness to find it in case there is already some real documentation in the demokit, but please release me and post the link ? But I won't accept the Annotation Helper documentation

      Author's profile photo Andre Fischer
      Andre Fischer
      Blog Post Author

      Hi Zabi,

      thanks for the hint for the property metadata binding.

      I was not able to get it running with vocabulary based annotations and absolute path though.

      Do you have an idea?

      Best regards,

      Andre

       

       

      Author's profile photo Nabi Zamani
      Nabi Zamani

      I'll have a look into this, most probably I won't find any time before mid of September...
      I believe this is worth a separate blog/tutorial, and I'll put this on my list. Maybe it's something we could collaborate on. I'll get back to you!

      Author's profile photo Lukas Böhm
      Lukas Böhm

      Hi Andre,

      thanks for this very helpful blog post!

      For me the vocabulary based annotations and absolute path was working fine with the following code:

      <Label text="{/EntitySet/Property/##com.sap.vocabularies.Common.v1.Label/String}" />

      So the differences between your code and mine is:

      • no # in front of the entity set name
      • and a double ## in front of the "com.sap...."

      Maybe this helps someone else.

      BR, Lukas