Detect Orientation Change In SAPUI5

[rauf_shaikh]

Question:

How to detect orientation change in SAPUI5 application and perform some code only if device is in Landscape Mode?

Answer:

"sap.ui.Device.orientation" is Orientation Event Change API. Using this API we can trigger a event where we can perform some actions.

"sap.ui.Device.orientation" has "attachHandler(function,optionalListnere?)" method which gets triggered when registered.So we can perform any event in its definition.

"jQuery.device.is.landscape" is Device API which detects wheter device is in landscape mode or portrain mode.

Example:

Bind List in its views controllers onInit() only if device is in Landscape mode otherwise show a message pop up.

Code:

jQuery.sap.require("sap.m.MessageBox");

var listObject = this.getView().byId("newList");

sap.ui.Device.orientation.attachHandler(function(oEvt){

      if(jQuery.device.is.landscape){

      listObject.unbindAggregation();

      listObject.bindAggregation(

          "items","/LTA_TAB_SET",

                    new sap.m.ColumnListItem({

                      cells : [ new sap.m.Label({

                        text : "{FieldType}"

                      }), new sap.m.Label({

                        text : "{Col1}"

                      }), new sap.m.Label({

                        text : "{Col2}"

                      }),new sap.m.Label({

                        text : "{Col3}"

                      }),

                      new sap.m.Label({

                        text : "{Col4}"

                      })],

               }) );

 }else{

    sap.m.MessageBox.show("Please use this application in Landscape mode.",sap.m.MessageBox.Icon.INFORMATION );

 }

Regards,

Rauf