When enjoying the sweet taste of cookies, it’s easy to overlook the innate design brilliance of the humble cookie cutter – a tool that can be wielded as easily by a school kid in their first attempt at baking as the expert professional who sells delectable delights in their bakery window.

When enjoying some of the latest role-based, simple, adaptive, coherent, and – yes – delightful Fiori apps it can be easy to overlook the innate design brilliance behind the templates that make can make even a beginner Fiori developer look like a star!

That’s the thinking behind Fiori Elements – cookie cutter templates that help you to build enterprise ready production quality apps in minutes – not days or weeks.

In this blog I’ll explain how Fiori Elements help both SAP and customers scale UX at speed; the high level use cases that fit the currently available templates; and explain *how* they save you time and effort, especially if you and your team are still climbing the Fiori learning curve.

Oh and did I forget to mention? While Fiori Elements are in common use in S/4HANA, yes they can be used for Fiori on Business Suite and Suite on HANA. I’ve even used them with non-SAP scenarios.  There are pre-requisites & some restrictions as you would expect but more on that in a future blog.

How Fiori Elements Scale UX at Speed

For most customers, the biggest barrier in scaling Fiori UX is enabling their app creation team.

Fiori Elements bridge the gap between the beginner and the expert developer.  Even for well-enabled teams with expert developers, Fiori Elements bring significant benefits by driving consistency that reinforces user adoption and minimizes support & training costs.

While there are now over 1000 Fiori apps delivered by SAP, this is only a fraction of the estimated 300-400K screens to be redesigned.  As a User Experience Strategist I am privileged to see first-hand the UX journey of many customers, especially their Fiori journeys.  Many customers on the Fiori journey come to understand fairly quickly some of their most urgent and business impactful user experiences is likely to require a custom app.

But creating a Fiori app is no easy task.  While SAP and partners provide services and frameworks to build apps, there are simply too few resources to share around.  As I move from one customer to another the biggest challenge in creating great user experiences continues to be enablement – building the necessary skills in design and development to create high quality enterprise-ready Fiori apps.  Just some of the skills needed include:

• Visual Design
• Interaction Design
• Information Design
• HTML5
• JavaScript
• JQuery
• CSS
• Git
• Gerrit
• OData Design and practice
• SAPUI5 control libraries

That’s before we get into legal compliance and enterprise requirements around security, data protection, and accessibility.  And all these topics continue to innovate as part of Digital Transformation – new Internet of Things devices, new paradigms such as Machine Learning, new controls are added, new best practices identified, and so on.

Even on the best and most successful projects lucky enough to secure top notch designers and developers with some of the smartest hands and minds, picking up all the skills and keeping current with fast-innovating capabilities of the Fiori Design Guidelines and SAPUI5 development possibilities is a huge challenge.

We are very fortunate in Australia to have a world-leading federal Public Sector project that created 110 custom Fiori apps with approximately 250 individual screens (!) creating a wall-to-wall Fiori site.   I’ve been tangentially involved with this project from the beginning and I’m personally acquainted with several of the team. They are some of the smartest and brightest minds we have in the Fiori space.  Even this team talk about how the way they code now is very different from how they would have coded even 6 months ago.  Things are moving *that* fast.

And that’s is why cookie cutter templates such as Fiori Elements get me excited.  Not only does it let even beginners rapidly create enterprise ready production quality Fiori apps; using the templates drives consistency across user experiences that follow the same pattern.

By using Fiori Templates customers doing Fiori projects can:

• Safely use lesser-enabled designers and developers to create great apps
• Redirect best and brightest resources to focus on the most distinctive and business impactful use cases

When to use Fiori Elements … and when not

Now don’t get me wrong… Fiori Elements are not the answer to every use case, in the same way that there isn’t a cookie cutter for every biscuit shape I want to create.  Fiori Elements aren’t intended to solve every use case – they are aimed squarely at the most common repeatable use case patterns we see again and again and again.

And that’s ok.  Don’t just take my word for that …

In this article SAP Mentor Ethan Jewett and his colleague Joe Rupert explain why they think Fiori Elements are a good idea: Use Fiori Elements and smart controls for custom Fiori apps

The first 3 Fiori Elements currently available are:

