This Week in Fiori (2014-39)

Hello there folks. That time has come around again to pull together a few links on some of the Fiori related stories and articles this week. Let’s get right to it.

Transactional Fiori App Certification by Chiranjivi R D
I touched on certification of Fiori apps in an earlier TWIF episode 2014-31 where I pointed to a Partner Co-Innovation Workshop that mentioned certification of Fiori apps developed therein. Certification, at least to me, is not automatically a good thing. I’m strongly ambivalent (if that’s possible) on certification generally, of consultants specifically, and of apps particularly.

This week, this article on Fiori app certification was brought to my attention by friend and fellow SAP Mentor Tobias Trapp. It’s all about the certification of transactional Fiori apps built by partners. With Fiori, there’s great emphasis on the UX principles, and rightly so. There are also of course also the Gateway and Business Suite add-ons too, but for me the primary goal for certification in this area must be how the Fiori app works from a user experience point of view. My general certification ambivalence is then given a run for its money here; I for one do think that without some kind of standards enforcement, the Fiori approach may be diluted. I’ve seen apps that are purportedly “Fiori” but just don’t feel right.

Only time will tell. What is your experience of custom Fiori apps? Have you seen Fiori apps that, well, aren’t?

User Experience Sessions at TechEd: SAP Screen Personas, Fiori, UX Strategy, Design Services by Peter Spielvogel
SAP TechEd && d-code, arguably the most important event in SAP’s annual calendar, is fast approaching. Already, the Las Vegas edition … which I like to call the “warm up before the main European event” :-) … is less than a month away. I noted the Fiori related sessions in a previous TWIF episode 2014-35 and just this week Peter Spielvogel from SAP writes this post detailing some of them. Ironically, he does this in the SAPGUI area on the SAP Community Network (SCN).

I pointed out in TWIF 2014-35 that there didn’t appear to be enough Fiori related sessions (although some folks on Twitter are complaining that all they hear about in relation to TechEd is Fiori and HANA, c’est la vie) but I’m hopeful that there will be at least some coverage in the “hallway track” and in the Code Jams and hands-on activities that run throughout the week.

In particular, I’d encourage you to look out for the SAP Web IDE stuff. This is the new name for SAP River RDE, which has also some history in the Web Application ToolkiT (WATT) and prior to that the SAP App Designer. What ancestry already! While some of us like to build Fiori apps from the ground up (coding view elements directly in XML, with our UI5 stickers adorning our laptops) there are a great number of people who need guidance. Guidance in both forms – technical, and design (see the certification piece earlier). And for these folks, and those looking for the right tools to extend existing SAP Fiori apps, the SAP Web IDE is something not to miss.

Introduction to SAP Fiori UX – an update
I wrote about this course back at the beginning of August. Today, along with many thousands of co-participants, I’m well underway with the course materials, into Week 3. For those of you not taking part, here are the the topics covered:

Week 1: SAP Fiori UX Basics
Week 2: SAP Fiori UX Deployment
Week 3: SAP Fiori UX Configuration
Week 4: Securing SAP Fiori UX
Week 5: SAP UI Tools
Week 6: Extending SAP Fiori UX
Week 7: Final Exam

Despite these topic titles, I must admit to having expected a little more on the “UX” part of the title. So far, I don’t remember seeing any real Fiori screen, much less an analysis of how and why it might have been designed that way, and certainly nothing about what lies underneath (the controls in the UI5 toolkit). But it’s still relatively early days, and I haven’t given up hope.

One thing I’m also not giving up hope on is the approach Open SAP will have to rectifying incorrect “correct” answers to questions in the weekly assignments. For those of you on the course (and therefore with access to the discussion areas), here’s an example of where a question was asked, with the officially correct answer actually being incorrect. (There are other instances of this happening on the course too, but I think those are down to oversights rather than anything else.)

The answer in question, so to speak, related to the deployment steps for frontend and backend Fiori components, and whether they were the same. Of course, with the variations on system landscapes, ABAP and HANA stacks, and even the deployment tools themselves, the answer is “no”. But this has been marked as incorrect by Open SAP. While in the grand scheme of things this hardly matters, to those taking the course, it’s both a matter of principle and an area that one would feel strongly about, being the type of person taking the course, i.e. one that enjoys exacting detail.

