Yesterday I’ve blogged about the content I’m creating for new developers that have arrived at our Techedge office in Lucca.

Teaching is something I started to love, is the natural consequence of the fact that I love to learn and love to share my knowledge. And I think that it’s important that new students or young developers have some curated content to start with, maybe with also some tip&tricks that senior has learned during their journey.

The idea behind this exercise is to cover every topic a SAPUI5 developer should know and understand.

The exercise will be available on my GitHub project openui5-exercise.

The exercise

The exercise will be divided in step from easy to hard to build a complete CRUD SAPUI5 Master-Detail application.

The project will consume/create data of an SAP OData service from Netweaver Gateway Demo ES5.
The IDE used in this topic is the SAP WebIDE that allow us to leverage the power of SAP SCP (Cloud Platform) to develop, configure, build and deploy on SAP Cloud Environment in a matter of seconds.

You can find each step of the exercise (with a description and a video of the final result) in a separate branch of this GitHub repository.

Topic covered

• XML views and fragments
• Routing
• Filter and Sort
• OData model (configuring an SCP Destination)
• JSONModel
• Understanding manifest.json
• Table and List
• Master-Detail layout
• SAP WebIDE
• SAP Fiori Launch
• Tip & Tricks

Where to start

As I said this exercise will be based on an OData service provided through the SAP Netweaver Gateway Demo. You have to create a user on the demo system in order to access to those pieces of information.

Configure SCP Cockpit Destination used

Login into your SAP SCP account. Go inside Connectivity > Destinations and create a New Destination with the information provided in the blog post of the Gateway Demo System.
I’ve already prepared the configuration for (lazy one!) so you can just click on the Import Destination button. Just remember to configure your User/Password and test it before hitting Save.

Description=SAP Gateway Demo System  
Type=HTTP  
TrustAll=true  
Authentication=BasicAuthentication  
WebIDEUsage=odata_abap, bsp_execute_abap, odata_gen  
Name=ES5  
WebIDEEnabled=true  
ProxyType=Internet  
URL=https\://sapes5.sapdevcenter.com  
sap-client=002  
User=YOU_ES5_USER_HERE  
WebIDESystem=ES5

Tip: I would suggest you to call the destination on your SAP SCP cockpit the same way I’ve used. In this way when you clone the Exercise Step from the repo’s branch there will be no naming conflict

Create a WebIDE Project from Template

Ok, it’s time to develop. Now I will show you how you can create a WebIDE project. We’re in an advanced exercise so I hope you already know how to do it but maybe it could be useful also for newcomers ;)

Configure the OData service with the ES5 Destination

Now we need to create a Destination from our SAP SCP account to our OData Service.

Step 1

We’re ready to follow the instructions inside the Step 1 of our exercise.