topic Re: How to Make Pop-up Draggable in ArcGIS Web AppBuilder Questions

How to Make Pop-up Draggable

mpboyle — Fri, 17 Nov 2017 22:18:07 GMT

Is there a way to make a pop-up within a WAB developer edition app draggable / movable? Some of our users find it inconvenient that the pop-up in most cases covers the selected feature.

I found this technical article which appears to address the issue, but I noticed two things:

It seems to be geared towards the Launchpad theme, so I'm not sure if it applies to other themes
It seems to have been written for WAB 1.x

I tried implementing these into a 2.x app with the Foldable theme and my app would no longer load.

Based on the above technical article, I'm guessing that making a pop-up draggable / movable is possible and am wondering if anyone has been successful in doing this...?

Re: How to Make Pop-up Draggable

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:03:26 GMT

Matthew,

I just tested this in WAB 2.6 and it works fine. So you must be messing something up in the utils.js syntax.

Here is my code placement.

(lines 39-40 and 47):

define([
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/_base/sniff',
    'dojo/_base/config',
    'dojo/io-query',
    'dojo/query',
    'dojo/NodeList-traverse',
    'dojo/Deferred',
    'dojo/promise/all',
    'dojo/on',
    'dojo/json',
    'dojo/cookie',
    'dojo/number',
    'dojo/date/locale',
    'dojo/i18n!dojo/cldr/nls/number',
    'dojox/encoding/base64',
    'esri/lang',
    'esri/arcgis/utils',
    'esri/dijit/PopupTemplate',
    'esri/SpatialReference',
    'esri/geometry/Extent',
    'esri/geometry/Multipoint',
    'esri/geometry/Polyline',
    'esri/geometry/Polygon',
    'esri/geometry/webMercatorUtils',
    'esri/tasks/GeometryService',
    'esri/tasks/ProjectParameters',
    'esri/tasks/FeatureSet',
    'esri/symbols/PictureMarkerSymbol',
    'esri/urlUtils',
    'esri/request',
    'esri/tasks/query',
    'esri/tasks/QueryTask',
    'esri/graphicsUtils',
    'jimu/portalUrlUtils',
    './shared/utils',
    'dojo/dnd/Moveable',
    'dojo/dom-class'
  ],

function(lang, array, html, has, config, ioQuery, query, nlt, Deferred, all, on, json, cookie,
  dojoNumber, dateLocale, nlsBundle, base64, esriLang, arcgisUtils, PopupTemplate, SpatialReference,
  Extent, Multipoint, Polyline, Polygon, webMercatorUtils, GeometryService, ProjectParameters, FeatureSet,
  PictureMarkerSymbol, esriUrlUtils, esriRequest, EsriQuery, QueryTask, graphicsUtils, portalUrlUtils, sharedUtils,
  Moveable, domClass
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and the mo.createWebMap function:

  mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) {
    //var arcgisUrlOld = arcgisUtils.arcgisUrl;
    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;
  };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and the common.css for Foldable theme:

@import url("panels/FoldablePanel/style.css");
@import url("panels/DockablePanel/style.css");
/********** styles for simple panel***********/
.jimu-simple-panel{
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.esriPopupWrapper .title {
  cursor: move;
}‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to Make Pop-up Draggable

mpboyle — Mon, 20 Nov 2017 15:43:51 GMT

Forgot to add Moveable and domClass as parameters to the function list, as shown on line 47 in the first screenshot!

Thanks!

Re: How to Make Pop-up Draggable

RichBell — Mon, 20 Nov 2017 18:22:32 GMT

This code works to make a popup moveable, but I wish to make the Attribute Popup of the EDIT widget also moveable.

How would I accomplish this? The code you provided does not seem to work for the Edit Widget Attribute Info table popup.????

Richard

Re: How to Make Pop-up Draggable

RobertScheitlin__GISP — Tue, 21 Nov 2017 03:57:38 GMT

Richard,

That is a different matter altogether as the edit widget creates it's own popup in code separate from the standard popup. Start a new question and can help you with this.