I’m sure that the Open SAP folks will sort this out before the course is over.

Before leaving this subject, I would also like to point out that the course content has been rather dry so far. For example, this week’s lectures entail the long winded description of configuration (especially in the area of role assignments in PFCG), only backed up by static slides. Unless I missed it, I didn’t see any actual real live screencasts of configuration in action. I don’t know about you, but I can only take so many slides with theory on them, I need to see things in action. As one of my favourite TV characters likes to say, “let the dog see the rabbit”!

This Week in Fiori (2014-38)

Hello again, I’m back again after a week off TWIF, a week where I managed to participate in two great events in the north of England. First, on Sat 13 Sep there was SAP Inside Track Sheffield, (organised by Tim Guest, Steve Lofthouse and others) where I presented a session on UI5.

Screenshot 2014-09-21 at 21.19.54Then yesterday (Sat 20 Sep) there was SAP CodeJam Liverpool, organised by Gareth Ryan. It was a UI5-themed day where I was totally honoured to work with Frederic Berg (one of the many UI5 heroes from Walldorf) taking the participants on an all-day introduction to building apps with UI5. We took a Fiori design led approach with the exercises and I would say that by the end of the day all the attendees had gained a good appreciation for UI5 and a decent understanding of the development approach. It was a lot of fun and very rewarding; not least because a couple of the participants were from the non-SAP developer ecosphere. Developer outreach, albeit small, in action!

Perhaps it’s worth pointing out again that SAP Fiori is powered by UI5. To properly understand SAP Fiori from a developer perspective, UI5 is an essential skill to have.

Anyway, on to this week’s picks.

How to launch “Web Dynpro ABAP” and “SAP GUI for HTML” Application Types from the SAP Fiori Launchpad by Jennifer Cha
I’ve talked about the SAP Launchpad becoming the new portal a number of times in this TWIF series, but if you need more convincing, take a look at this step by step guide. SAP Fiori Launchpad started out live (in its previous “Launch Page” incarnation) as an initial access point to the Wave 1 ESS/MSS Fiori apps.

A lot has changed since then, not least the HTML5 architecture that powers it. But more importantly, the ability to make more available through this initial access point is increasing. SAP Fiori, part of SAP’s “New, Renew, Enable” strategy*, specifically the “Renew” part, is not going to cover the entire functional breadth of, say, your ECC system. So having the ability to expose more traditional transactions in the same context as the next generation approach makes some sense, even if it does, in my mind, dilute the purity of design :-)

*actually this strategy now has a fourth strand “Design Services”. More on that another time, perhaps.

SAP Fiori and Google Analytics by Craig Gutjahr
The integration of Google Analytics and web apps is nothing new of course. But this short screencast is a nice reminder of what’s possible. The ability to track activity on a user basis, even on a page basis, is extremely valuable. Combine the detail that Google Analytics gives you, with the ability to explicitly send details on page views from your Fiori app (on a certain event in UI5, such as a navigation) and use that information for the next iteration of your app, focusing on roles and task-based activities, and you can build yourself a nice UX feedback loop.

By the way, there’s a nice example of sending explicit events to Google Analytics on Joseph Adams’s post “Optimizing page timings for Google Analytics“.

The Power of Design Thinking in Fiori Application Development by Sarah Lottman
This is a good short piece on, well, basically, talking to the user to work out what they need. I’m still not sure what design thinking is, over and above putting yourself in the users shoes and working out what they want, before developing stuff. Of course, this is very glib of me and I may have missed the mark, and the design process that Sarah describes is neither easy nor obvious. I myself am guilty of building software and then imposing that upon others, without having talked to them.

So perhaps the key takeaway is actually that one way to get design right is to use the building blocks that Sarah describes – persona creation, process and task flow mapping, and wireframing. Actually it’s often fun to skip wireframing and jump straight to throwing UI5 control declarations into an XML view structure and throwing it at the screen. Or is that just me?

Jobs, Jobs, Jobs by Various
It was going to happen sooner or later. Actually it already started a while ago, but these days I’m noticing more and more job postings. Postings mentioning Fiori specifically, and postings mentioning UI5 specifically, in the title. Thing is, with Fiori and UI5 being relative new skills on the scene, there’s room for even more confusion than normal in this area.

