Create Your Own Fiori Designed Apps with the New SAPUI5 Design Rapid Deployment Solution

For those uninitiated, let me start with a brief overview of SAP’s rapid-deployment solutions (RDS). It is an implementation methodology that provides a framework (via step-by-step guides, best practices, templates, and tools) for SAP solutions to be delivered quickly and easily with a predictable scope, predictable timeline, and predictable outcome. In short, as compared to a traditional implementation approach, the RDS approach is a 20-80% savings in implementation time and cost.

And as of two weeks ago, several new user experience (UX) rapid-deployment solutions were released, which support SAP’s user experience and design strategy. Today I want to focus specifically on one of these new releases, the SAPUI5 Design RDS. The SAPUI5 Design RDS takes the same methodology which was used internally at SAP to create Fiori apps and makes it (said design methodology) available to you to help you create your own Fiori designed transactional apps.

It’s called the SAPUI5 Design RDS because the Fiori apps that SAP created are based on SAPUI5, which is SAP’s enterprise-ready HTML5 rendering library for client-side UI rendering and programming. And this RDS follows suit by showing you how to take SAPUI5 and create your own Fiori designed apps in the same way. And it’s important to note that Fiori isn’t derived from SAPUI5 alone; it’s also a design paradigm with specific look and feel requirements (for any app wanting to be considered truly Fiori designed). So, for the first time, SAP is making the specifics of this design paradigm available publicly.

Here’s what you need to know to take advantage of this RDS and get access to the Fiori design guidelines:

The SAPUI5 Design RDS is available on the Service Marketplace. If you are interested in getting started quickly with the best practices and Fiori design guidelines specifically, you can download this content directly here. Make sure you have pop ups allowed, and click on the “Installation” link (please note: some users may see an authorization error above the link, just ignore it; the “Installation” link will still work), and then follow the on-screen instructions for downloading the zip file. Once you have the zip file downloaded, you’ll want to extract it to a folder of your choosing.

Inside the folder with the extracted files, you have a couple options. The content is designed to be consumed via the RDS_SAPUI5_NW731V1_STND.htm file. If you double click this file, you’ll load the step-by-step guide in your browser which walks you through preparation, requirements, scoping, etc. with corresponding files available on the right hand side under “Accelerators.”

Eventually, while clicking through the step-by-step guide, you’ll get to the “Deploy: Train Key Users” section which will have a link on the right hand side for “Content library.” Clicking on this link will open a window that provides you a nice list (see below graphic) of all the “building blocks” (best practices) included in the implementation content for this rapid-deployment solution.

“U55: SAP Fiori Design” is where you will find the Fiori design guidelines in the form of best practices organized by SAP Fiori Principles, SAP Fiori App Types, SAP Fiori Patterns/Components/Controls, and an appendix that provides detailed information on Fiori typography, colors, and icons. Alternatively, if you want to get to this file directly without going through the step-by-step guide in the browser, simply go to the folder where you extracted the zip file, and browse for the file starting with “U55” via the following folder structure: SAP_BP -> BBLibrary -> Documentation. Here you will also find best practices and guides for the rest of the package (all those files listed in the graphic above).

I should also give you the link for the SAPUI5 Design RDS “Quick Guide” which is a step-by-step guide for setting up your SAP Fiori Integrated Development Environment. And last but certainly not least, I should mention that everything I’ve outlined above is more of a self-service approach for learning how to create your own Fiori designed apps.

However, if you are interested in the full rapid-deployment solution experience inclusive of services (such as a UX design thinking workshop and hands-on SAPUI5 and Fiori design exercises) to facilitate the creation of a proof-of-concept Fiori designed app, check it out on the SAP Store, click the big orange “Contact Me” button and/or feel free to ask questions or leave comments below.

Here’s to the creation of many more Fiori-designed apps!

*Update* For those interested, see here for a German translation of this blog post. Thanks to Andreas Muno for putting together the translation!