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:
- HTML & CSS (7 Hours)
- Javascript (10 Hours)
- jQuery (3 Hours)
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:
- Google Chrome Dev Tools (press F12 in Chrome)
- Firebug for Firefox
- Safari Developer Tools
- Internet Explorer F12 Developer Tools
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
- OData is a type of RESTful protocol and the main page has some great information worth reading too.
- I would recommend getting hands on with OData by downloading the Postman extension and installing in Google Chrome
- Once you have Postman you can do the basic OData tutorial.
- 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.
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:
- Introduction to SAP Fiori UX
- Introduction to Mobile Solution Development
- Build Your Own SAP Fiori App in the Cloud
- Creating Business Value with User Experience
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
- Take note Axure is not free. However if you have some time to put aside to learn this tool, download the trial version and complete the free tutorial provided.
- SAP have Fiori specifc design stencils for Axure as well – check it out!
- If you want something a bit simpler you can use long term, I also recommend the SAP Fiori Prototyping kit (Components).
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 SAP – SAP’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.
Regards,
Ben
Well Said!! Good Blog 🙂 . The way to learn UI5 from Beginning!!.
Regards,
Santhosh Gowda
Everybody has to start somewhere!
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
Hi Ben - thank you for sharing your lessons learned on this topic!
Excellent blog Ben!. Thanks for putting this together.
Hi Ben,
Awesome compilation for beginners....definitely a right way to start learning.
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. "
Well said!!
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
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.
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!
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.
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!
Great Blog and nice info Benjamin Kwong
You have put together almost everything I was looking for. Thanks you so much for this blog. going to bookmark it.
Great and valuable blog post! Thanks for your sharing.
Nice blog Benjamin. It's like a startup kit for Fiori. Good job!
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
Good one, Lot of information in one blog.. thanks for your hard efforts to collect all of them and put in place.
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.
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
Really great job on this article.
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.
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!
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. 🙂
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".
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
thanks a lot!...
Hi Ben,
Great Job!!
Thanks,
Syam
Hi,
It's Exactly what I was looking for, All in one place.
very informative ℹ
Thanks, 😳
Best Regards,
Pavan Golesar.
This is my go to blog for any FIORI enthusiasts.
Great blog and thank you for taking time to put together.
Excellent blog! It would help any web developer or an ABAP developer to get started, without having to hit 'Google' 😀
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?
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
Well said Ben
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
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
Hi Mike,
Thanks a lot to sharing information!!!!
Regards,
Reddy
Excellent Links its useful for completely UI5 beginners @@@@@@@ Thanks a lot Benjamin @!!!!!
Going to start with UI5 from ABAP using this very helpful document.
🙂
Excellent Blog!! Diversified Technologies Starter-Kit for "SAP Fiori for Dummies!! 😛 "
Thanks MUCH Benjamin
Cheers,
Kripa Rangachari.
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
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 !!
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
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
Great compilation, it is complete set for beginners... thanks.
Benjamin - Thanks a ton for holding the torch and showing the path. This will be the first place to start for beginners.
Regards,
Sudarshan
Really Nice Blolg
Thanks for all the info! Great blog... !
Thank you so much for laying down the approach on how to go ahead. Great blog !!
Well organized blog. thank you so much!