Search code examples
javascriptxmlsapui5

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;
    }
}

Solution

  • 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;
        }
    }