Screenshot 2014-09-21 at 21.01.18Take a recent post on Twitter, advertising a position thus: “Architect – Mobile Web & Fiori Job” at SAP in Bangalore (according to the link destination).

But reading the copy, the only mention of the word “Fiori” in the whole detail was in the title. Nowhere in the actual description. And the only mention of UI5 at all was as the last item in a list, almost an afterthought: “(JQM, Sencha, SAP UI5, etc)”.

I don’t understand what’s going on here. So I guess we have to just keep an eye on the details of what is actually being offered. And on that subject, keep an eye on the details on the other side of the fence too. In a previous episode (TWIF 2014-29) I noted seeing a claim of “five years plus of SAP Fiori focused delivery”. Remember, Fiori has existed for less than two years, UI5 for a bit more than that. Caveat, well, everyone.

That’s it for this week, thanks for reading, see you soon!

Scratching an itch – UI5 Icon Finder

There are a huge number of icons as standard in the UI5 library, both in the SAPUI5 and OpenUI5 flavours. Here’s the Icon Explorer from the SDK.

Screenshot 2014-09-14 at 20.35.07One of the problems I have is that when I’m looking for an icon, the search term I have in my head is not necessarily going to match up with the name of the icon in the library.

For example, I might be looking for a “cog”, with the icon on the left in mind, but I’m not going to be able find it unless i use the term “action-settings”.

And in the light of the session I gave this weekend at SAP Inside Track Sheffield on “Quick & Easy Apps with UI5″, where I focused on single-file apps, albeit with full MVC, I decided to hack together a little smartphone-focused app where I could search for icons, and add my own “aliases” so that next time I searched, the search would look at my aliases too.

It’s a very simple affair, and in this first version, is designed to use the localStorage mechanism in modern browsers so that you build up your own set of aliases. Perhaps a future version might share aliases across different users, so that we can crowdsource and end up with the most useful custom search terms.

Anyway, it’s available currently at http://pipetree.com/ui5/projects/iconfinder/ and you can grab the sources from the Github repo (remembering that the whole point of this is it’s a single-file app!).

Screenshot 2014-09-14 at 20.50.16 Screenshot 2014-09-14 at 20.48.52

Here’s a short screencast of a version of it in action:

Let me know what you think – is it useful? In any case, share & enjoy!

 

This Week in Fiori (2014-36)

When you write a series of weekly posts, you’re acutely aware of how fast the actual weeks fly by. And this last one was no exception. Lots of movement and activity in the SAP Fiori world … let’s get to it.

Introducing the New SuccessFactors UX based on SAP Fiori by Sam Yen
This short video from Sam Yen, SAP’s Chief Design Officer, is worth watching, not least for the soundbites that help underline how important SAP Fiori is for SAP, and therefore for us as customers and partners. Here are a couple of them:

“Design has been named one of the five priorities of the entire company”

“Fiori is now the design direction for all of SAP’s solutions”

Clearly building the new SuccessFactors complete user experience upon SAP Fiori is a significant next step in this direction. Even if you’re not interested in any of the current SAP Fiori apps, be interested in SAP Fiori as a UX and UI technology. Not being interested is to miss out on one of the critical new generation platforms for enterprise apps in the SAP ecosphere.

Take Part in the SAP Fiori UX Design Challenge by Susanne Busemann
Tomorrow sees the start of the OpenSAP course which I first mentioned in TWIF episode 2014-31 - the Introduction to SAP Fiori UX. As an optional part of this course, a design challenge has been set.

If you don’t know already, a large part of the philosophy behind SAP Fiori is about the UX, as distinct from the UI. The UX you get from SAP Fiori is powered by the UI that is provided by the tremendously capable UI5 toolkit (see The Essentials – SAPUI5, OpenUI5 and Fiori for more details on UI5 and its relationship with Fiori).

Even as a out and out developer, and primarily (or at least originally) a backend developer – a “data plumber”, I have found in my UI5 and Fiori development experience so far that prototyping the user experience is a important part of building great apps. So I’m happy to see that folks are encouraged to dip their toes in the design pool.

