Skip to Content

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

To report this post you need to login first.

48 Comments

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

  1. Huang Jun

    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. ”

    (0) 
  2. 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

    (0) 
    1. Benjamin Kwong 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.

      (0) 
    1. Benjamin Kwong 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.

      (0) 
  3. Gareth Ryan

    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.

    (0) 
    1. Benjamin Kwong 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

      (0) 
  4. Pedro Rodriguez

    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.

    (0) 
  5. 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!

    (0) 
  6. 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. ๐Ÿ™‚

    (0) 
  7. 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”.

    (0) 
  8. 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?

    (0) 
    1. Benjamin Kwong 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

      (0) 
      1. VREDDY S

        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

        (0) 
        1. 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

          (0) 
  9. 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!

    ๐Ÿ™‚

    (0) 
  10. Benjamin Kwong 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

    (0) 
  11. 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 !!

    (0) 
  12. DEEPTYRANJAN PRADHAN

    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

    (0) 
    1. 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

      (0) 

Leave a Reply