Responsive Design of UI5 SplitApp
This post shows the Responsive Design feature of UI5 SplitApp (sap.m.SplitApp) respectively SplitContainer.
It is both valid for OpenUI5 and SAPUI5. I will demonstrate this awesome feature with the UI5 Boilerplate (…what else? of course 😉 ) on different devices (iPhone and iPad) and with Chrome (desktop use case).
You can also try this yourself with your iPhone, iPad by simply browsing the UI5 Boilerplate Demo Site: UI5 Boilerplate SplitApp
or you check out the source code form the GitHub Repo: 6of5/UI5SplitApp-Boilerplate · GitHub
Ok let’s start from big to small:
Case 1: iPad – Master and Detail
On an iPad or tablet the SplitApp shows both the Master and Detail page (right part) and the same time:
Case 2: iPhone – Master or Detail
On an smartphone the behaviour is different. There only the Master or Detail page is shown at a time. On Detail pages additionally a back button is displayed on the left upper corner to be able to navigate back to the Master page.
Case 3: Desktop – it depends!
In the browser (Chrome, Firefox, Safari or IE9+) the design depends on the available size of the browser window. When there is enough space both Master and Detail page are shown:
Navigation to another Detail page is done via the Master page, which is then marked as selected:
But if you resize the window and make it smaller the layout/design is changed. Only the Detail page is shown and you got additionally a icon in the upper left corner to open the Master page as a popover to be able to navigate to other Detail pages:
What do you need to do to realise Responsive Design?
Not much, the SplitContainer is doing most of the magic out of the box. Fantastic, or!?!!!
Behaviour which is special for a use case needs to be implemented individually and tested!.
To support different platforms, it is common, to introduce a device model in the app:
Depending on the device model special behaviour can be implemented per platform, e.g. to realise the back button for the smartphone use case:
Have a look in the UI5 boilerplate source code for all details, it is available on GitHub: 6of5/UI5SplitApp-Boilerplate · GitHub
Create a App Icon on the home screen!
You can also make a nice Icon for this Web App on the home screen. Following the steps on the iPad, on the iPhone it should be pretty much the same. First press the share button (sorry screenshot are in german):
Confirm or change the Icon name:
As result you get a new Icon the home screen, with which you can start the web app directly, without typing in the url:
Note: The UI5 Boilerplate should also work for Android and BB10 smartphones (I have not tested it yet).
Is it required for us to set the splitApp mode specific to devices ? I guess, UI5 itself handles it 🙂 How App works on mobile can be tested by adding data-sap-ui-xx-fakeOS='ios' in bootstrap script or in the runtime by adding this to the end of the app URL.
In the boilerplate the splitApp mode is not specified, so what you see is the default behaviour of UI5 on the different platforms (smartphone, tablet, desktop). Instead of using this url parameter, I would recommend you using the emulation mode of Chrome developer tools: