In today’s multi-device world, building applications that work seamlessly across various screen sizes is essential. SAP-UI5, as a modern JavaScript UI framework, provides responsive controls and layout containers. However, for fine-grained control over the UI appearance and behavior, CSS media queries play a vital role.
This article explores how to leverage CSS media queries effectively in SAP-UI5 applications to build responsive, user-friendly interfaces that adapt gracefully to desktop, tablet, and mobile devices.
SAP-UI5 apps are often used in diverse environments: large desktops, tablets on shop floors, or smartphones on the go. Responsive design ensures:
SAP-UI5 controls are built with responsiveness in mind — for example:
sap.m.FlexBox and sap.ui.layout.Grid offer responsive layout capabilities.sap.ui.Device).Still, CSS media queries allow developers to customize styling and layout beyond the default behavior, especially for specific screen sizes or orientations.
CSS media queries let you apply CSS rules conditionally based on device characteristics such as:
Example:
@media only screen and (max-width: 600px) {
/* Styles for small screens */
.myCustomClass {
font-size: 14px;
padding: 10px;
}
}
In your SAP-UI5 project, add a CSS file, for example, responsive.css, inside the webapp/css folder.
Example media queries for common breakpoints:
/* Smartphones */
@media only screen and (max-width: 600px) {
.myCustomButton {
font-size: 12px;
width: 100%;
}
}
/* Tablets */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
.myCustomButton {
font-size: 14px;
width: 80%;
}
}
/* Desktops */
@media only screen and (min-width: 1025px) {
.myCustomButton {
font-size: 16px;
width: 200px;
}
}
In your manifest.json, include the stylesheet:
"sap.ui5": {
"resources": {
"css": [
{
"uri": "css/responsive.css"
}
]
}
}
Assign your custom CSS classes to UI elements, either in XML or JavaScript views:
<Button text="Submit" class="myCustomButton" />
or in JavaScript:
var oButton = new sap.m.Button({
text: "Submit",
customStyleClass: "myCustomButton"
});
sap.ui.Device API for Responsive LogicBeyond styling, you might want to implement responsive behavior in controllers:
if (sap.ui.Device.system.phone) {
// Phone-specific logic
} else if (sap.ui.Device.system.tablet) {
// Tablet-specific logic
} else {
// Desktop or others
}
Use this API in conjunction with media queries for advanced scenarios like dynamically adjusting control properties or visibility.
sap.m.FlexBox, sap.ui.layout.Grid) before resorting to CSS overrides.Suppose you have a table with many columns that doesn’t fit small screens:
sap.m.Table with responsive mode enabled.@media only screen and (max-width: 600px) {
.sapMListTblCol2, .sapMListTblCol3 {
display: none;
}
}
This hides columns 2 and 3 on small screens, improving usability.
While SAP-UI5 offers responsive controls out-of-the-box, CSS media queries empower developers to tailor UI appearance and behavior precisely for diverse devices. Combining SAP-UI5’s built-in responsiveness with smart CSS media queries results in robust, adaptive, and user-friendly enterprise applications.
Start integrating media queries today to enhance your SAP-UI5 app’s responsiveness and deliver superior user experiences across devices.