Building SAP Fiori-like UIs with SAPUI5
SAP TechEd 2013 is fast approaching, and the excitement is building. Interested in SAPUI5 (you’re reading this blog post in the SAPUI5 Developer Center space on SCN already!), you’re looking to see what sessions to attend. And you’re looking to build and improve your skills, and perhaps find out more about SAP Fiori.
Have I got the session for you!
CD168 “Building SAP Fiori-like UIs with SAPUI5″ – 2hr Hands-On
What is Fiori? Well, from the http://experience.sap.com/fiori site, this is a good start:
“A collection of apps with a simple and easy to use experience for broadly and frequently used SAP software functions that work seamlessly across devices – desktop, tablet or smartphone.”
What is Fiori built upon? You guessed it, SAPUI5. And specifically, the sap.m library (and a sprinkling of other more general controls). Fiori is part application set, part responsive design, part look and feel, and part state-of-mind. What makes a Fiori app? Well, amongst other things, it’s the use of certain controls and design to achieve the consistent experience you might have already come to expect from Wave 1, which delivered the 25 ESS/MSS apps. Wave 2 is coming soon, and set to deliver many many more apps across a broader functional range.
I have the tremendous privilege of working with the SAPUI5 teams in Walldorf currently and know first hand the massive effort (love, intelligence and dedication) that has gone into building the foundation for Fiori. And for me as a developer, it’s very important to understand what’s going on under the Fiori hood, not only for building new apps but for supporting my customers.
So enter CD168, a two-hour hands-on session at SAP TechEd titled “Building SAP Fiori-like UIs with SAPUI5”. If you want to find out how to build SAPUI5 apps with a Fiori flavour, to get a feel for what controls to use and how to use them, then you should seriously consider attending.
An intensive hands-on set of an introductory walkthrough of the developer toolset and environment, and then a series of ten exercises taking you from this to this:
where along the way you learn about databinding, localisation, resource models, XML-based views, formatter functions, best practices for application design & build and controls such as the responsive SplitApp, ObjectHeader & ObjectListItem, IconTabBar, SearchField and others.
The session is available at SAP TechEd Las Vegas, and also in Amsterdam where along with esteemed SAP colleagues, I am honoured to be co-presenting.
If I had not had the chance to contribute to the session materials and co-present, I would certainly have this session at the top of my must-attend list.
What about you? Get yourself along to the session site and find out more:
CD168 on Wed 06 Nov 17:00-19:00
CD168 on Thu 07 Nov 14:30-16:30
Perhaps see you in Amsterdam?
Update 08/11/2013
I recorded a screencast of the “end result” app that the participants will build:
Update 20/12/2013
I have put the source code to the app that features here and in the CD168 session as a repo up on Github:
SAPUI5-Fiori
I’ve put some notes in the repo’s README (displayed on the repo’s homepage) – please read them for more info. They have links to this blog post, and also to the screencast walkthrough of the app which is here: SAPUI5/Fiori – Exploration of an App
This screencast is part of a 2-part SAP CodeTalk session with me and Ian Thain on SAPUI5 and Fiori, the playlist for which is here: SAP CodeTalk – SAPUI5 and Fiori.
Reservations for Amsterdam Hands-on workshops open up tomorrow. I know what my first pick will be 🙂
Already reserved a seat, see you in Amsterdam!
Hi DJ,
I attended this session yesterday and, indeed, it was intensive and a must-attend. Thanks a lot for co-presenting and all the other effort that came along!!
As said in the keynote, Fiori is SAP's new UX paradigm. You already explained that quite well in this blog by mentioning the words 'application set', 'design', 'look-and-feel', 'state-of-mind'. The session brought some nice insights into the sap_bluecrystal style and some of the controls that can be used.
Still, the paradigm is a bit vague (to me at least). Off course it is impossible to get it 100% crisp and clear but are there any resources available that can bring it a bit closer to these 100% for us as developers? For example some guidelines that suggest which controls to use where and when.
Kind regards,
Rudy.
Hi Rudy
Thanks for your comments, and I'm glad you liked the session. It was down to a lot of prep, and I must forward the praise also to Thomas Marz Frederic Berg Bertram Ganz and Oliver Graeff .
You're right about the guidelines for "Fiori-ness", I am not aware of any that are floating about externally. I was actually thinking this morning about whether crowdsourcing guidelines and priorities might be in order, but also it would be great for SAP to contribute too.
Let's see ...
dj
Hi DJ,
Thanks for your response! One more other question though....
During the session we were using version 1.16 of the SAPUI5 plug-ins. I managed to download them via the UI5 space on SCN. But I'm only able to install them on a Kepler version of Eclipse and they are not compatible with all the other plugins from tools.hana.ondemand.com.
What I would like to achieve is to have the 1.16 plugins installed in HANA Studio (rev68), together with the other plugins that are available on tools.hana.ondemand.com. I guess the other plugins will then need to be of version 1.16 as well. Do you know when these will be available?
And once I have this installation in place, will the HANA XS webserver be able to run the fiori apps or does it need any HANA upgrade?
Thanks!
Kind regards,
Rudy.
Hi Rudy
I'm afraid I'm not going to be able to help you here; I don't use Eclipse at all (except when it's absolutely necessary) and therefore don't have the knowledge (or battle scars) to be able to answer your question.
Perhaps someone else does though?
cheers
dj
Hi Rudy/DJ,
I just found this blog post: Create Your Own Fiori Designed Apps with the New SAPUI5 Design Rapid Deployment Solution. In the RDS package 'SAPUI5 Design rapid-deployment solution' there is a Powerpoint with SAP Fiori Design Principles (not very extensive). But it's a start.
Best regards,
Jeroen
Hi DJ,
Is the project with source code for CD168 available anywhere? I didn't find it on USB stick from TEchEd. On session site there are also only PDFs with presentation.
Thanks,
Tomasz
Hi Tomasz
I think the intention is to make it available after the SAP TechEd Bangalore is finished.
dj
Hello DJ,
Hope you can make the code snippet available now 🙂 .
With Regards,
Devendra
Hi Tomasz Mackowski and DevendraKumar Saxena
I've just updated this blog post with the details of the source code. Enjoy!
http://scn.sap.com/community/developer-center/front-end/blog/2013/10/06/building-sap-fiori-like-uis-with-sapui5#update20131220
Thanks.
Thanks Adams, Wishing you a Very Happy Holdays 🙂
Hi DJ,
Could you please help me finding source code? I am not able find it.
you are saying that the source code is - I have put the source code to the app that features here and in the CD168 session as a repo up on Github:
Appreciate any help on this.
Thanks.
Hi
The source code is in the "SAPUI5-Fiori" link that I put in the update above. Here is that link again:
Update 20/12/2013
I have put the source code to the app that features here and in the CD168 session as a repo up on Github:
SAPUI5-Fiori
dj
Thanks DJ. This is great.!!
Hello DJ,
Looking into the sample code you provided and also several exapmles on SCN, I see that views created are of type "XML view". Is it a standard form to create XML views or could we also use View.js types for building Fiori like applications?
Thanks
Sangamesh
You can use XML, JavaScript or other views for your apps. It's partly a matter of personal preference, but also if you want to develop closest to the way the Fiori apps are being developed and delivered, then go for XML.
Many thanks for the response DJ.
Do we have any docs to learn creating XML views because on the looks it seems to be much easier than Js views and I would prefer to learn it. If so, please be kind to share few resource links for reference.
Regards
Sangamesh
have a look at
Mobile Dev Course W3U3 Rewrite - Intro
which contains a couple of 'chapters' on XML views
and also XML views are used in this:
Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises
Thanks DJ. On my way to a new app!! 🙂
Hello DJ,
I am stuck with a problem and couldnt resolve it. Could you please help me out with this one.
Fiori getContext Detail page SAPUI5
Thanks
Sangamesh
Can we still keep using SAPUI5 framework to develop FIORI like apps? is SAP still collaborating to this framework and updating it regularly?
Yes. Last version was launched on 29/04. The UI for SAP going forward is based on SAPUi5.
DJ,
Have read your blog on XML views intro. Was great. However could you let us all know how to deal with a custom Conversion.js(used for FORAMTTER for visible property) in an extension app?
Fiori extension: Need to have a custom javascript function
Regards,
Kevin Dass
Hi Kevin,
Please create a new Discussion with your question. It will be easier for you to receive updates as well as allow you to reward those who help you find the answers you need.
Regards, Mike (Moderator)
SAP Technology RIG