SAPUI5 for enriched user experience | Sapours Technologies Pvt. Ltd.

Using SAPUI5 Layouts and Floorplans

A great user experience is all about helping users achieve their goals with smartest and easiest possible way without bothering them about underneath infrastructure. It is all about making an existing system more user friendly, keeping users requirement at center stage.

SAP Fiori design guidelines provides clear guidance on how to enhance user experience and SAPUI5 supports implementation of these guidelines by providing vast set of controls.

SAPUI5 Layouts

The most important point before selecting a Layout is the use case of that application:

Full Screen app: sap.m.App: makes use entire screen.
Split Screen app: sap.m.SplitApp: divides page in master and detail screens.

Important tip: Avoid combining Full Screen and Split Screen in a same app.

Full Screen App

This layout gives us leverage of using entire screen to display graphics/charts/multiple tables with more number of table rows.

In this App, root control is sap.m.App. This app can hold multiple pages with embedded views. We can use routing configuration to route between these pages. There is only one scrollable area for this app.

Responsiveness is not out of the box supported. We must add controls and implement it.

Example of this kind of app is Worklist app:

Structure:

App view :

Worklist View:

Here we use sap.m.semantic.FullscreenPage to handle overflow handling for header and footer area. We then add a Table control to this page and bind it with our Odata service.

The final Worklist app looks like:

Split Screen App

SAP Fiori master-detail floorplan makes use of the Split Screen concept. There are 2 content areas under same app, which interacts with each other in a predefined way. Both the areas have separate header and footer bars where we can add our controls.

This kind of apps are responsive, they will adjust automatically with the screen size. However, we need to handle responsiveness for some controls separately.