Select to view content in your preferred language

Enhanced FullScreen Widget, v1.1

10-21-2019 07:09 PM

Enhanced FullScreen Widget, v1.1


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.



Esri Contributor

Hi Shay Lavi‌, 

this is nice. 

Version history
Last update:
‎12-12-2021 03:43 AM
Updated by: