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_member204682 · Accepted solution]

Here is what I do to implement a FullScreen button:

this._fullScreen = false;
  this._oFullScreenButton = new sap.m.Button({
  icon: "sap-icon://full-screen",
  type: sap.m.ButtonType.Transparent,
  press: jQuery.proxy(this.toggleFullScreen, this)
  });
// Add the fullScreen toggle button to view custom header
  this.getView().byId("pageS3").getCustomHeader().addContentRight(this._oFullScreenButton);




toggleFullScreen: function() {
  if (this._fullScreen) {
  this._closeFullScreen();
  this._fullScreen = false;
  } else {
  this._openFullScreen();
  this._fullScreen = true;
  }
  var sIcon = (this._fullScreen ? "sap-icon://exit-full-screen" : "sap-icon://full-screen");
  this._oFullScreenButton.setIcon(sIcon);
  },


  _openFullScreen: function() {
  var s2Controller = this.oApplicationFacade.getApplicationModel("sharedData").getData().s2Controller;
  var masterPage = s2Controller.byId("page").getParent().getParent().$();
  masterPage.css({
  display: "none"
  });
  },


  _closeFullScreen: function() {
  var s2Controller = this.oApplicationFacade.getApplicationModel("sharedData").getData().s2Controller;
  var masterPage = s2Controller.byId("page").getParent().getParent().$();
  masterPage.css({
  display: ""
  });
  },