Skip to Content
Product Information
Author's profile photo Emanuele Ricci

SAPUI5 for dummies: A complete step-by-step exercise

The previous week 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 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.

 #Sat Sep 29 09:12:42 UTC 2018
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

The blog post about the Step 1 will come the next week, if you’re so impatient you can take a look at the GitHub branches 😉

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Nice one!   I can't seem to get the Zip installed via ZABAPGIT - import ZIP.  So I'll have to wait for the next blog.  I'm looking forward to it!

      Michelle

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi Michelle Crapo could you explain me your issue? Anyway, the Step 1 is already available on GitHub you just need to switch the branch. The blog post about it will be posted on next Monday 😉

      Author's profile photo Michelle Crapo
      Michelle Crapo

      The issue may be I need a dummy's book to github.  I downloaded the zip.  Then I tried to upload it into SAP.   Mmmm... It really didn't need to go into SAP.

      I'm looking forward to the next post.

      Michelle

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi, Michelle Crapo all these exercises (as I mention it in the post) are based on SAP WebIDE.

      We're still on the Step 0 so you could just (as I explained on the video) a project from the scratch and configure it with the destination (another video I uploaded).

      So:

      • create the project from the scratch (following this guide)
      • download from GitHub the project with "Clone or Download > ZIP File" and upload it to the WebIDE (Import -> File or Project). You need to pay attention to two things:
        • webapp folder must be inside the root
        • you have configured properly the Destination on your SCP account
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Thank you!  And yes, I knew that....  I just wasn't thinking.   Thank you for the details!

      Michelle

      Author's profile photo Heiko Olderdissen
      Heiko Olderdissen

      Dear Emanuele

      this seems to be a really well structured tutorial, I will follow and I have also recommended it also to my colleagues

      Cheers

      Heiko

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi, Heiko Olderdissen you should also take a look at the introduction post of this one: What do you need to start learning SAPUI5?

      Author's profile photo Michelle Crapo
      Michelle Crapo

      OK - since you've done both...  I've just read that I shouldn't use both WebIDE and UI5.   Which do you prefer?

      "Also, we recommend that you deploy from SAP Web IDE only. Under no circumstances mix deployments from SAP Web IDE and Eclipse. Why? Each deployment from SAP Web IDE causes conflicts, as every file is touched (conflict detection uses touch timestamps and does not compare the actual content). Also, SAP Web IDE would deploy optimized content which the SAPUI5 tools for Eclipse would overwrite with non-optimized content."

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      In my opinion, we can think about Eclipse (with SAPUI5 plugins) as the "old" and deprecated IDE suggested by SAP for the SAPUI5 development.

      Nowadays SAP suggests you to use SAP WebIDE Full Stack to develop SAPUI5 applications.

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Perfect!   Thank You!  It's good to know where to start.

      Michelle