SAPUI5 is a powerful JavaScript framework that forms the foundation of SAP Fiori applications. One of the key strengths of SAPUI5 lies in its comprehensive set of libraries, which provide a wide array of UI controls, utilities, and functionalities that accelerate the development of enterprise-grade, responsive applications.
Understanding how to work effectively with SAPUI5 libraries is essential for developers looking to build, customize, or extend SAP Fiori apps. This article explores the structure, usage, and best practices around SAPUI5 libraries.
SAPUI5 libraries are modular collections of reusable code components including UI controls, helper functions, and resources grouped to facilitate development. These libraries help developers quickly build consistent and high-quality user interfaces aligned with SAP Fiori design principles.
SAPUI5 ships with a rich set of libraries, including:
To use SAPUI5 libraries in your application, you must declare them as dependencies in the manifest.json or bootstrap configuration:
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.60.0",
"libs": {
"sap.m": {},
"sap.ui.layout": {},
"sap.viz": {}
}
}
}
Alternatively, when bootstrapping in your HTML file, specify libraries like this:
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true">
</script>
In your controller or component JavaScript files, you import controls from these libraries using the AMD (Asynchronous Module Definition) pattern:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/Button",
"sap/m/Dialog"
], function (Controller, Button, Dialog) {
return Controller.extend("my.app.controller.Main", {
onInit: function () {
var oButton = new Button({
text: "Click Me",
press: function () {
var oDialog = new Dialog({
title: "Hello",
content: new sap.m.Text({ text: "Welcome to SAPUI5!" }),
beginButton: new sap.m.Button({
text: "Close",
press: function () {
oDialog.close();
}
})
});
oDialog.open();
}
});
this.getView().byId("page").addContent(oButton);
}
});
});
Since libraries provide specialized controls, you can mix and match based on your app’s requirements:
| Library Name | Purpose | Key Controls |
|---|---|---|
| sap.m | Mobile-first, responsive UI controls | Button, List, Table, Dialog, Input, Icon |
| sap.ui.layout | Layout management for responsive design | Grid, FlexBox, Splitter |
| sap.ui.table | Advanced desktop tables | Table, Column, Row |
| sap.ui.core | Core functionality and base classes | Control, Element, Event |
| sap.viz | Data visualization | VizFrame, Chart, Donut, Bar, Line |
| sap.ui.unified | Unified controls for calendars, uploaders | Calendar, FileUploader, Timeline |
sap.m controls as they are optimized for responsiveness.sap.ui.layout for better UI responsiveness across devices.sap.ui.define to load controls modularly and asynchronously.SAPUI5 libraries are extensible, allowing you to:
This flexibility helps meet unique business needs while retaining consistency with SAP Fiori UX.
SAPUI5 libraries are fundamental building blocks for developing SAP Fiori applications. Knowing how to include, use, and extend these libraries empowers developers to create responsive, scalable, and visually appealing apps aligned with SAP’s UX standards.
Mastering SAPUI5 libraries enables rapid development, better code organization, and consistent user experiences, making it a critical skill in the SAP Fiori ecosystem.