Enhanced FullScreen Widget, v1.1

File uploaded by slaviesriaustralia-com-au-esridist Employee on Oct 21, 2019Last modified by slaviesriaustralia-com-au-esridist Employee on Oct 21, 2019
Version 3Show Document
  • View in full screen mode



I made a few (simple) adjustments to the full-screen widget that now allows the user to have a complete full-screen and map-focused experience, by hiding all* widgets.


  • The screen will be cleaned of all buttons, which includes the search bar, widgets icons, scale-bar, coordinates, etc.. until the user exits from full-screen mode.
  • The widget hides open widgets as given in a list - currently configured through the code itself (widget.js), as a parameter named "supportedWidgets". It's an array that holds the keywords of the widget name to be closed. I'll consider extracting this setting to a configuration screen with enough demand.
  • Open widgets that are not configured in the list will remain on-screen.
  • The header of the map will not be hidden.
  • The full-screen widget icon will remain on-screen with lower opacity, located at the top left corner, to allow the user to exit full-screen mode. Once the user exists full-screen, the icon will return to its original location with full opacity.


Before -


After -




1. Add the default full-screen widget to your Web AppBuilder application and save.

2. Overwrite the fullscreen folder with the custom code provided.


Bonus feature - Attaching the widget to the F11 key:

Open MapManager.js under the jimu.js folder on the application.

Add the following code inside the "_publishMapEvent" function -


          (e) => {
            if (e.key === "F11") {
              var fs = WidgetManager.getInstance().getWidgetsByName('FullScreen');
              if (fs.length > 0) {
                fs = fs[0];


Happy to receive feedbacks. Quite simple, but hopefully some people will find it usefull.