Question Re: How to Implement a Full Screen Button in View Header? in Technology Q&A

How to Implement a Full Screen Button in View Header?

former_member204682 — Wed, 01 Jul 2015 03:20:51 GMT

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.ChartContainer/preview

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

thanks,

Yang

Re: How to Implement a Full Screen Button in View Header?

former_member204682 — Wed, 01 Jul 2015 04:11:38 GMT

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

Re: How to Implement a Full Screen Button in View Header?

former_member182372 — Wed, 01 Jul 2015 06:41:45 GMT

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

Re: How to Implement a Full Screen Button in View Header?

Former Member — Wed, 01 Jul 2015 06:54:48 GMT

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

Re: How to Implement a Full Screen Button in View Header?

former_member204682 — Thu, 02 Jul 2015 02:13:31 GMT

, , 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

Re: How to Implement a Full Screen Button in View Header?

Former Member — Fri, 03 Jul 2015 10:19:55 GMT

Yang Wang,

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

Regards,

Dominik

Re: How to Implement a Full Screen Button in View Header?

former_member204682 — Mon, 06 Jul 2015 02:04:44 GMT

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

Re: How to Implement a Full Screen Button in View Header?

former_member204682 — Mon, 06 Jul 2015 02:07:11 GMT

yeah, I did that.

Thank you, Dominik!

Regards,

Yang

Re: How to Implement a Full Screen Button in View Header?

former_member446403 — Fri, 06 Nov 2015 10:49:24 GMT

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.