How to Make Pop-up Draggable

1341
4
Jump to solution
11-17-2017 02:18 PM
Highlighted
Regular Contributor

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:

  1. It seems to be geared towards the Launchpad theme, so I'm not sure if it applies to other themes
  2. 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...?

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

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;
}

View solution in original post

4 Replies
Highlighted
MVP Esteemed Contributor

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;
}

View solution in original post

Highlighted
Regular Contributor

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

Thanks!

Reply
0 Kudos
Highlighted
Occasional Contributor

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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.

Reply
0 Kudos