Full screen mode with panelSplitters

We had a use case in which the input form needed to have a full screen button. This is accomplished with the help of panelSplitters and javascript. In this example I’ll show how you can create a button that will execute javascript to render the input form in full screen. The page looks like this:

We used 3 panelSplitters in the page setup, in the center is the input area, the other area’s are for menus, helptext, etc. On the top of the center area we have a button bar with several buttons including the full screen button. The button has an clientListener on it to call the javascript:

The javascript code is as followed:

function toggleFullScreenMode(actionEvent)
{
   actionEvent.cancel();
   var panelSplitter1 = actionEvent.getSource().findComponent('::ps1');
   var panelSplitter2 = actionEvent.getSource().findComponent('::ps2');
   var panelSplitter3 = actionEvent.getSource().findComponent('::ps3');
             
   var newMode = !panelSplitter1.getCollapsed() || !panelSplitter2.getCollapsed() || !panelSplitter2.getCollapsed();

   panelSplitter1.setCollapsed(newMode);
   panelSplitter2.setCollapsed(newMode);
   panelSplitter3.setCollapsed(newMode);
}

Now if you click the button, all the panelSplitters will collapse, if you click it again, they will show again.

I’m sad to say the Oracle Cloud Trial expired, so no live demo application this time.