See you on the course!

My Personal Ux, Fiori, Portal, Cloud Cheat Sheet by Aviad Rivlin
My friend and fellow SAP Mentor Aviad has appeared on TWIF before, specifically in TWIF 2014-30, talking about the SAP Fiori Launchpad and the SAP Portal of course. This time he’s back, with a nice little set of links to great resources relating to Fiori, Portal and the cloud. It’s a super combination and not a little fascinating, for reasons I’ve mentioned before – there’s a convergence of SAP Fiori’s Launchpad with the older SAP Portal concepts, which is not unexpected as both serve similar functions.

Aviad intends to update the blog posts with new links as and when appropriate, so it’s definitely worth bookmarking.

SAP Fiori Application Integration with SAP Enterprise Portal by Ido Fishler
On the subject of SAP Fiori and SAP Portal, here’s another timely blog post on the SAP Community Network by Ido Fishler. He takes the reader through the steps required to get an SAP Fiori app integrated (via iView) into the SAP Enterprise Portal. Whether you’re running an SAP Portal or not, it’s definitely worth a read – the “exhaust-knowledge” alone is worth the price of a coffee for sure.

Well that’s all for now, folks. I’m off to document episode four of a rather exciting series I’m building on the subject of OpenUI5. Until next time, share and enjoy!

 

 

This Week in Fiori (2014-35)

Hello and welcome to another episode in This Week in Fiori (TWIF) – for week 35, the last week in August already. This week it’s an all-SAP affair. Without further ado, let’s get to it.

Catalog of SAP Fiori Apps by SAP
This has recently started to appear on people’s radar, and is a nice resource for summarising all the apps available so far. There are a lot of apps listed, and according to a rough calculation it looks like 370 apps are now listed.

I guess one issue with this catalog page is that it doesn’t really scale, from a human readable perspective, and you don’t get a feel for where the majority of the apps lie. For that, I’d of course recommend my SAP Fiori App Analysis Tool that I mentioned in a previous TWIF episode (TWIF 2014-31). This tool lists the apps that were available at the time the tool was built (313 of them), and I need to get round to add the new apps to the database. Of course, perhaps if I found a few of the right shaped tuits I might attempt to parse the source of this Catalog page. Ideally, SAP would supply a machine readable dataset. Please?

Here’s my rough calculation, by the way :-)

cat

SAP Fiori Subtrack at SAP TechEd & d-code by SAP
The SAP TechEd conference season is starting soon and the excitement is building already. This year there’s a User Experience & User Interface Development track*. Within this track there’s an SAP Fiori subtrack, which is great to see (although not unexpected!). Here’s a quick glance of the sessions in this subtrack in Berlin:

fiorisubtrack

Mini CodeJams, Code Reviews, Lectures and Hands-on Workshops. There are not as many as I’d like, but it’s a good start. Perhaps I’ll see you there?

*Ironically the SAP TechEd && d-code site makes it very difficult for me as a user to use – following links within the Agenda Builder break fundamental browsing contracts and expectations, such as being unable to go back having selected a track or subtrack, for example. Bad UX at its best.

Use Cases for Extending the UI of SAP Fiori Apps by Clement Selvaraj
One of the better (read: more comprehensive) PDF based documents to come out over the past few months, that has only just come to my attention, is this PDF-based detailed document on extending SAP Fiori apps. It takes a specific functional scenario (Report Quality Issue) and walks the reader through a series of extension use cases. These use cases cover the extension concepts (extension points and controller hooks), and as a nice by-product, give the reader insight into a little bit of how a real SAP Fiori app is put together under the covers. For example, it highlights the Sn views (S2.view.xml, S3.view.xml, and so on) which my colleague Brenton and I covered in our Understanding SAP Fiori Webinar a couple of months ago. See the accompanying video screencast “Understanding SAP Fiori” for more details.

Well that’s it for now, thanks for reading. I hope you’re enjoying this TWIF series … do please let me know if there’s any way I can make things better, I’d love to hear from you. Until next time, share & enjoy!

This Week in Fiori (2014-34)

Screenshot 2014-08-23 at 14.37.51Another week gone! I’m sitting in my “second living room”, North Tea Power, drinking a fab coffee and sifting through the Fiori related articles that came to my attention this week. And just this morning there was a very interesting conversation on Twitter that I also want to bring to your attention; not only because it relates to Fiori, but also because it involves some of the key thinkers and doers in this space, folks that I respect greatly. So, let’s get to it.

Extensibility information for SAP Fiori by SAP
In my 27 years hacking on SAP, I’ve seen the constant struggle between quality and quantity of SAP documentation. I cut my enterprise tech teeth on IBM mainframes – proprietary tech to the core, but my goodness did they have superb documentation, the quality and preciseness of which I’ve never seen since, to be honest. I’m sure I’m not the only one who’s had a love-hate relationship with SAP documentation, but having recently been on the other side of the fence (involved in producing some documentation recently) I do know it’s no easy task.

SAP Fiori is here to stay, as are the underlying tech layers; and we need to be prepared to embrace a new SAP software logistics world that is very different from the old but comfortable ABAP stack based one with which we’re familiar. Software logistics? Code management, version control, deployments, and extensions & enhancements … not least those modification free ones that allow us to survive service pack updates and the like.

So it is with this in mind that I reviewed what extensibility documentation exists in the SAP Fiori space. While it touches many of the bases, it is still relatively sparse on detail, and still lacking in examples. Still, it is a start, and I encourage you to read it, if nothing else, to discover the areas that you need to know more about … and persuade SAP to write more on.

Fiori, Personas and beyond: selecting the best UI for SAP processes by Chris Scott
This is a nicely considered post on the SAP Community Network that takes a step back from Fiori and encourages the reader to consider all the options for improving the overall user experience (UX). It highlights that there are options other than SAP Fiori of course, but more importantly it suggests, rightly, that the whole approach should be requirements driven, with a focus on improving process. Sure, this sounds obvious, but sometimes it’s easy to lose sight of the bigger picture when the tech is so compelling. It also goes some way to underline the basis of SAP Fiori UX strategy – task / function focused, according to role, rather than the more traditional feature-smorgasbord that we’re used to in the UI that we drive by entering transaction codes.

SAP Fiori Prototyping Kit by SAP
In TWIF 2014-28, I highlighted the SAP Fiori Design Guidelines. Bundled with these guidelines was a simple prototyping kit. The very fact that a prototyping kit exists suggests how important the user interface (UI) design process is if you want to produce good UX, and while there are different philosophies related to prototyping, a lowest-common-denominator approach is to mock stuff up with building blocks that represent UI component parts. The prototyping kit has these component parts, and has recently (this month) been updated. Definitely worth a download.

A useful side effect of tools like this is that we stand a better chance of producing appropriate and consistent, compatible “Fiori-like” UIs that don’t jar when switching from one app to the next.

On UI5 and Fiori deployment and extensions by The Usual Suspects on Twitter
A very interesting conversation came about on Twitter this morning, with UI5 and Fiori luminaries such as Graham Robinson, John Patterson and Jason Scott. It was about non-standard (i.e. not SAP standard) development workflows, and included thoughts on Fiori development and extensibility.

As with many Twitter conversations, a lot of what was not said — due to the 140-char nature of the microblogging platform — was just as important (bringing a modern nuance to “reading between the lines”). My take on the conversation, and the thoughts in the minds of the participants, was that we need to keep a close eye on where SAP is going with tooling, and where we as individual developers want to go, how the paths are similar and how they’re different. Not everyone wants to use Eclipse, or even RDE, to develop and maintain Fiori applications. RDE – the River Development Environment – is of course a fabulous piece of engineering but it should never be a one-size-fits-all solution.

One of the wonderful side effects of SAP embracing open standards and open source is the freedom we have to choose the tools, and build the the tool chains and workflows with those tools, workflows that best suit the particular environment and circumstances of the client and the design / developer teams. I want to make sure we don’t lose sight of that side effect as time goes on.

Well that’s it for this week, until next time, share & enjoy!

This Week in Fiori (2014-33)

Screen Shot 2014-08-17 at 11.03.23Hello again. Another week has passed, and the writing of this week’s TWIF should have found me in the Lake District, but alas due to circumstances too tedious to go into now, finds me about 90 miles south, back at home. Anyway, it’s the end of the week and therefore time for some Fiori links and commentary. Let’s get to them!

