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

• End-To-End setup of local development environment with UI5 Tooling

• End-To-End setup of local development environment with UI5 Tooling – Part 2

• End-To-End setup of local development environment with UI5 Tooling – Part 4 Component reuse

• End-To-End setup of local development environment with UI5 Tooling – Part 5 Deployment

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.