Skip to Content
Author's profile photo DJ Adams

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:

cd168 before and after.jpg

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.

Assigned Tags

      26 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tom Van Doorslaer
      Tom Van Doorslaer

      Reservations for Amsterdam Hands-on workshops open up tomorrow. I know what my first pick will be 🙂

      Author's profile photo Former Member
      Former Member

      Already reserved a seat, see you in Amsterdam!

      Author's profile photo Rudy Clement
      Rudy Clement

      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.

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      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

      Author's profile photo Rudy Clement
      Rudy Clement

      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.

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      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    

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Tomasz Mackowski
      Tomasz Mackowski

      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

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      Hi Tomasz

      I think the intention is to make it available after the SAP TechEd Bangalore is finished.

      dj     

      Author's profile photo DevendraKumar Saxena
      DevendraKumar Saxena

      Hello DJ,

      Hope you can make the code snippet available now 🙂 .

      With Regards,

      Devendra

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author
      Author's profile photo Tomasz Mackowski
      Tomasz Mackowski

      Thanks.

      Author's profile photo DevendraKumar Saxena
      DevendraKumar Saxena

      Thanks Adams, Wishing you a Very Happy Holdays 🙂

      Author's profile photo Chandresh Panchal
      Chandresh Panchal

      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.

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thanks DJ. This is great.!!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thanks DJ. On my way to a new app!! 🙂

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Hernan Enriquez
      Hernan Enriquez

      Can we still keep using SAPUI5 framework to develop FIORI like apps? is SAP still collaborating to this framework and updating it regularly?

      Author's profile photo Joao Sousa
      Joao Sousa

      Yes. Last version was launched on 29/04. The UI for SAP going forward is based on SAPUi5.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Michael Appleby
      Michael Appleby

      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