SAP Fiori Launchpad for Developers by Steffen Huester and Olivier Keimel
In previous TWIF episodes I’ve mentioned the SAP Fiori Launchpad and its importance to the Fiori app ecosphere. It’s slowly becoming the new lightweight portal and rightly so. The SAP Fiori Launchpad has been designed to be cross platform (ABAP, HANA and Cloud stacks) and in true SAP style this design shows through in the form of abstraction layers — service adapters, the shell renderer and the application container. In fact, it’s the application container that might pique your interest, as we see that it can not only host UI5 apps (via the Component concept) but also Web Dynpro ABAP and SAP GUI for HTML apps.

This document, which applies to the User Interface Add-On 1.0 SPS 05 (am I the only one to still refer to this product as “UI2″?) is a great resource which explains the Launchpad architecture and includes some details, and do’s & don’ts, on the Component based approach to building and embedding apps. Yes, embedding – the Launchpad is a single HTML page (a resource with a URL typically ending “FioriLaunchpad.html”) into which UI5 apps, in the form of Components, are loaded.

One thing in this document that made me smile was a couple of references to the UI5 Application Best Practices guide (also available in the SDK docu) which is the work of my own hand :-)

Build me an app that looks just like Fiori by John Patterson
This article only recently came to my attention. It was published a few days ago in Inside SAP but looking at some of the content towards the end (specifically about open sourcing), I think it was written a while ago. Nevertheless it’s a good read and worthy of attention now. (Also, randomly, it reminds me of the title of the film “Bring Me the Head of Alfredo Garcia“.)

Even now I come across folks who are still looking for a good explanation of Fiori, UI5 and the relationship between them, and also what UI5 offers. Sometimes I point them at my post “The essentials: SAPUI5, OpenUI5 and Fiori” but also this article by John addresses that need nicely too.

(Warning, you need to complete a free signup to get to the content. Come on Inside SAP, you can do better than that!)

SAP Fiori Course Offerings by SAP
In TWIF 2014-31 I mentioned that the OpenSAP MOOC is offering a free course “Introduction to SAP Fiori UX” starting in September this year. I thought I’d take a look at what SAP offers in the way of more traditional courses, relating to Fiori. This is what I found on the SAP Fiori curriculum page:

Screen Shot 2014-08-17 at 10.52.03

It’s still early days, I think, but it’s a fair representation of the skills required for Fiori:

  • Design thinking (THINK1)
  • HTML5 & SAPUI5 (SAPX04 and SAPX05)
  • Gateway (OData) (GW100)
  • Fiori Implementation & Configuration (SAPX03)

Note that the GW100 course covers OData from a Gateway perspective, i.e. the OData server product mechanism from SAP for the ABAP stack. There doesn’t seem to be coverage for the roughly equivalent OData server mechanism XSODATA on the HANA stack. With many of the SAP Fiori apps, specifically the analytical and factsheet ones*, requiring HANA as a backend, this seems to be a gap that should be filled sooner rather than later.

*See the SAP Fiori App Analysis tool for more details

What’s New in SAP Fiori (Delivery July 2014) by SAP
A nice coffee time read is this series of What’s New documents from SAP on the main SAP Fiori documentation site. The documents don’t go into too much detail but do have pointers to where more information is available; they nicely summarise some of the new features and changes that are delivered in the ever increasing number of waves.

This time, like last time (for the Delivery May 2014 edition), the What’s New covers Products, Infrastructure and Documentation. There again we have the significance and prominence of Fiori infrastructure, which of course includes the Launchpad, but also the set of layers between any given Fiori app and your backend SAP system. Worth keeping an eye on for sure.

Well that just about wraps it up for this week. Until next time, share & enjoy!

This Week in Fiori (2014-32)

Screen Shot 2014-08-08 at 18.53.49Here we are, another week into the new Fiori flavoured world, and as always, there are things to talk about and posts to mention. While it’s been a relatively quiet week there have still been various “announcements” that company X or company Y is now supporting SAP Fiori, or have a Fiori related offering which involves design, prototyping or deployment.