• List Report
  • A tabular list of multiple columns with filtering, sorting, grouping, and some optional dashboard-style features such as progress bars, simple analytics, and Insight-to-Action supporting intent navigation to other apps. Even some light touch CRUD functions are possible.

• Object Page
  • A holistic and flexible overview where a single object is the “hero” of the page.  Think one specific Person, one specific Order, one specific Invoice, one specific Account.
  • If you are thinking this sounds awfully like factsheets, Object Pages are both far more flexible and far less restrictive (even light touch updating is possible).  And yes Object Pages have effectively replaced the HANA-only factsheets, as confirmed in numerous sessions at Teched 2016.

• Overview Page
  • Overview Page is one of the most interesting additions to Fiori over the last year providing a big picture at-a-glance view of the key priorities and concerns of end users, complete with Insight-to-Action navigation.  Kai Richter’s blogs on the topic are excellent and are collected here: SAP Fiori Overview Page wiki on SCN

Yes more Fiori Templates are planned – the Analytical List Page has already been announced in the latest Fiori Roadmap for Q3 2016.

If your use case fits one of these common patterns then Fiori Elements should be considered the best practice answer.

However if your use case does NOT match these patterns – if the cookie cutter doesn’t fit the user experience you need to create  – then don’t try and force it to fit the mould.  That will only lead to undesirable compromise and frustration. Stick to the Fiori Design patterns and SAPUI5 development practices as usual.

How Fiori Elements work

Fiori Elements combine your specific use case requirements with a pre-packaged dynamic template that generates a production quality Fiori app.

While the process of creating the app is similar to the Web IDE wizards use to cut the basic development patterns for SAPUI5 apps, the outcome is very different.  As a rule most of the Web IDE wizards create starter code – that’s a huge help to Fiori developers, but it still leaves a lot of filling-in-the-blanks to be done, and a lot of opportunity for missteps and misunderstandings for newbies in getting to a final app.

With Fiori Templates, all the heavy lifting of creating the Fiori app is already done for you by the experts.  At Teched 2016 Las Vegas was privileged to assist some of the Fiori Templates expert team – Thorsten Erlewein and Stefan Engelhardt – in running workshops in Fiori Elements.  And just prior to Teched I met up with Jan Ruessel, who leads the team. This is a team of very smart people!

Fiori Templates have been created to work in such a way that not only do they help you create great apps now – but as new features and improvement become available in future SAPUI5, the apps you create will automatically inherit the new capabilities.  For instance new capabilities in the flexibility services that let key users adapt the UI displays for themselves.

So how do you add your requirements to the template? As a developer you fill in the blanks not by creating more code, but by simply indicating what features you want available, and where they should be used, such as what columns you want displayed in a List Report.  You do this through annotations – which can be provided as comments on the OData service that provides the data, or separately as an XML file.

Because the annotations are always separate from the underlying Fiori Template, even if you are a newbie developer you can’t mess up the template.  For more expert developers, like any Fiori app there are some extensibility options where you can add your own special touches, even here the extensibility enforces a degree of separation to avoid conflicts with the rest of the template.

So what’s stopping you from using Fiori Elements…not much!

Well nothing much… because yes they are available now. In fact they have been available since SAPUI5 1.32.

So why aren’t more developers using them already? Ironically it’s an enablement issue, it’s taken a little while to get the documentation out there and up to level that explains what has to be done. You can find the design documentation in the Fiori Design Guidelines – Fiori Elements and the developer documentation in the SAPUI5 SDK Developing Apps with SAP Fiori Elements

That said, I think we could all benefit from a little more clarification.  So over the next few blogs I plan to break it down for current and aspiring Fiori developers, so like the S/4HANA developers you too can produce high quality Fiori apps in minutes.

As a customer and as SAP, Fiori Elements help us scale UX and create new or renewed user experiences faster than ever.

As a developer, they will also give you a little more time and space to climb that Fiori learning curve… just don’t stop climbing! If Fiori is what excites you, you want to become like that expert baker, using cookie cutters to rapidly fill your window with great user experiences, but enjoying the challenge & skill of creating that special occasion wedding cake, that innovative special use case Fiori app, which showcases your brilliance to all around you.

Image by kaboompics sourced from www.pexels.com