Skip to Content

Building Custom Fiori Applications

The possibility of potential Fiori applications are endless, and it is an exciting time to be involved in SAP Fiori development right now.  While SAP provides us 360+ out of the box applications, it is not nearly enough to cover all of the business functions that may need to be accessed on the go. There seems to be a lot of interest in this topic, but confusion on how to get started.  This blog attempts to clarify some things.

First, what is needed from an architecture standpoint to start development?

Development Environment (UI):

You have two options here, for the record I prefer the Fiori RDE:

  • Eclipse: Open Source IDE which has UI5 plugins to build the applications.  Make sure you install the ABAP Team Provider which allows you to “push” your code to the SAP Backend for consumption.

       Information can be found here:

  • Fiori River RDE: Rapid Development Environment, and a completely web based tool.  Connects to the HANA Cloud and allows you to deploy them to any connected instances.  Great functionality for code completion and suggestions.

       Check it out here:

One of the most frequently asked questions I am asked by customers is: “How long does it take to build a custom Fiori App?”.  The answer to that varies widely, and truly cannot be answered until the business requirements are clear.  At NIMBL, we do a hands-on session with the business process owners, technical and functional teams and anyone else that needs to be involved to ensure a thorough blueprinting session is done.  The following factors greatly affect the timeline:

  • Number of screens and complexity of UI controls
  • Does the Backend logic(ABAP) already exist? (Can be leveraged in Fiori)
  • Is Gateway already installed in the landscape
  • Are there custom CSS considerations needed, or is the standard Blue Crystal theme sufficient

These are just a few factors (there are many more), but it is important to set the groundwork for a successful implementation.  Part of this process includes creating mockups that are reviewed by the business to ensure that all design and functional requirements have been met.  And this is all before development even begins!

The next question that I get a lot is: What kind of skillset is needed to build Fiori Applications? The main skillset needed is SAPUI5, which is the development framework for Fiori.  Next is Javascript, XML, HTML and some CSS.  Finally, having a background in ABAP is important (especially for troubleshooting).

Finally, I’ll list some examples of custom Fiori Applications that we have built – this is not an exhaustive list, but meant to show the possibilities:

Shop Floor App: The customer was using old barcode scanners with ITS Mobile.  They used the scanners to track equipment coming in and out of the plant, and track inventory.  The complaint was that the GUI screens were slow, and after each scan there would be a long wait while the system updated.

The customer was getting in new touch screens, and they wanted to build intuitive, fast screens that could handle several scans per minute.  We built this custom app using Fiori as the front end, and the results were immediate.  Productivity was significantly increased, the users were very happy with the new screens and the customer is undergoing a major transformation in their business to build more Fiori applications.

UWL(Universal Worklist): This customer wanted to expose their UWL on Mobile Devices.  They wanted to create an intuitive UI with the option to group the requests by type – Leave Approval, Time Approval, etc.   Yes, standard Fiori offers these individual applications out of the box, but they wanted a single screen to see all of their pending requests.  The customer was launching a new BYOD initiative, and after rolling out the new application to several people the feedback was very positive.  The customer is currently expanding on their mobile strategy and plan on rolling out several new ESS/MSS applications later this year.

Transportation Management App: This application is still a work in progress, and will be available soon.  We are working closely with SAP on building a Fiori application on HANA that will pull all transportation orders from SAP (including Date, Delivery Location) and pull in the Weather forecast from Weather Underground. The US government has created key KPI’s that determine how weather affects transportation and travel.  The application will use the weather forecasts as well as the KPI’s to determine the risk associated with on-time delivery of the shipment.  This scenario is only the tip of the iceberg, we plan on expanding this application to do much more – stay tuned.

You must be Logged on to comment or reply to a post.
  • Just a small point, but an important one. You say:

    "--- SAPUI5, which is built on the Fiori Framework .."

    It's actually the other way around - SAP Fiori is built upon the SAPUI5 toolkit (and other protocols and mechanisms).

    • Very good point DJ - thanks for alerting me, mistype on my part.  I've edited the blog to reflect correctly that Fiori is built on UI5.

  • Very nice overview / beginner blog, Sarah (and liked your other one too). Easy digestible, plain English information with specific business cases is exactly what SCN should be known for.

    Especially appreciate you not using these blogs just to advertise your organization's services. 🙂

    Looking forward to reading more.

  • Productivity was significantly increased, the users were very happy with the new screens and the customer is undergoing a major transformation in their business to build more Fiori applications.

    What was the hardware they used for the scanners?

    • Hi Joao,

      They replaced their old technology with Windows 8 Tablets that were connected to Console Scanners.  The Windows 8 devices were much faster than the old devices they were using. This particular shop floor preferred the Console scanners,but some of the newer handhelds run IE9 and above, which of course makes it Fiori compatible.

      • Thanks. One of the major issue with SAPUI5 for warehouse scenarios is the availability of scanners that are powerful enough to run heavy JS.

  • As you mentioned in blog Sarah- this is the real time to jump in for Development (using River or Eclipse)...... take the existing code or build your own. 🙂

    Thanks for the blog.

    ~ Mahendra

  • Hi Sarah,

    Thank you for this valuable direction on which dev tools to use for Fiori UI development. Can you please also comment on the process and tools used to transport the UI development to QA, Prod systems. Is this something supported by SAP CTS+ as part of other transports ABAP, JAVA etc.?

    Also how does HANA Web IDE align here, as it also supports UI5 development?