While the glass-half-empty folks might point out that this is a lot of marketing and bandwaggoning, I like to think of it as a good sign that as well as already being everything from a design philosophy (“Fiori”) to a product (“SAP Fiori”), it’s also gaining traction and mindshare in the wider ecosystem and becoming a definite context for engagement.

Ok, let’s get to the pointers for this week.

Build SAP Fiori-like UIs with SAPUI5 by Bertram Ganz
While working as a member of the core UI5 team at SAP in Walldorf in 2013/2014, I was privileged to take part in the creation and presentation of SAP TechEd session CD168 “Building SAP Fiori-like UIs with SAPUI5″ with a number of UI5 heroes like Thomas Marz, Frederic Berg, Bertram Ganz and Oliver Graeff. I wrote about the CD168 session in a post on the SAP Community Network and since the delivery of the session at the SAP TechEd events 2013, the slides, detailed exercise document and exercise solutions have been made available via Bertram’s post.

Even though it was posted back in January this year, it’s still an important post for a couple of reasons. First, the material is very comprehensive and takes you from a very basic and raw application all the way through to a rather accomplished Fiori application, introducing many features of UI5 that are key to Fiori applications along the way. But also, it shows us that designing and building Fiori applications is not just in SAP’s hands – it can be in *your* hands too. Fiori is a concept big enough to share.

If you haven’t already, take a look at this content to get a feel for what it’s like to build Fiori apps. It’s a pretty decent set of materials, and I’m very proud to be a co-author.

Why Pie Charts are not in SAP Fiori Chart Library by Vincent Monnier
Like the reference to The Fiori Design Principles in the first post in this series back in week 27 (TWIF 2014-27), this post by a designer at SAP highlights that as well as development and the thought processes behind building software, there’s also *design* and the thought processes behind building a great experience … both of these things go into Fiori.

This is a relatively short post that highlights out some of the general downsides to pie charts and points to some further reading. But it’s the fact that the design process has been gone through and also shared with the wider community that is interesting. In fact, if nothing else, use this as a pointer to the whole SAP User Experience Community site. And if you want to know more about charts in SAP Fiori, see the chart section in the SAP Fiori Guidelines.

The UI5 Explored App by the UI5 Team
The toolkit on which Fiori apps are built is UI5 (UI5 is the generic term I use for both the SAP licenced version SAPUI5 and the open source licenced version OpenUI5 … see The Essentials – SAPUI5, OpenUI5 and Fiori for more info). The UI5 Software Development Kit (SDK) includes a large amount of documentation and example code, and part of that is known as the Explored App. It started out life specifically to showcase and provide example best practice approaches for controls in the responsive “sap.m” library, but has graduated to being a top level menu section within the SDK and covers controls beyond “sap.m” now too.

(As with the CD168 tutorial materials, I am also proud to have had a hand in building the Explored App too ;-)

With the Explored App you can, well, explore many features and functions within UI5, a good number of which are used to build Fiori applications, and you’ll start to recognise component parts, building blocks that are used and reused to provide features such as search, lists, buttons, dialogs, and so on. Let’s pick one – the IconTabBar. In context, it typically looks like the lower half of this screenshot:

Screen Shot 2014-08-08 at 18.40.32

The IconTabBar is used to contain a number of tabbed sections, with the selection for each of the sections typically being round icons. The design changed slightly between SAP Fiori Wave 4 and 5, now there’s more info shown in place of the icons.

Have a look around and see what Fiori building blocks you can recognise!

Well, the train is almost at Manchester Piccadilly now so this brings this week’s roundup to a close. As always, thanks for reading, and remember you can access the whole series with this TWIF category link: http://pipetree.com/qmacro/blog/category/twif/

Share and enjoy!

This Week in Fiori (2014-31)

SAP UX ExplorerWell, yet another week has gone by and we have new Fiori related content to consume. And I was reminded of that early this morning after seeing a tweet and a screenshot from Tony de Thomasis showing SAP Fiori for TDMS 4.0 – the scope of SAP Fiori apps is indeed widening further. The tweet prompted me to think about reviewing the data for my online SAP Fiori App Analysis tool** with a view to updating it. Do you find it useful? Let me know in the comments or via Twitter (I’m @qmacro).

