How To: Enable drag function on an infoWindow pop-up in Web AppBuilder for ArcGIS

Summary

When users click a feature on a web map, the infoWindow pop-up is set to open on the same position as the pointer, and the pop-up window is immovable. This behavior is by design. However, this can sometimes block other features and disrupt the view.

The instructions provided describe how to make the pop-up window in Web AppBuilder for ArcGIS moveable by dragging the window using the mouse cursor.

Note: 
These instructions are specific to the Launchpad Theme. To use other themes, update the paths to the common.css and style.css files.

Procedure

Use the following steps to enable the drag function on pop-up windows by utilizing the designated Dojo toolkit. Edits are required to the two basic files in Web AppBuilder for ArcGIS:

the common.css file residing in: [app install]\server\apps\[app#]\themes\LaunchpadTheme
the utils.js file in: [app install]\server\apps\[app#]\jimu.js

Edit the common.css file to insert the move property to the cursor. The following code snippet demonstrates how to change the cursor pointer into a move cursor to indicate a movable panel.

@import url("panels/LaunchpadPanel/style.css");    
.esriPopupWrapper .title {  
    cursor: move;  
}  
.esriPopup .hidden {  
    display: none !important;
}

In the utils.js file, define the designated dojo toolkit at the beginning of the code. The define property must have the following dojo definition.

define([
    ...
    'dojo/dnd/Moveable',
    'dojo/dom-class',
    ...
  ],

function([
    ...,
    Moveable,
    domClass,
    ...) {}). 
    ... 
  ],

In the same utils.js file, find the mo.createWebMap code section, and edit the code section to incorporate the added dojo properties set in step 2. The following code snippet demonstrates how the code looks upon editing.

mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) 
{  
    portalUrl = portalUrlUtils.getStandardPortalUrl(portalUrl);  
    var itemUrl = portalUrlUtils.getBaseItemUrl(portalUrl);  
    arcgisUtils.arcgisUrl = itemUrl;  
    var def = arcgisUtils.createMap(itemId, mapDiv, options);  
    def.then(function (response){  
        var map = response.map;  
        var handle = query(".title", map.infoWindow.domNode)[0];  
        var dnd = new Moveable(map.infoWindow.domNode, {  
            handle: handle  
        });  
    });  
     return def;  
  };

Related Information

Last Published: 12/29/2022

Article ID: 000015175

Software: ArcGIS Web AppBuilder Current