Summary: Learning SAP UI5 for a beginner seems like a mammoth task, although there are numerous learning resources scattered on SCN and other sites. Its overwhelming to make sense out of the huge spaghetti of scattered links. With this document I have striven hard to arrange the knowledge in a logical order so that it makes sense.

Prerequisites: A strong desire to learn SAP UI5.

Outcome: You will be on your way to becoming a SAPUI5 expert.

Target audience: This document is good for beginners and experts alike.

Creation Date: 10 Nov 2015

Last Update: 6 Oct 2016

Note: This is a living document, I am continuously enhancing it iteratively. Do let me know if you would like to see any information here via your comments.


SAPUI5_Architecture.png.adapt.450_-1.false.false.true.false.png

Installing Java and Eclipse

http://www.java.sun.com
http://www.eclipse.org/downloads/
Java is an Oracle product now after acquisition of Sun Microsystems but the old link still works. You need an IDE to code, Eclipse in our case, which in turn needs JDK to run. Please be careful about installing the right version of Java that works with the Eclipse you wish to install. Its not wrong to have multiple versions of JDK but many times it causes issues. You will have to troubleshoot a bit to ensure that the system uses the appropriate version of Java. If you need more clarity on the installation process the following link should be helpful.

How to install a basic development environment for SAPUI5

NOTE: I would strongly recommend to use SAP WebIDE rather than Eclipse. All new innovations in the SAPUI5 development are being offered only in WebIDE and not in Eclipse.

Installing SAPUI5 plugins

https://tools.hana.ondemand.com/

To install some or all of the tools, get an installation compatible with the desired tools and use the respective software site URL in the Help > Install New Software wizard. Based on the version of your eclipse:

SAPUI5 Demokit

https://sapui5.hana.ondemand.com/

This link gives you further acess to  :

Topics Links
Developer Guide https://sapui5.hana.ondemand.com/#docs/guide/95d113be50ae40d5b0b562b84d715227.html
Controls https://sapui5.hana.ondemand.com/#content/Controls/index.html
Explored https://sapui5.hana.ondemand.com/explored.html
API Reference https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html
Demo Apps https://sapui5.hana.ondemand.com/#demoapps.html
Icons https://sapui5.hana.ondemand.com/iconExplorer.html

OPENUI5 Demokit

https://openui5beta.hana.ondemand.com/

SAPUI5 Tutorials

https://openui5beta.hana.ondemand.com/#docs/guide/8b49fc198bf04b2d9800fc37fecbb218.html

This link gives you further access to the following Tutorials:

  • Hello World

  • Walkthrough

  • Data Binding

  • Navigation and Routing

  • Testing

Data Binding in SAPUI5 (by Chris Whealy)

Data Binding in SAPUI5

JavaScript for ABAP developers (by Chris Whealy)

JavaScript for ABAP Developers (Updated)

SAPUI5 SplittApp Example (This example was good but I had to troubleshoot a bit to get it working as some concepts were not very clearly specified)

http://www.saplearners.com/sap-m-splitapp-demo-application-in-sapui5/

SAPUI5 sap.m.Table Example

http://www.saplearners.com/table-sap-m-table-in-sapui5/

UI5 Programming Examples

http://scn.sap.com/community/developer-center/front-end/blog/2015/06/13/ui5-programming-examples

Model View Controller (MVC)

http://help.sap.com/saphelp_hanaplatform/helpdata/en/91/f233476f4d1014b6dd926db0e91070/content.htm

Simple Exercise on OData and SAP UI5 Application for the basic CRUD Operation

http://scn.sap.com/docs/DOC-61821

Chrome Development Tool tips used in my daily work

http://scn.sap.com/community/developer-center/front-end/blog/2016/03/15/chrome-development-tool-tips-used-in-my-daily-work

Getting access to SAP WebIDE Trial

SAP Web IDE – Local Trial Version

The above link talks about both SAP WebIDE web based trial as well as local installation.

Installing local version of SAP WebIDE for non-productive purposes

SAP Web IDE Dev Guide (Local Installation)

How To Install SAP Web IDE Locally for Trial in Windows

SAPUI5 Code Inspector Chrome Extension

https://chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo

SAPUI related content on Youtube

Content Links
OPENUI5 Channel https://www.youtube.com/user/openui5videos
SAP WebIDE playlist https://www.youtube.com/playlist?list=PLkzo92owKnVwnV5o1psI7XSA-AquO9_9g

SAPUI5 Youtube Playlist

(by Abhishek Saha)

https://www.youtube.com/playlist?list=PL-xVzXm_I8mDXLVTZtNyz1EboIxqwcQ2I

Relevant SAP Trainings (not free)

Ofcource these trainings are not free but having a look at the offcial training content helps to plan your learning.

Curricullum MAP : https://training.sap.com/de/en/curriculum/sapui5-sap-sapui5-g-en

