Skip to Content
Technical Articles
Author's profile photo Shivaraj Gowda
Shivaraj Gowda
May 25, 2021 3 minute read

Adding multiple OData services and syncing the metadata and annotation file using service manager in visual studio code.

In this blog post, I would like to explain about Service Manager in Visual Studio Code. Service Manager is a feature which is available in a Service Modeler. Normally we use Service Manager while working with services.

 

Features of Service Manager

  • We can add OData service
  • We can sync the metadata and annotation file.

 

Prerequisite:

Sap Fiori tools – Service Modeler extension should be enabled (or installed).

 

Let’s Start

First create the UI5 application in vscode. At the time of application creation, we can consume OData service by providing service url , so that service configuration will be done automatically in manifest and destination configuration  in ui5.yaml file .

 

  1. How to add multiple Services.

Step 1 :

We can open Service Manager as bellow.

From the File Explorer in your project, navigate to webapp->manifest.json

Right click on manifest file ->click on open Service Manager.

 

Step 2 :

Service Manager page will display as bellow .Later click on Add Service button.

 

Step 3 :

Provide full path of OData service (service URL).

Then enter client Username and Password.

Finally click on Add button. Now OData service is successfully added.

 

Step 4:

Data source configuration and model creation will be done automatically. We can check in manifest.json file. Also corresponding metadata.xml file will be created under local service.

 

dataSource%20configuration.

dataSource configuration.

 

 

Model%20creation.

Model creation.

 

 

Metadata.xml%20file%20for%20corresponding%20added%20service

Metadata.xml file for corresponding added service

 

Step 5:

Configuring the destination (Proxy) in UI5.yaml file.

 

path: – Represents starting path means  uri  provided in manifest must start with this path .

url  :- Represents source URL ex :- http://180.8.6:6098

 

Step 6:

We can bind the OData service to view or in controller with the help of model.

 

  1. How to sync the metadata and annotation file.

 

Why we have to sync the metadata?

Suppose we have extended the OData service in backend by adding properties to entity type or created new entity set for existing OData service .At this point the metadata will get change. So in order to update the metadata.xml or annotation (if we are using external annotation or CDS) present in the ui5 application, we need to sync the OData service. Otherwise we have to update metadata.xml file manually.

 

Step 1:

Open service manager by right click on manifest file ->click on open Service Manager. Then click on sync button.

 

Step 2:

Provide client username and password.

Finally click on sync button. Metadata and annotation file will automatically get   updated. We can check it in metadata.xml and annotation.xml file.

 

Conclusion

In this blog post, we have learnt about how to add multiple OData service and syncing metadata file. Service Manger is a good feature available in Visual Studio Code via Fiori Tools Extension Pack.

 

Hope this blog is very helpful ,thanks for reading.

Shivaraj

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hello,

      Thanks a lot for this blog, I didn't know the existance of this tools.

      You should update your blog, because, to have access to the Service Manager we have to do this :

      How to launch Service Manager

      • From the File Explorer in your project, navigate to webapp->manifest.json
      • Right click on the file
      • Choose Open Service Manager

      Regards,

      Joseph

      Author's profile photo Shivaraj Gowda
      Shivaraj Gowda
      Blog Post Author

      Updated

      Thanks
      Shivaraj

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi Shivaraj Gowda ,

      Thanks for the very informative blog. In my requirement i need to add one third-party non sap service (Weather Info). In web ide development i simply used ajax call, but later i faced cors issue.

      Could you please suggest me that how can i add the service here and how to consume it?

      Thanks,

      Jayakrishnan

      Author's profile photo Shivaraj Gowda
      Shivaraj Gowda
      Blog Post Author

      Hi ,

      Please go through below mentioned blog post for consume 3rd party service in webide. You need to configure the destination in order to over come CORS issue.

      https://blogs.sap.com/2016/03/22/webide-how-to-consume-3-party-services-in-ui5-app/

      Author's profile photo j abhishek
      j abhishek

      How to add multiple destinations in ui5.yaml starting wih same prefix path "/sap" for  /sap/opu/odata/sap/service1 main service and /sap/opu/odata/sap/service2 in ui5.yaml and in xsapp.json destination to consume it in SAP BAS?

      Kindly help

      Author's profile photo John Long
      John Long

      So if you have two services starting with /sap and consuming these services from two different destinations then you need to make a couple of changes. You would need to change the routing to pickup a different URI exposed by the manifest.json and a different route to handle this in Cloud Foundry.

      xs-app.json change;

          {
      "source": "^/ES5/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "destination": "ES5",
      "csrfProtection": false
    },

      manifest.json change;

      "SAMPLEFLIGHT": {
				"uri": "/ES5/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml"
				}
			}

      As you can see, it means the URI for the datasource SAMPLEFLIGHT starts with ES5 and the route in xs-app.json will listen for this URI path and using regex, use the first group found i.e. /sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/ with your destination ES5.