Skip to Content
Author's profile photo Former Member

A beginnerโ€™s guide to skilling up for SAP Fiori and UI5

New to UI5 and Fiori?  You’ve come to the right place!


This year has been a tough one for me having to “get with the times” to evolve my technical skillset beyond the ABAP world.  Luckily there’s plenty of freely available information and courses to help you make the jump.  Don’t wait for someone to send you on training – make time to skill yourself up!

Learning web technology skills

HTML, CSS, Javascript and JQuery form the basis of UI5 and it’s a good idea to know the basics so you understand the underlying behaviour of custom UI5 and SAP Fiori applications.  Codecademy and codeschool has a great series of courses to quickly understand the syntax and behaviour of these technologies if you’re not familiar.  I would suggest completing the following tracks:


Once you’ve understood the mechanics of these languages, I would recommend building a personal website to showcase your skills to potential employers.  Maybe a website resume about yourself?

Know how to use browser debuggers

If you’ve spent a lot of time using SAP’s great ABAP debugger, you’ll want to familiarise yourself with the wonderful web debuggers available.  I have a slight preference to Google Chrome dev tools however it doesn’t hurt to explore one of the following if your workplace has multiple browsers:


I can’t live without my browser debugger!



Understand how RESTful APIs work

If you’re not familiar with the basics of RESTful API’s, this page has a good overview and tutorial.

Get hands on with OData

  1. OData is a type of RESTful protocol and the main page has some great information worth reading too.
  2. I would recommend getting hands on with OData by downloading the Postman extension and installing in Google Chrome
  3. Once you have Postman you can do the basic OData tutorial.
  4. Once you’re done with this I would then look to SCN for some guides on how to build these in your SAP Netweaver Gateway system.



Learn about git, github, gists and jsbin

  • Git is a great open source code repository that all SAP developers should put on their “to learn” lists.
  • Codeschool has some great free interactive courses you can get hands on with.
    1. Try Git
    2. Git Real
    3. Git Real 2


If you get really good at UI5, feel free to contribute back to the community and share your examples on Github or jsbin.  DJ Adams has a great article about github and gists – Help Us To Help You – Share Your Code.  There’s also discussion in the commentsabout how it compares with jsbin.  Either way – sharing is caring. ๐Ÿ™‚


A hands on course you can learn about github is Mastering Github by codeschool.



Learn about SAP Fiori and UI5

The following SAP courses are great and will bring you up to speed quickly on various topics around Fiori, UI5, WebIDE, infrastructure, application design and business engagement:




Read “Get Started” in the UI5 Developer Toolkit

Throughout my UI5 journey, there’s been a number of times where the UI5 Developer Toolkit has answered my questions before doing a google search.  If you’re new I would go through the “Get Started” section and build an app from scratch.  You’ll find you will start referring to different sections as you go along and whilst it’s alien first time around, it will all eventually make sense if you persist.



Learn about wireframe mockups with Axure

References I can’t live without

Once you’re building your confidence with UI5, I would bookmark the following pages and keep them handy for reference!


  • Fiori Design Guidelines – My bible for best practise on how to design UI5 applications.  I’m not a trained designer and the experts who built this page have years of research behind these guidelines.  Great resources for building great UI5 applications.
  • Experience SAPSAP’s user experience community website, a great place to educate yourself about good design.
  • Fiori Application LibraryGreat website to reference technical setup and see what Fiori apps are available to your customer.
  • Fiori DemoGreat website to quickly understand demonstrate sample Fiori applications.
  • W3schoolsWhen you get proficient at HTML, CSS, Javascript and jQuery – sometimes you need a reference to see what’s available or how to implement something.
  • UI5 Developer ToolkitThe bible for UI5 development.  Gets better every time I visit it!


Have fun learning and if you have some great resources to share please feel free to add to the comments below.

Regards,

Ben

