Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Former Member

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. :smile:

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 Library - Great website to reference technical setup and see what Fiori apps are available to your customer.
  • Fiori Demo - Great website to quickly understand demonstrate sample Fiori applications.
  • W3schools - When 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 Toolkit - The 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.



Labels in this area