How to Implement a Full Screen Button in View Header?

[former_member204682]

In SAPUI5 demokit, I found there is a full screen button for chartContainer. Also in a explored example, the detail header has a full screen button as well.

see https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.suite.ui.commons.sample.ChartContaine...

I would like to implement such a full screen button in header of my detail view. But How to implement it?

thanks,

Yang

[former_member446403]

Hi,

I needed to implement the same toggle full screen button in my project, Maksim Rashchynski's answer helped me figure out a simpler way if anyone's interested:

button in XML view

<Button id="btnFullScreen" icon="sap-icon://full-screen" tooltip="Show in full screen mode" press="toggleFullScreen" />

function in controller

toggleFullScreen : function(oEvent) {
  var id = oEvent.getSource().sId; 
  var cid = this.getView().byId(id);
  var spapp = sap.ui.getCore().byId('appId');
  if(spapp.getMode() == "ShowHideMode"){
  spapp.setMode('HideMode');
  cid.setIcon('sap-icon://exit-full-screen').setTooltip('Show in full screen mode');
  }else{
  spapp.setMode('ShowHideMode'); 
  cid.setIcon('sap-icon://full-screen').setTooltip('Exit from full screen mode');
  }
  },

Ty.