UI annotations for SAPUI5 application

[akshaya_p]

Can I add UI annotations using a local annotation file to a normal SAPUI5 application where I use smart controls(like smart tables)?

Note: my oData is not annotated. I want to add annotations from UI

[Andre_Fischer]

Annotations on the UI side can be added via the annotation modeler which is part of SAP Web IDE.

https://www.youtube.com/watch?v=9ZzpSMQBiRU

[pratheek_kv2]

Hello Akshaya,

I have never tried this but I think this would be possible. Maybe you can try, to create an annotation.xml file and add that in your manifest for the datasource in which you want the annotation to as below.

capture.png

[akshaya_p]

I tried that But I don't know how they will be accessible in my application

[pratheek_kv2]

If your Data Source has annotations maintained, Smart Controls should automatically detect it. Easiest way to check would be to add "Line Item" annotation and create a Smart Table. Make sure that define a Smart Table and an Entity Set( which is annotated) name is provided to the Smart Table with no Responsive Table.

[akshaya_p]

Hi Pratheek,

I tried that. It did not work and there wasn't any error too

[pratheek_kv2]

Hi Akshaya,

I just tried it and it does work. May be the annotation xml is not proper? or the manifest entry?

Could you ( if that ok ) share the changes you have made ? May be I can help you.

[akshaya_p]

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "gdprtest_annotations",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "servicecatalog.connectivityComponent",
			"version": "0.0.0"
		},
		"dataSources": {
			"northwind.svc": {
				"uri": "/Nothwind/v2/northwind/northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml",
					"annotations": [
						"annotation0"
					]
				}
			},
			"annotation0": {
				"type": "ODataAnnotation",
				"uri": "../annotation0.xml",
				"settings": {
					"localUri": "../annotation0.xml"
				}
			}
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"
		]
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "gdprtest_annotations.view.View1",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "gdprtest_annotations.i18n.i18n"
				}
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			}
		},
		"resources": {
			"css": [
				{
					"uri": "css/style.css"
				}
			]
		}
	}
}
</u>

[akshaya_p]

View file



<mvc:View controllerName="gdprtest_annotations.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m"   xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					  <smartTable:SmartTable entitySet="Categories"
                          useExportToExcel="true"
                          useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
                          showRowCount="true" persistencyKey="SmartTableAnalytical_Explored"
                          enableAutoBinding="true" tableType="Table"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

[akshaya_p]

Annotations File

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata-data-aggregation-ext/v4.0/cs02/vocabularies/Org.OData.Aggregation.V1.xml">
		<edmx:Include Alias="Aggregation" Namespace="Org.OData.Aggregation.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Capabilities.V1.xml">
		<edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470974/Common.xml?api=v2">
		<edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470971/Communication.xml?api=v2">
		<edmx:Include Alias="vCard" Namespace="com.sap.vocabularies.Communication.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Core.V1.xml">
		<edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Measures.V1.xml">
		<edmx:Include Alias="CQP" Namespace="Org.OData.Measures.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470968/UI.xml?api=v2">
		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
	</edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm">
			<Annotations Target="NorthwindModel.Category">
				<Annotation Term="UI.SelectionFields">
					<Collection>
						<PropertyPath>CategoryID</PropertyPath>
					</Collection>
				</Annotation>
				<Annotation Term="UI.LineItem">
					<Collection>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="CategoryID"/>
						</Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="CategoryName"/>
						</Record>
					</Collection>
				</Annotation>
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

[akshaya_p]

This is my project's folder structure. I have used northwind service

[akshaya_p]

Can you kindly review and help?

[akshaya_p]

I have added Manifest, view and annotations file for your reference below. It is a normal SAPUI5 application project and I have used northwind service. Can you please help?

[akshaya_p]

This is how my output looks

[pratheek_kv2]

Hi Akshaya,

Could you please give me one more info?

When you load your app, Is the annotation file loaded correctly? You can check this in the Network tab of console

[akshaya_p]

It says not found