Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
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">
<ObjectListItem type="Navigation" title="{SalesOrderID}" number="{NetAmount}" />

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

In Volker's blog another community member schoutenk 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 schoutenk 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.



Labels in this area