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:

UI5BPoniPadA.jpg

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.

IMG_0736.jpg IMG_0740.jpg

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:

UI5RespDesignDesktop1.jpg

Navigation to another Detail page is done via the Master page, which is then marked as selected:

UI5RespDesignDesktop2.jpg

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:

UI5RespDesignDesktop3.jpg UI5RespDesignDesktop4.jpg

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:

Code1.png

Depending on the device model special behaviour can be implemented per platform, e.g. to realise the back button for the smartphone use case:

Code2.png

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):

UI5BPoniPadB.jpg

Confirm or change the Icon name:

UI5BPoniPadC.jpg

As result you get a new Icon the home screen, with which you can start the web app directly, without typing in the url:

UI5BPoniPadD.jpg

Note: The UI5 Boilerplate should also work for Android and BB10 smartphones (I have not tested it yet).

Additional information

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Sakthivel Elango

    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.

    (0) 
    1. HP Seitz Post author

      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:

      ChromeEmulator.png

      (0) 

Leave a Reply