UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy

In the last instructional exercise we discussed your preferred UI5 Tooling Proofreader and this instructional exercise is in continuation to it and a really intricate one. In this, will see UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy – 2.

Below is the highlights of today’s topics and things you will learn.

GitHub Desktop (Download here)
Visual Studio Code (Download here)
Developing UI5 apps in Visual Studio Code using UI5 Tooling
Consuming OData Service using ui5-middleware-simpleproxy

In the event that you’re natural about Open Source, you know how significant Git and GitHub are. Indeed, don’t overreact on the off chance that you’ve never utilized them. You’ll in any case have the option to track with by overlooking the means I do on GitHub Work area (which by the way is a lot more straightforward than Git CLI). In any case, they are significant for the following web journal where I expound on — our ultimate objective which is to Convey our UI5 Application that we make today in Visual Studio Code such that it’s shareable and open so that anybody might be able to see. UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy – 2.

What is VSCode?

In the event that you’re considering what VSCode is, it’s simply a word processor like Scratch pad however with much better elements which is free and simple to download. It has additionally been suggested by SAP as it gives an encounter like Business Application Studio. What’s more, it is likewise additionally an extremely famous improvement climate utilized from one side of the planet to the other.

By and by, the adaptability to foster utilizing open and free devices like a Content manager, NodeJS runtime and plausibility to have UI5 projects openly, grabbed my eye towards UI5 Tooling and through these web journals, I need to take you through the excursion from arrangement to facilitating the application on web. Me being a beginner, I’m certain, there’s something else to it. So we should investigate together. Will we?

Minus any additional interruptions, let us center around the top story.

So we should begin by instating a nearby storehouse (organizer) in GitHub Work area. You could simply make an Undertaking envelope in your preferred way on the other hand.

Give a venture name of your decision and some portrayal on an ideal area in your PC. Click on Make store.

Presently click on Distribute storehouse. Uncheck Keep this code hidden. This moves your nearby vault (on-PC) to a Distant Store (on the web) on your github.com account which you will have connected while setting up your GitHub Work area application.

Click to View on GitHub to verify.

This is the view of your Project which got uploaded (published) on github.com.

Presently assuming that you have Visual Studio Code arrangement and designed, GitHub work area will furnish you with choice Open in Visual Studio Code. You can click that or on the other hand use Show in Wayfarer from where you ought to open your Undertaking envelope in your preferred manager like Sections, Molecule, Glorious and so forth.

Below is the view of your project in VSCode.

Right click on your project and Reveal in File Explorer.

Presently we follow the methodology from past blog for all intents and purposes. Duplicate a webapp envelope with fundamental ui5 format produced from WebIDE, any UI5 generator or you could simply make the design all alone. It doesn’t make any difference. I have added the Fundamental Layout I’m utilizing here on GitHub (access here). You can just reuse it each time you need to begin another UI5 Tooling project by duplicating the envelope to your venture.

Guarantee that index.html has the right bootstrapping src as featured. It very well may be openui5 rather than sapui5 also. The task structure is as beneath.

"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
or
"https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

Let’s change the title in Home view and Save the project.

In the document wayfarer, select the way, type ‘cmd’ and press Enter. This opens CMD Brief highlighting your venture area.

Run underneath orders individually as referenced in the last blog. These orders help in creating the package.json and ui5.yaml document roadly.

npm init –yes //to generate package.json
ui5 init //to generate ui5.yaml (replaces old neo-app.json)
ui5 use sapui5@latest //use latest ui5 version
ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 //adds sapui5 libs
ui5 serve //runs localhost

Presently run the application by composing underneath order and opening the URL in Chrome. Presto! We see our most memorable result.

Take a stab at messing with the view and revive the localhost url to see changes.

Presently comes the STAR of the evening. We need to consume Northwind OData inside our Application. Obviously, we add it in our manifest.json and use it in our application. Be that as it may, stand by, we have no objective designed like in WebIDE. Consequently, here we design ui5-middleware-simpleproxy given by SAP as opposed to designing an objective. At present our server is running and we can’t type anything on CMD brief. To stop it, press Ctrl+C or identical on your PC. Type ‘Y’ and press enter.

Presently run beneath order to introduce the intermediary.

npm install ui5-middleware-simpleproxy --save-dev

Add below code in package.json.

"ui5": {
    "dependencies": [
      "ui5-middleware-simpleproxy"
    ]
  }

Add below lines of code in ui5.yaml. Note that Indentation matters here.

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /resources/
    afterMiddleware: compression
    configuration:
      baseUri: https://sapui5.hana.ondemand.com/resources/
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/

We are finished with our intermediary design. ? We should compose the necessary DataSource and Model in manifest.json.

"dataSources": {
			"Northwind.svc": {
				"uri": "/Northwind/V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml"
				}
			}
		}

"MyModel": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneWay",
					"defaultCountMode": "Request"
				},
				"dataSource": "Northwind.svc",
				"preload": true
			}

Bind the Model in the View as below. Save the project.

<List headerText="Employees from Northwind" items="{MyModel>/Employees}">
         <StandardListItem title="{MyModel>FirstName}"/>
</List>

Go to CMD Brief and begin your neighborhood server once more. Time to actually take a look at yield! Yayy! We just consumed Northwind into our UI5 Tooling project.

These progressions we made were on our neighborhood framework. However, hello, open your GitHub Work area. It has followed these progressions for you. Also, you are good to go to transfer your progressions from your Neighborhood framework to your Github.com account. As featured, give a few name and depiction and tap on Focus on principal/ace. Note that fundamental here, is your primary branch yet it’s alright to not delve into subtleties at this point.

Presently click on Push beginning. This will distribute/push/transfer all your code from your neighborhood storehouse to your far off vault on Github.com.

Confirm it by opening your Github account. Need not stress over additional records or envelopes that got made.

Presently assuming you might want to consume On-Reason OData, you can simply change the mountPath and baseUri in ui5.yaml. Manifest.json likewise must be arranged as needs be.

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /resources/
    afterMiddleware: compression
    configuration:
      baseUri: https://openui5.hana.ondemand.com/resources/
  - name: ui5-middleware-simpleproxy
    mountPath: /sap/opu/odata/sap/ZODATA_SRV/
    afterMiddleware: compression
    configuration:
      baseUri: http://hostname:port/sap/opu/odata/sap/ZODATA_SRV/

That is totally supportive of today. Inform me as to whether you found this blog accommodating, on the off chance that you were effectively ready to follow and consume your administration or it was simply TMI, haha. ?

In the following site, we will have this application on Netlify For nothing. Along these lines, look out for it.

It sure would require some investment making sense of VSCode, GitHub work area, Netlify and these orders we composed on CMD brief. However, these are the conceivable outcomes that UI5 Tooling carries with it which are notable open source industry practices and devices and it wouldn’t damage to peruse and find out about them step by step. See you in the following one. ?

YOU MAY BE INTERESTED IN

How to SPLIT Data in FOR LOOP Using Modern ABAP Syntax?

SAP ABAP Interview Questions Real time Expectations

abap ale idoc rfc step by step