Manifest File for Adding UI Annotation in custom UI5 App

by | Apr 1, 2021 | UI5 Programs

Home » SAP » UI5 » UI5 Programs » Manifest File for Adding UI Annotation in custom UI5 App

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.
    Adding local Metadata in UI5
  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.
    Adding local Service in UI5

The manifest will look like this now:

Manfiest for Local Service in UI5

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

Adding UI Annotation in custom UI5 AppThis will create an annotation file within the “LocalService” folder. Also, it will change the metadata as below:

Manifest for UI Annotation in custom UI5 App

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

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

Annotation File in custom UI5Changes 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"
                }
            }
        }
    }
}

 

Author

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author