UI Development
As a UI developer, you have to design and build interfaces that give users an optimal experience, while also meeting the needs of your business. Whether you are updating your existing UIs, creating new HTML5 UIs, or building mobile applications, SAP has the tools and technologies to address your specific development scenario.
Development Scenario 1: Create UIs for traditional on-prem systems
SAP Fiori
SAP Fiori is the design framework and set of guidelines for all SAP products. It applies modern concepts and design principles, letting you create optimized UIs. SAP Fiori can be implemented through various UI technologies and platforms, such as the SAPUI5/OpenUI5 framework, or the iOS and Android SDKs for native mobile SAP Fiori apps.
See official SAP documentation
Build an SAP Fiori App that consumes data from an on-premise system (tutorial)
SAP Screen Personas
SAP Screen Personas is a personalization tool, which lets you customize UIs for the user and his/her role. It allows you to add a UI layer to simplify SAP S/4HANA, SAP Business Suite on SAP HANA, or SAP ECC screens for users with drag-and-drop functions and minimal coding. In this way, users only see the fields and visual elements that they need to be productive.
See official SAP documentation
Get started with SAP Screen Personas (tutorial)
SAP Business Application Studio
SAP Business Application Studio is a modern development environment that lets you create smarter business applications for your on-prem systems. For example, you can build SAP S/4HANA extensions, modeling workflows, and mobile applications.
Development Scenario 2: Create UIs for the Web
SAPUI5
SAPUI5 is a JavaScript UI library from SAP used to build responsive HTML5-based apps. With SAPUI5, you can build apps with a consistent UX, resulting in designs that adhere to SAP standards. 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.
See official SAP documentation
Explore the SAPUI5 and SAP Fiori learning journey
OpenUI5
OpenUI5, the open source version of SAPUI5, is available on GitHub and encompasses the complete core along with the main UI controls of SAPUI5. UI5 apps and controls run on smartphones, tablets and desktop browsers.
See official SAP documentation
UI5 Web Components
UI5 Web Components give you a set of reusable UI elements that you can use in building static websites or applications with the technology of your choice. As a result, you can create a consistent user experience aligned with SAP Fiori design guidelines.
Build a single page application using UI5 web components for React (tutorial)
Fundamental Library Styles
Fundamental Library Styles is a lightweight presentation layer that can be used with the UI framework of your choice (e.g. Angular, React and Vue). With Fundamental Library Styles, library of stylesheets, plus HTML tags, you can create consistent SAP Fiori apps in any web-based technology.
SAP Business Application Studio
Using SAP Business Application Studio, you can build and deploy apps easily.
See official SAP documentation
Get started with SAP Business Application Studio (tutorial)
Development Scenario 3: Create UIs for mobile devices
SAP Mobile Services
SAP Mobile Services enables you to develop, configure, and manage applications that provide mobile access to enterprise data. Key features include app content lifecycle management, push notifications for timely enterprise data updates, support for on-device storage of enterprise data (offline apps), app security, app monitoring, and usage reporting.
See official SAP documentation
Access SAP Mobile Services (tutorial)
SAP SDK for Android
SAP SDK for Android lets you develop your own native apps with Java or Kotlin code. Along with SAP Fiori for Android, which brings the SAP Fiori design principles to the Android platform, the SDK also allows you to tap into the services and functions available in the SAP Mobile Services. This allows you to build powerful, elegant and fully native apps. Key features include: user onboarding/offboarding, logging, online OData, offline OData, push notifications and a complete UI layer through SAP Fiori for Android.
See official SAP documentation
Get started with SAP SDK for Android (tutorial)
SAP SDK for iOS
SAP SDK for iOS lets you develop your own native apps using Xcode. Along with SAP Fiori for iOS, which brings the SAP Fiori design principles to the iOS platform, the SDK also allows you to tap into the services and functions available in the SAP Mobile Services. This allows you to build powerful, elegant and fully native apps. Key features include: user onboarding/offboarding, logging, online OData, offline OData, push notifications and a complete UI layer through SAP Fiori for iOS.
See official SAP documentation
Set up the SAP SDK for iOS (tutorial)
SAP Mobile Development Kit
The Mobile Development Kit (MDK) for SAP Cloud Platform Mobile Services is a metadata-based application development platform. It lets you customize, deploy, and manage your customized iOS and Android apps in the cloud. The MDK editor lets you edit various aspects of your application. In addition, it gives you native client support and consumes mobile services capabilities such as onboarding, offline OData, life cycle management, and supportability through the SAP Cloud Platform using the Mobile Development Kit client.
See official SAP documentation
Get a quick start with the MDK (tutorial)
Code Samples for SAP UI Development
SAP Fiori for Android UI components demo app
See more SAP Fiori and SAPUI5 samples on GitHub.com