Skip to Content

User Interface


User Interface Development for SAP


Whether you are updating your existing UI, creating new HTML5 UI or building mobile applications, this is the place to start.

SAP Fiori

SAP Fiori is the specification of our user experience (UX) design for all SAP products.

With SAP Fiori, we reimagined the entire user experience for applications built by us, our partners, and our customers to provide a great experience for the end user. As a specification, SAP Fiori provides a blueprint of how the UX patterns fit together.

SAP Fiori is also the name of several tools we have written to support the framework.


SAPUI5 is a JavaScript UI library from SAP used to build responsive HTML5-based apps.

The core of SAPUI5 manages many aspects of modern web app development behind the scenes. A variety of UI controls are included, ranging from basic elements to complex UX patterns, ready to be used to style your app. In addition, SAPUI5 is designed with SAP Fiori UX in mind so it can be used for any UX design concept.

OpenUI5, the open source version of SAPUI5, is available on GitHub and encompasses the complete core plus the main UI controls of SAPUI5.


SAP Web IDE, built on top of SAP Cloud Platform, is our IDE tool that enables you to create a web-based or mobile-based UI design quickly and efficiently.  

SAP Web IDE includes many features designed to simplify app development such as app templates and wizards, code completion, WYSIWYG editors, API reference support, app preview for any screen size, Git integration and mock data. Additionally, plugins to SAP Web IDE enable OData model editing and validation, compiling of hybrid apps with Apache Cordova and overview page creation for your apps.


Under the hood

This is the big picture view of SAP Fiori development.

SAP Fiori apps are built using SAPUI5 and follow the SAP Fiori Design Guidelines. While the SAP Fiori design guidelines help you in specifying streamlined user experience, SAPUI5 lets you physically develop the app. SAP Web IDE accelerates this development by providing a cloud-based development environment that supports the end-to-end application lifecycle.


Try it now


Upgrade an existing UI

  1. Read through the SAP Fiori UX design guidelines
  2. Set up HANA Cloud Connector to connect to your on-premise systems
  3. Start on the mobile web application tutorial series
Creating a new HTML5 UI
  1. Review the SAP Fiori Design Guidelines
  2. Check out the tutorials in the SAPUI5 Demo Kit
  3. Like open-source? Visit the OpenUI5 website
  4. Start on the mobile web application tutorial series
  5. Refer to the SAP Web IDE Getting Started Guide
Back to top