Skip to Content
Technical Articles
Author's profile photo Jakob Marius Kjær

End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code

Welcome to this blog series, if you are going straight in here.

[Update] I’ve added a little table of content below for quicker navigation

 

Now let’s move into VScode. You should be able to run command

code .

To open VSCode with your folder already there.

A few handy shortcuts for VSCode:

  • CTRL + SHIFT + P – Opens the command pallette for you to continue your CLI from the editor itself
  • CTRL + ` – Opens the terminal
  • SHIFT + ALT + F – Formats the document
  • CTRL + F2 – Select all occurences of current word (For search replace)
  • CTRL + \ – Split Editor

Let’s continue and expand on the functionality of our app. I want to use an OData service on my gateway system that needs some authentication.

I’ve added the datasource

"dataSources": {
	"mainService": {
		"uri": "/sap/opu/odata/IWBEP/GWSAMPLE_BASIC",
		"type": "OData",
		"settings": {
			"localUri": "localService/metadata.xml"
		}
	}
}

and model to my manifest

"": {
	"dataSource": "mainService",
	"preload": true,
	"settings": {
		"defaultBindingMode": "TwoWay",
		"defaultCountMode": "Inline",
		"refreshAfterChange": false
	}
}

and then a list to the view,

<List items="{/SalesOrderSet}" noDataText="{masterView>/noDataText}" mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}" growing="true" growingScrollToLoad="true">
	<items>
		<ObjectListItem type="Navigation" title="{SalesOrderID}" number="{NetAmount}" />
	</items>
</List>

but when i run my app we get a 404 on the metadata.

In Volker’s blog another community member K. Schouten has created a proxy middleware package that uses authentication.

Let’s install that.

npm install ui5-middleware-proxy-basicauth --save-dev

I had another issue here, that you probably won’t. But thought I’d share all my experiences. When I ran the install command I got the following error:

npm ERR! Cannot read property ‘0’ of undefined

I needed to delete my package-log.json file and then run the command again.

Afterwards run the NPM start again.

Also bear in mind that the server and custommiddleware properties are only declared once in the yaml file and you just need the name etc. Be mindful of your indentations.

Now rerun the NPM start and you should get a 200 from the metadata call. So we can now proxy as well.

And our app should look like this:

 

I’m hoping K. Schouten will fix the npm package, if you hear my call out, please comment on when it’s complete and I’ll update the blog.

Alright let’s explore some of the plugins.

  • michalkozubik.ui5-explorer – Gives you the API from SAPUI5 inside vscode
  • milannankov.vscode-ui5 – Adds code snippets to use while you are coding.
  • eg2.vscode-npm-script – Gies you capabilities to execute scripts directly from the editor
  • tapsiturbi-publisher.openui5-require – Moves all sap* classes to your sap.ui.define part of your controller.

Alright on to my next problem. We do a lot of component reuse and I want to either proxy that from the server as well or at least use the local resources. Let’s see what we can do in our next blog coming soon.

 

 

 

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Qurban Ali
      Qurban Ali

      Hey, what a brilliant post I have come across and believed me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and I will look for more postings from you.

      Author's profile photo K. Schouten
      K. Schouten

      Hi Jakob,

      Thank you for mentioning me. I've merged your fixes to the proxy middleware. So a part of the blog could alread be skipped.

      Amazing to see what we are able to setup together.

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      Awesome stuff, thanks very much. I've edited the blog to reflect the changes. I'd be happy to continue to contribute.

      Author's profile photo Anne Kathrine Petterøe
      Anne Kathrine Petterøe

      Hi, thank you for posting this 🙂

      Does anyone know what do to if I have to use other authentication methods than basic auth?

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      You update the package to use passport 😉 Currently the package only supports basic auth. Hopefully someone can help out with this. I'm leaving for Denmark soon to catch up with yo in person 😀

      Author's profile photo Anne Kathrine Petterøe
      Anne Kathrine Petterøe

      LOL, well let me see what I can do the next few weeks then ?

      Safe travels, and see you soon!

      Author's profile photo Dmitrii Iudin
      Dmitrii Iudin

      I think I am lost here.

      I was following the blog and more or less managed to make the things happen. But it seems that I hit the wall with the proxy configuration

      I have the local instance of netweaver which is running in virtual box. This link : http://vhcalnplci.dummy.nodomain:8000/sap/opu/odata/IWBEP/GWSAMPLE_BASIC is showing the data as expected. Thus I have configured everything as per the blog. Still when I am starting the application via npm – I am getting no data error. Upon checking console log I can see that there is an error that is associated with accessing http://localhost:8080/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata?sap-language=EN

      Upon accessing the link directly I am getting the error Cannot GET /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata

      I have to admit that I am not sure if there is any way out. I have maintained the username and password in .env - but I do not see any possible way for me to investigate this problem further.

      Author's profile photo Mio Yasutake
      Mio Yasutake

      Hi Dmitry,

       

      My manifest.json setting is as follows. (I added "odata/" in front of normal uri)

      "dataSources": {
      			"mainService": {
      				"uri": "odata/sap/opu/odata/iwbep/GWSAMPLE_BASIC/"

      and ui5.yaml

        - name: ui5-middleware-proxy-basicauth
          afterMiddleware: compression
          mountPath: /odata
          configuration:
            baseUri: "https://sapes5.sapdevcenter.com/" 

      It's working fine for me.

      Author's profile photo Kashif Bashir
      Kashif Bashir

      Hi Jakob,

      I am having trouble running the proxy. tried hard always get 404

      added .env file in the root folder (where package.Json) is located with my credentials to NWGW system. (Tried putting the file inside folder i.e next to YAML file) no luck ?

      and fixed the YML and manifest as described in ui5-middleware-proxy-basicauth read me file. but no luck ?

      Any pointers ? my suspicion: proxy config is not reading my .env files and hence not able to access oData.

      Br, Kashif

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      Hi Kashif,

      Sorry just saw this today. I'm not sure if you've got it solved.

      I would recommend you to use this instead https://www.npmjs.com/package/ui5-middleware-route-proxy

      Author's profile photo Heise Brian Nicholas
      Heise Brian Nicholas

      Hey, has anyone had trouble getting a CSRF token error on this step? This is what my console looks like.

      Author's profile photo Srinivas S
      Srinivas S

      Facing same issue. Do let me know if you able to resolve