**the data is hand-gathered, see The SAP Fiori App Analysis application for some background. Ideally SAP could make this data available and keep it up to date for us, right?

Anyway, on to the picks for this week.

OpenSAP’s Introduction to SAP Fiori UX, by Prakalp Phadnis, Elizabeth Thorburn & Jamie Cawley
Well, that didn’t take long! SAP’s extremely popular and successful Massive Open Online Courses (MOOC) system “OpenSAP” is offering a free course on SAP Fiori. Specifically, Fiori User Experience (UX). After all, UX is at the heart of a lot of what the Fiori philosophy is about.

I’ve said in the past that Fiori is “many things, including a state of mind”. I’m hoping that this course, which promises lessons on fundamentals, latest features, installation, configuration and best practices for extensibility, will instill in the attendee a sense of what good looks like, and help to prevent possible dilution of the Fiori concepts.

The SAP Fiori Launchpad has been added to the UX Explorer! by Elizabeth Thorburn
In last week’s TWIF installment I mentioned the functional proximities of the SAP Fiori Launchpad and the SAP Portal, in reference to a post by Aviad Rivlin. This week SAP have taken another step towards surfacing info about the important Launchpad, by including it in the UX Explorer.

With the UX Explorer you can find out about different User Interface (UI) and UX products and technologies from SAP. While the current content for the Launchpad isn’t overwhelming, it is there, which is a start. And there’s a couple of things that stood out for me: It stated loud and clear that the Launchpad was built using SAPUI5 (yay for the teams and my extended family in Walldorf!) and is most definitely marked as “strategic” as relating to relevance for SAP’s own application development.

Elizabeth is one of the tutors on the Introduction to SAP Fiori UX course, by the way.

Partner Co-Innovation Workshop – Build Your Own Fiori App by Jeffrey D’Silva
For me this post is a bittersweet one. The SAP Co-Innovation labs are running a 3-day workshop for partners, covering design thinking, Fiori design principles, UI5 controls and more, culminating in the attendees building an app. It’s not clear to me after reading the agenda and the description whether the app will be a mockup only (as detailed in the agenda) or complete and fully certified (as detailed in the description). My guess is that with two of the three days taken up with design (and rightly so), the result will be nearer a working mockup than something that has already reached SAP certification.

But here’s the thing: SAP Fiori and the underlying technologies (UI5 and OData) are the fundamental building blocks of much of SAP’s application future. So it’s not only important for SAP themselves and SAP partners, but for SAP customers too. What customers were (and still are) building and extending in the land of classic and web dynpro, the approaches and techniques used, and the tools and platforms relied upon, will be slowly but surely be superseded by Fiori, UI5 and OData flavoured equivalents.

Customers, ready thyself for Fiori flavoured development! And by that, I mean a different approach to source code control, version management, extensibilty, and more, as well as design and build techniques and libraries.

That’s it for this week, have a great weekend, and as always, share & enjoy!

Keyed vs Non-Keyed Root JSON Elements & UI5 Binding

In a screencast this week (OpenUI5 MultiComboBox First Look) I explicitly used the model mechanism’s requestCompleted event to get to the model data and manipulate it, adding a key to the root array. Initially the data looked like this:

Screen Shot 2014-07-26 at 14.20.21

and I added a key to this root array so it looked like this:

Screen Shot 2014-07-26 at 14.23.44

I did this programmatically in the requestCompleted event of the model mechanism, as you can see in the Gist for the MultiComboBox.html file, specifically starting at line 38:

oModel.attachEventOnce('requestCompleted', function(oEvent) {
  var oModel = oEvent.getSource();
  oModel.setData({
    "ProductCategories" : oModel.getData()
  });
});

However, while fun and interesting, I want to point out that this is not absolutely necessary. The model will still support an unkeyed root element such as this array, as shown in the first screenshot above. You can see how this is done in the Gist for the MultiComboBox-without-Keyed-Root.html file - the difference is we don’t need to manipulate the data in the requestCompleted event and the binding for the MultiComboBox items aggregation looks like this:

{/}

rather than this:

{/ProductCategories}

Of course, having an unkeyed root element means that you can’t have anything else in that JSON source, which may cause you issues further down the line. But it’s not critical for this example.