Skip to Content
0

UI annotations for SAPUI5 application

Apr 13 at 07:35 AM

66

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Andre Fischer
Apr 13 at 08:14 AM
1

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

Share
10 |10000 characters needed characters left characters exceeded
Pratheek KV
Apr 13 at 07:45 AM
0

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


capture.png (6.4 kB)
Show 13 Share
10 |10000 characters needed characters left characters exceeded

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

0

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.

0

Hi Pratheek,

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

0

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.

0

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?

0
{
	"_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>
0
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>
0

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>

0

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

structure.png (3.7 kB)
0

Can you kindly review and help?

0

This is how my output looks

op.png (16.6 kB)
0

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

0

It says not found

ann.png (32.9 kB)
0