At the above link you can drill down to individual trainings :

Training Description
THINK1 Design Thinking for Business Innovation – Live Experience
SAPX04 HTML5 Foundations for SAP SAPUI5 Development
SAPX05 SAPUI5 User Experience Development
SAPX08 SAP SAPUI5 Advanced Development
SAPX12 SAP Fiori Apps Custom Development Using Web IDE
SAPX2E SAP Fiori Apps Custom Development Using Web IDE

Books (not free)

Book Title Link
SAPUI5: The Comprehensive Guide to UI5 https://www.sap-press.com/sapui5_3980/
SAP Gateway and OData https://www.sap-press.com/sap-gateway-and-odata_3904/

SAP UI5 development in SAP Netweaver Developer Studio (NWDS)

Developing SAP UI5 applications in SAP NetWeaver Developer Studio  – Part 1/2

http://scn.sap.com/community/bpm/blog/2013/01/13/developing-sap-ui5-applications-in-netweaver-developer-studio-nwds

Simple Exercise on OData and SAP UI5 Application for the basic CRUD Operation

http://scn.sap.com/docs/DOC-61821

How To Deploy an SAPUI5 App On Fiori Launchpad

http://scn.sap.com/docs/DOC-56166

Build and Splash

Here is the link to the video series: https://www.youtube.com/channel/UCju0kVKOfkw5-hogBYPfgqg
For more information about BUILD, you can visit: https://experience.sap.com/news/want-build-better-user-experience/

OpenSap MOOCs

MOOC Name URL
OpenSAP : Build your own SAP Fiori App in the Cloud – 2016 Edition https://open.sap.com/courses/fiux2
OpenSAP : Developing Web Apps with SAPUI5 https://open.sap.com/courses/ui51

SAP FIORI

Experience and explore SAP Fiori Design

https://experience.sap.com/fiori-design/

All Things SAP Fiori

http://scn.sap.com/docs/DOC-41598

SAP Fiori Learning

http://scn.sap.com/docs/DOC-53241
Create your first SAP Fiori Overview Page

http://scn.sap.com/docs/DOC-69112

SAP Fiori Apps Library

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/

Fiori on help.sap.com

http://help.sap.com/fiori

SAP Smart Business Cockpits

http://help.sap.com/ssb

Some Best Practices derived from the SAP Fiori Templates in SAP Web IDE

http://scn.sap.com/community/developer-center/front-end/blog/2016/02/10/some-best-practices-derived-from-the-sap-fiori-templates-in-sap-web-ide?lf1=3001497457f178123779247c55828616

SAP UI5 and SAP Business Process Management (BPM)

Custom UIs with the BPM OData Service

http://scn.sap.com/community/bpm/blog/2013/10/10/custom-uis-with-the-bpm-odata-service

BPM OData: Exploring the Service

http://scn.sap.com/community/bpm/blog/2013/10/18/bpm-odata-exploring-the-service

BPM OData Service help.sap

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/e4/940ffb159745ffb8672d903bb8912b/content.htm

Roles for BPM

https://help.sap.com/saphelp_nw73ehp1/helpdata/en/9c/23eaeb4c53486f8d9c4cb376b99994/frameset.htm

Roles for BPM Inbox

https://help.sap.com/saphelp_nw73ehp1/helpdata/en/4a/8fcaf15c014c2e857786bb878b859b/content.htm

Not enough permissions to search principals from UME?

Check out SAP Note #  1647157

HTTP 404 error while opening Task Execution UI in BPM Inbox

Check out SAP Note # 1880788

Miscellaneous

Sample Gateway Services

http://scn.sap.com/docs/DOC-31221

Registration for ES4 demo system

http://scn.sap.com/docs/DOC-40986

New Hand’s-On Tutorial Videos for SAP Web IDE

http://scn.sap.com/community/developer-center/front-end/blog/2015/10/01/new-hands-on-tutorial-videos-for-sap-web-ide

A beginner’s guide to skilling up for SAP Fiori and UI5

http://scn.sap.com/community/developer-center/front-end/blog/2015/08/22/a-beginner-s-guide-to-skilling-up-for-sap-fiori-and-ui5

Setup your SAP Web IDE on HANA Cloud Platform (Part 1 of 5)

http://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1

Develop your SAPUI5 applications in Ubuntu (Linux)

http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/make-your-sapui5-applications-in-ubuntu

How to get rid of: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” in Chrome browser.

How to get rid of: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” in Chrome browser.

OData.org

http://www.odata.org/

URL Helper

http://help.sap.com/saphelp_hanaplatform/helpdata/en/4f/1c1075d88c41a5904389fa12b28f6b/content.htm



To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Sergio Guerrero

    great advise for beginners and also those of us who are in the middle of it…

    all great sources… also add the SAP Press book –  SAPUI5, The Comprehensive Guide

    (0) 

Leave a Reply