Assigned tags

      51 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Santhosh Gowda
      Santhosh Gowda

      Well Said!! Good Blog ๐Ÿ™‚ . The way to learn UI5 from Beginning!!.

      Regards,

      Santhosh Gowda

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Everybody has to start somewhere!

      Author's profile photo Christopher Solomon
      Christopher Solomon

      Excellent compilation of links! I do love CodeAcademy (and a few others). Some people play apps to kill time...I do fun programming exercises. haha

      Author's profile photo Jeremy Good
      Jeremy Good

      Hi Ben - thank you for sharing your lessons learned on this topic!

      Author's profile photo Raj Govender
      Raj Govender

      Excellent blog Ben!. Thanks for putting this together.

      Author's profile photo Kedar Tingikar
      Kedar Tingikar

      Hi Ben,

      Awesome compilation for beginners....definitely a right way to start learning.

      Author's profile photo Former Member
      Former Member

      Hey Ben,

      This is really so cool, under your guide, I think the beginer can master the basics quickly.

      And here I want to quote this and say to you "I can walk long way as I stand on the shoulder of gaint, I can see much more as I stand on the shoulder of gaint. "

      Author's profile photo Manjunatha Kanakuppi
      Manjunatha Kanakuppi

      Well said!!

      Author's profile photo Andreas Kunz
      Andreas Kunz

      Very nice collection of resources!

      I particularly like your focus on "basics first, UI5 later" - due to the technology switch to JavaScript, too many developers from the SAP ecosystem try creating UI5 apps without understanding JavaScript properly and without being able to use the browser tools for debugging.

      For the UI5 "Getting Started" I'd suggest to also consider including the new "Walkthrough" documentation, which has been developed over the last weeks and months and will be part of 1.30. The feedback so far was that it is a very valuable guide from the most basic concepts of UI5 to developing an app that uses a fairly large number of UI5 concepts and is very well-built.

      Right now it can already be seen in the 1.30 preview:

      https://openui5beta.hana.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Andreas.  I've found that focusing on my Javascript foundation has helped me solve some tricky situations - particularly in extending Fiori applications.  I've found that the SAP delivered Fiori apps use some (what I would consider) advanced usage of Javascript concepts like anonymous functions and asynchronous calls which take a little time and experience to understand.  The same goes for things like handling Javascript arrays with the built in functions supplied - I had a little bit of fun with map and reduce to rearrange some JSON structures.

      Love that walkthrough.  I'll update this post with it as well.  It looks fantastic!  I love how SAP are adding all this information online as it will only increase adoption over time and bring in a new developers to the technology.

      Author's profile photo Christopher Solomon
      Christopher Solomon

      I wrote a similar, link filled blog with my early "learning" days with OpenUI5. It is interesting to read/see/hear everyone's journey there.

      My path to learning OpenUI5.....deeper down the rabbit hole and back again!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Great blog post Chris!  I'll be definitely going through your content over the coming weeks and share my experiences - there's a lot of additional content worth reading about.

      Author's profile photo Abhijeet Kulkarni
      Abhijeet Kulkarni

      Excellent compilation. Will help every learner hugely to get started. Structured approach, facilitated like this, is the beast way to learn. Great work Benjamin Kwong!

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Great Blog and nice info Benjamin Kwong

      Author's profile photo Muktesh Mohan
      Muktesh Mohan

      You have put together almost everything I was looking for. Thanks you so much for this blog. going to bookmark it.

      Author's profile photo Paulo Dinis
      Paulo Dinis

      Great and valuable blog post! Thanks for your sharing.

      Author's profile photo Agnihotro Sinha
      Agnihotro Sinha

      Nice blog Benjamin.  It's like a startup kit for Fiori.  Good job!

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      very good blog Benjamin.. I may also add to check out open.sap.com for additional resources and free learning on hana, xs, cloud, sapui5, etc

      Author's profile photo CD Raju
      CD Raju

      Good one, Lot of information in one blog.. thanks for your hard efforts to collect all of them and put in place.

      Author's profile photo Former Member
      Former Member

      Hi Ben,

      Like everyone I'd like to say thanks and well done for creating this post.  It's very, very easy to simply dump a load of links to documents, training and reference material but you have gone a step further and woven this into a proper story and approach for going from no knowlege, to a full working knowledge of Fiori.  Better still, it is based on your own experience, which is always better than any old textbook stuff!

      Cheers,

      G.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Cheers thanks for the feedback Gareth. 

      Given the nature of UI5 and Fiori starting to gain real traction in the SAP world, I've been heavily reliant on the SCN material available to get by.  I've always been lucky to reach out to someone more experienced than me at SAP technologies when I get stuck but this time was different - I had no one I knew to talk in my network if I got really stuck.  Therefore I thought it was a good idea to share my learning program so the UI5 space will grow even further and increase adoption.  I had a few instances of "programmer's block" when I started out and it's not a pleasant place to be (good character building though) when you're grappling with the technology in the early days.

      Regards,

      Ben

      Author's profile photo Sana Salam
      Sana Salam

      Really great job on this article.

      Author's profile photo Former Member
      Former Member

      Great. Nowadays we all have to update us to the web skills if we want to survive on the new cloud world. I have only one point to make. With all the skill set needed to learn and all the manual steps to do in order to provide a proper user Interface it remains to less time to concentrate in what matters. The business code.

      As an example I recomend you all how it would be solved on the future Microsoft Dynamics Ax 7 where I suppose the normal interfaces could be done only with drag and drop and some code at Visual Studio. SAP need more work on this side.

      Author's profile photo Jelena Perfiljeva
      Jelena Perfiljeva

      Very nice collection and, as others have mentioned, appreciate making a story out of it instead of a simple "link farm". Could not agree more on the importance of base knowledge, especially for ABAPers who are not frequently exposed to web development in their daily jobs. I'd add ABAP tag as well, so that it shows up in the ABAP space.

      Thanks for sharing!

      Author's profile photo Benedict Venmani Felix
      Benedict Venmani Felix

      Where's the sixth star when you need one ๐Ÿ˜†

      Thank you very much Benjamin for this wonderful guide. I was searching for this kind of guidance for sometime now. Not for Fiori but in general for HTML, CSS and JS since a JS is also needed for XS development in HANA.

      I just got started here,

      http://www.microsoftvirtualacademy.com/training-courses/html5-css3-fundamentals-development-for-absolute-beginners

      Once I complete this, I will follow this guide. ๐Ÿ™‚

      Author's profile photo Rama Sudhakar
      Rama Sudhakar

      Hi Ben,

      Nice post, being an SAP ABAPer it is good but in long run we should upgrade our skill set.

      thanks and Regards

      Sudhakar.

      as Charles Darwin mentioned - "It is not the strongest of the species that survives, not the most intelligent that survive. it is the one that is most adaptable to change".

      Author's profile photo Vinodkumar Kommineni
      Vinodkumar Kommineni

      Hi Ben,

      Its just on time for me as I started expanding my skill set as well. Thanks a lot for the time taken to write such a wonderful blog.

      Regards

      Vinod

      Author's profile photo Sudheer Jallipalli
      Sudheer Jallipalli

      thanks a lot!...

      Author's profile photo Syam Babu
      Syam Babu

      Hi Ben,

      Great Job!!

      Thanks,

      Syam

      Author's profile photo ' Pavan ' Golesar
      ' Pavan ' Golesar

      Hi,

      It's  Exactly what I was looking for, All in one place.

      very informative ℹ

      Thanks, ๐Ÿ˜ณ

      Best Regards,

      Pavan Golesar.

      Author's profile photo Sampath Adavelly
      Sampath Adavelly

      This is my go to blog for any FIORI enthusiasts.

      Great blog and thank you for taking time to put together.

      Author's profile photo Former Member
      Former Member

      Excellent blog! It would help any web developer or an ABAP developer to get started, without having to hit 'Google' ๐Ÿ˜€

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Benjamin Kwong,

      Can SAP Enterprise Portal guy with Java knowledge learn SAPUI 5  or else SAP ABAP knowledge is mandatory,if so then SAP ABAP basics is sufficient  or not?

      Could you please suggest me?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Venkatesh,

      Doesn't matter what background or experience you have.  If you apply and dedicate yourself you can learn anything.  I always put my hand up for the most cutting edge SAP projects and I've had my fair share of knock backs but I keep trying anyway and sometimes like my most recent Fiori gig - I got lucky because I persisted.

      To be good at something requires, focus, dedication and a level of pride and craftsmanship in one's work.  You can learn anything you want if you have these aspects.  In my personal life I had no time to do courses, so I had to make time by streamlining my focus on important things to help me achieve this goal.  Focus gets progress.  Progress enables you to realise your vision of what you want.  I also emphasise to find an area of SAP you enjoy and demonstrate that you add value - this makes learning SAP so much easier.

      To answer your question though my SAP background is varied and the great thing is I have a very broad perspective.  I did have 3-4 years of ABAP experience implementing mobile ERP apps to around 700 devices prior to this project and also 6 months of client site web development when I was a fresh starter in IT.  But seriously if you came to me showing me that you'd done the openSAP courses and had a personal portfolio of tech projects - you've already made good progress with your learnings.

      Good luck!

      Regards,

      Ben

      Author's profile photo Nigel James
      Nigel James

      Well said Ben

      Author's profile photo Former Member
      Former Member

      Hi Ben,

      Thank you for your reply!!!

      Currently Working in SAP EP consultant .. I am very much interested to learn to UI5/FIORI..  and i am new to this Could you please guide me complete?

      Best Regards,

      V.REDDY

      Author's profile photo Michael Appleby
      Michael Appleby

      Hi V.Reddy,

      That is the document's purpose.  Please read it and apply the lessons contained therein.  Once you have started, post Discussions marked as Questions when you have technical issues, but

      please read the Rules of Engagement in the Getting Started link at the top right of each SCN Page so you can get the most out of your SCN experience.  Remember to search first, then post a question.  To make your search easier, there is also a custom Google search available: https://www.google.com/cse/home?cx=013447253335410278659:k8ob9ipscwg.  Your content will be removed from view.

      Regards, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Mike,

      Thanks a lot to sharing information!!!!

      Regards,

      Reddy

      Author's profile photo Former Member
      Former Member

      Excellent Links its useful for completely UI5 beginners @@@@@@@  Thanks  a lot Benjamin  @!!!!!

      Author's profile photo Sijin Chandran
      Sijin Chandran

      Going to start with UI5 from ABAP using this very helpful document.

      Luckily there’s plenty of freely available information and courses to help you make the jump.  Don’t wait for someone to send you on training – make time to skill yourself up!

      ๐Ÿ™‚

      Author's profile photo Kripa Rangachari
      Kripa Rangachari

      Excellent Blog!! Diversified Technologies Starter-Kit for "SAP Fiori for Dummies!! ๐Ÿ˜› "

      Thanks MUCH Benjamin

      Cheers,

      Kripa Rangachari.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Guys,

      I just want to give you a big thank you for the positive comments and contributions to this blog post - hopefully I will have a part 2 coming up with some learnings I've stumbled across.  I've had a crazy year and have a bit more content to share from my recent Fiori project which I'm putting up soon which I hope you'll find useful.

      See you on the other side!

      Regards,

      Ben

      Author's profile photo Sathya Prabha Girish
      Sathya Prabha Girish

      Strongly Agree on your resources for Git. Code School's courses are pretty good!

      Thanks for putting it together ๐Ÿ™‚ . I have been making a mental list of most of the things here as I started learning Fiori and UI5 only to forget them.

      It is nice to see them consolidated in one place !!

      Author's profile photo Former Member
      Former Member

      hii...

      I don't know about SAP ABAP , But am  well versed in javascript ,html5 ,css ,ajax and jQuery .So can i learn sapui5 ?...

      Actually sap abap is necessary for learning of sapui5/fiori or not ??

      Reply please.....

      regards

      Dipun

      Author's profile photo Sijin Chandran
      Sijin Chandran

      No its not!!

      ABAP is used for creating Gateway Services only.

      In the front end ( i.e. SAP UI5) you just need to consume those Gateway Services which will in the form of URIs.

      Thanks,

      Sijin

      Author's profile photo Rajesh Sinha
      Rajesh Sinha

      Great compilation, it is complete set for beginners... thanks.

      Author's profile photo Sudarshan Survepalli
      Sudarshan Survepalli

      Benjamin - Thanks a ton for holding the torch and showing the path. This will be the first place to start for beginners.

      Regards,

      Sudarshan

      Author's profile photo Former Member
      Former Member

      Really Nice Blolg

      Author's profile photo SIG Consultores
      SIG Consultores

      Thanks for all the info! Great blog... !

      Author's profile photo sarang akhare
      sarang akhare

      Thank you so much for laying down the approach on how to go ahead. Great blog !!

       

      Author's profile photo Taihao Jin
      Taihao Jin

      Well organized blog. thank you so much!