Search code examples
sapui5detectmobile-phones

Detect if my application is running on a phone

I'm building an application with SAPUI5.

In this application I have a XML view as follows:

<Dialog id="confirmDialog"
        title="Confirm"
        showHeader="true"
        state="Warning" 
        stretch="true"
        type="Standard">

I want set the property stretch to true ONLY when I detect if my application is running on a phone.

How can i achieve it?

Solution

  • You can create a device model and use its properties to know if the app is running on the phone. See the below link :
    https://help.sap.com/saphelp_uiaddon10/helpdata/en/32/5b8edafcfa4c9c8fbd42455a60e379/content.htm

    EDIT:

    Way 1: If your device model is set up, then you can use it in your code: In Component.js :

    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");

    In XML:

    <Dialog id="confirmDialog"
        title="Confirm"
        showHeader="true"
        state="Warning" 
        stretch="{device>/isPhone}"
        type="Standard">

    Way 2: You can always use : sap.ui.Device.system.phone value if you do not want to create a separate model. However, I would suggest you to create a Device model and use it. 

    <Dialog id="confirmDialog"
            title="Confirm"
            showHeader="true"
            state="Warning" 
            stretch="sap.ui.Device.system.phone"
            type="Standard">