Show TOC

Step 5: Device ModelLocate this document in the navigation structure

Before we get to the App view, there are a couple of other areas to cover. The first is the Device Model that we saw briefly in the Component section.

As a reminder, this is what it looks like:

       // set device model
        var deviceModel = new sap.ui.model.json.JSONModel({
            isTouch : sap.ui.Device.support.touch,
            isNoTouch : !sap.ui.Device.support.touch,
            isPhone : sap.ui.Device.system.phone,
            isNoPhone : !sap.ui.Device.system.phone,
            listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
            listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
        });
        deviceModel.setDefaultBindingMode("OneWay");
        this.setModel(deviceModel, "device");

Using the sap.ui.Device library, various runtime platform characteristics are determined, and stored in a client side JSON model. The properties in this model follow a standard pattern; it's advisable to use the same properties, even if you aren't going to utilise all of them. Here's a table showing which properties are used where in our demo app.

Property Description Usage
isTouch The device has touch support nowhere in this particular app
isNoTouch Opposite of isTouch, for opposite declarative boolean usage Master.view.xml, to show a refresh button on the SearchField if the device doesn't have touch support
isPhone The device is a smartphone Detail.view.xml, to control whether the Page's navButton is displayed or not (only when the device is a smartphone)
isNoPhone Opposite of isPhone, for opposite declarative boolean usage nowhere in this particular app
listMode Setting the selection mode of a List control Master.view.xml, to have the List in SingleSelectMaster mode unless the device is a phone
listItemType Setting the type of each item in a List control's item aggregation Master.view.xml, to have the type of each List item (ObjectListItem controls) set to Active if the device is a phone (otherwise Inactive)

The List's mode property and the ObjectListItem's type property are similar and control how items are selectable. On a smartphone the selection should be via the item (listMode "None", listItemType "Active"), otherwise it should be via the List itself (listMode "SingleSelectMaster", listItemType "Inactive").The Device Model is a JSON client side model, and should be set with a One Way binding mode. This is to prevent unintentional modification of the detected device type and support when control properties are changed through UI use. Also, the recommendation is always to use "device" for the name of this named model.

Progress Check

There is no further progress beyond the previous section; this Device Model is part of the Component, which we already have. While the information in the Device Model influences visual aspects of our app, these will be apparent in other sections.