CODEWITHSUNDEEP
javascriptxmlsapui5
omy holw
omy holw

Reputation: 41

UI5 screen size dependent properties of XML

Is it possible in UI5 to get any behavior like screen size dependent properties for xml?

I got a table with a few columns:

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="Begin">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

The alignment of content for column 2 is left (hAlign="Begin"). But on smartphone, where column3 is not visible due to the minScreenWidth="Tablet" it looks not very well. So what I want to do is changing the property of column2 to hAlign="End" when viewed on smartphone. How can I achieve this?

I added following line of Code to my controller: sap.ui.Device.media.attachHandler(this.fnSizeChange, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD);

But in the method fnSizeChange I am unable to retrieve the View.. this.byId("column"); ends in an error 'byId is not a function' because this does not refer to something named 'window'. Also this.getView().byId("column"); is not working.

fnSizeChange: function (mParams){
    switch(mParams.name){
        case "Phone":
            this.byId("column").setHAlign("End");  // NOT working
            this.getView().byId("column").setHAlign("End"); //NOT working either
            break;
        case "Tablet":
            this.byId("column").setHAlign("Begin");
            break;
        case "Desktop":
            this.byId("column").setHAlign("Begin");
            break;
    }
}

Upvotes: 0

Views: 2329

Answers (3)

omy holw
omy holw

Reputation: 41

I solved this now by adding an event hangler for sap.ui.Device.mediain my onInit function like this:

sap.ui.Device.media.attachHandler(
    this.reactResponsive,
    this,
    sap.ui.Device.media.RANGESETS.SAP_STANDARD
);

The problem was that I could not get the right context in the event handler. This was because I did not pass this as second parameter in the attachHandler() method.

After changing this I could access the whole thing without problems:

reactResponsive: function (oEvent) {
    switch (oEvent.name) {
        case "Phone":
            this.byId("crit").setHAlign("End");
            this.getView().byId("crit").setHAlign("End");
            break;
        case "Tablet":
            this.byId("crit").setHAlign("Begin");
            break;
        case "Desktop":
            this.byId("crit").setHAlign("Begin");
            break;
    }
}

Upvotes: 2

Inizio
Inizio

Reputation: 2256

You can achieve it by setting device model

XML view

<Table>
  <columns>
    <Column hAlign="{device>/isPhone}">
      <Text text="Amount" />
    </Column>

Controller

onInit: function() {
    // set device model
    var oDeviceModel = new sap.ui.model.json.JSONModel({ 
      'isPhone' : (sap.ui.Device.system.phone) ? "End" : "Begin"
    });
    oDeviceModel.setDefaultBindingMode("OneWay");
    this.getView().setModel(oDeviceModel, "device");
},

You can add complete device properties to the model, make the changes as per your requirement.

Upvotes: -1

dotchuZ
dotchuZ

Reputation: 2651

Use device dependent attributes and expression binding https://help.sap.com/saphelp_ewm94/helpdata/de/8d/bd35e1577b445d8077b2bc6ad8b958/frameset.htm https://sapui5.hana.ondemand.com/#/topic/c98d57347ba444c6945f596584d2db45.html

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="{= ${device>/system/phone} === true ? 'End' : 'Begin' }">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

or formatter function (view):

<table>
   <columns>
       <column id="column1">
       </column>
       <column id="column2" hAlign="{
                    path: '',
                    formatter: '.formatter.yourFormatter'
                }">
       </column>
       <column id="column3" minScreenWidth="Tablet">
       </column>
   <columns>
[...]
</table>

formatter.js

sap.ui.define([
    "sap/ui/Device",
], function (Device) {
    "use strict";
    return {
        yourFormatter: function (sValue) {
            console.log(Device);
            var sReturn = "";
            switch (Device.system) {
            case "phone": // desktop, phone, tablet, combi
                sReturn = "sap.ui.core.HorizontalAlign.End"; // maybe only "End" not sure right now
                break;
            default:
                sReturn = "sap.ui.core.HorizontalAlign.Begin"; // maybe only "Begin" not sure right now
                break;
            }
            return sReturn;
        }
    };

});

Upvotes: 1

Related Questions