Preface – This post is part of the UI5 Programs series.

Introduction

Many times we need to add UI Annotation for custom UI5 application. This requirement is generated as backend is unable to provide some metadata that is required for Smart controls. To add those metadata, we create an annotation file and connect with required service. In this article, we will mainly focus regarding the setup of UI annotation using manifest.json file. We will discuss how the annotations are added in a different article.

How to start Adding Annotation in a Service

We need to follow given steps to add an Annotation in custom UI5 App:

1. Download the metadata of the service for which you want to add Annotation. For that you need to open “<app url>/<your service name>/$metadata” and save it locally in your system. Here, we will take example of Northwind metadata.
   
2. Add a new OData service (by right clicking at the project) and choose “File System” as a source. It will ask to upload a metadata file. Upload the one that you have just downloaded in step 01. Choose default or named model in next step. This will automatically add a service in your manifest file. Also, a new folder “localService” will be created with your metadata file.
   

The manifest will look like this now:

3. Add a new Annotation File (by right clicking at the folder “LocalService”), choose your model (here it is Northwind) and finish.

This will create an annotation file within the “LocalService” folder. Also, it will change the metadata as below:

As you can see a new Annotation is added in the manifest now.

4. Now you can open your Annotation file and your respective changes.

Changes in Manifest File for Adding UI Annotation in custom UI5 App

For Annotation, following changes are incorporated in a Manifest file. As you saw, all the changes were auto generated:

"dataSources": {
    "NorthwindModel": {
        "uri": "/here/goes/your/serviceurl/",
        "type": "OData",
        "settings": {
            "localUri": "localService/metadata.xml",
            "annotations": [
                "annotation0"
            ]
        }
    },
    "annotation0": {
        "type": "ODataAnnotation",
        "uri": "localService/annotation0.xml",
        "settings": {
            "localUri": "localService/annotation0.xml"
        }
    }
}

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "Test.Test",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "NorthwindModel": {
                "uri": "/here/goes/your/serviceurl/",
                "type": "OData",
                "settings": {
                    "localUri": "localService/metadata.xml",
                    "annotations": [
                        "annotation0"
                    ]
                }
            },
            "annotation0": {
                "type": "ODataAnnotation",
                "uri": "localService/annotation0.xml",
                "settings": {
                    "localUri": "localService/annotation0.xml"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "rootView": {
            "viewName": "Test.Test.view.Main",
            "type": "XML",
            "async": true,
            "id": "Main"
        },
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "Test.Test.i18n.i18n"
                }
            },
            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "NorthwindModel",
                "preload": true
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "Test.Test.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [
                {
                    "name": "RouteMain",
                    "pattern": "RouteMain",
                    "target": [
                        "TargetMain"
                    ]
                }
            ],
            "targets": {
                "TargetMain": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "Main",
                    "viewName": "Main"
                }
            }
        }
    }
}