Skip to main content

Module 28: Mobile & Cross-Device SAPUI5

SAPUI5 is designed to run on phones, tablets, and desktops using a single codebase.
However, building a truly good mobile experience requires specific design and performance considerations.

This module covers:

  • Responsive behavior
  • Mobile-specific controls
  • Touch interactions
  • Mobile performance
  • Progressive Web App (PWA) basics

1. Responsive Behavior in SAPUI5​

How UI5 Achieves Responsiveness​

SAPUI5 uses:

  • Responsive controls (sap.m)
  • Flexible layouts
  • CSS media queries (internally)
  • Device model
Key Principle

Responsiveness is built-in, but must be used correctly.

Device Model Usage​

var oDeviceModel = new sap.ui.model.json.JSONModel(sap.ui.Device);
oDeviceModel.setDefaultBindingMode("OneWay");
this.getView().setModel(oDeviceModel, "device");
<Button visible="{device>/system/phone}" />
Best Practice

Use the device model for conditional UI behavior.

2. Mobile-Specific Controls​

Key Mobile Controls (sap.m)​

ControlPurpose
PageScreen container
ListMobile-friendly lists
ActionSheetMobile actions
PullToRefreshData refresh
BarHeader/footer

Example: ActionSheet​

var oActionSheet = new sap.m.ActionSheet({
  buttons: [
    new sap.m.Button({ text: "Approve" }),
    new sap.m.Button({ text: "Reject" })
  ]
});
oActionSheet.openBy(oButton);
UX Rule

Use ActionSheet instead of dialogs on mobile.

3. Touch Events & Gestures​

Touch Interaction Support​

UI5 supports:

  • Tap
  • Swipe
  • Long press (limited)

Swipe Example (List)​

<List items="{/Items}">
  <items>
    <CustomListItem>
      <SwipeContent>
        <Button text="Delete" press="onDelete" />
      </SwipeContent>
    </CustomListItem>
  </items>
</List>
UX Guideline

Gestures should enhance, not replace, core functionality.

4. Performance on Mobile​

Mobile Performance Challenges​

  • Slower CPUs
  • Limited memory
  • Network latency
  • Battery consumption

Mobile Performance Best Practices​

Follow These
  • Minimize initial load
  • Use lazy loading aggressively
  • Avoid heavy tables
  • Limit animations
  • Optimize images

Table Strategy on Mobile​

Avoid

Displaying large datasets on mobile.

Use:

  • Lists
  • Pagination
  • Search-driven access

5. PWA Basics (Progressive Web Apps)​

What is a PWA?​

A PWA:

  • Runs in browser
  • Can be installed
  • Supports offline access (limited)
  • Uses service workers

UI5 & PWA​

UI5 supports PWA via:

  • Manifest configuration
  • Service worker integration
  • Cache strategies

Basic PWA Capabilities​

FeatureUI5 Support
Offline shellPartial
InstallableYes
Push notificationsLimited
Reality Check

UI5 PWAs are best for simple offline scenarios.

6. Mobile UX Best Practices​

Follow These
  • Design mobile-first
  • Use fewer fields
  • Large touch targets
  • Clear navigation
Avoid These
  • Desktop UI on mobile
  • Dense tables
  • Hover-dependent interactions
  • Complex dialogs

7. Cross-Device Strategy​

One Codebase, Multiple Experiences​

UI5 allows:

  • Same app
  • Adaptive behavior
  • Device-aware logic
SAP Advantage

One UI5 app supports multiple device types.

8. Interview-Grade Explanation​

Q: How does SAPUI5 support mobile and cross-device development?

Answer:

SAPUI5 uses responsive controls, flexible layouts, and a device model to adapt UI behavior across phones, tablets, and desktops. Mobile-specific controls and performance optimizations ensure usability, while optional PWA features enable installable and limited offline scenarios.

9. Summary​

  • UI5 is responsive by design
  • sap.m controls are mobile-first
  • Device model enables conditional behavior
  • Touch events enhance UX
  • Mobile performance requires optimization
  • UI5 supports basic PWA features

10. What’s Next?​

➡️ Module 29: UI5 Interview Preparation & Real-World Scenarios

Learning Tip

Mobile users are less patient — optimize aggressively.