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: ""
  });
  },

[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.

[former_member204682]

, , thank you for your replies!

Unfortunately, I am not using sap.m.SplitApp, but sap.ca.scfld.md.controller. However, I figured out how to hide/show master page when toggles the fullscreen button via javascript.

thank you guys for the hints!

Regards,

Yang

[Former Member]

Yang Wang,

Please share your code for other users and mark the question as solved.

Regards,

Dominik

[former_member204682]

yeah, I did that.

Thank you, Dominik!

Regards,

Yang

[former_member204682]

Or put this in a simple way - how to implement a fullscreen toggle for a view, like detail view

[former_member182372]

Dude! ctri+shift+i, go to sources, find a source

[Former Member]

Hello Yang,

in your example, the property showFullScreen seems to be specific to sap.suite.ui.commons.sample.ChartContainer.

I suppose you use a sap.m.SplitApp as you referred to a detail view which you want to display full screen. So one option for you would be implementing a button which toggles your SplitApp. See SAPUI5 SDK - Demo Kit - Split App for methods you can use.

You could use hideMaster() and showMaster() to toggle.

Regards

Dominik