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:
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...?
Solved! Go to Solution.
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;
}
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;
}
Forgot to add Moveable
and domClass
as parameters to the function list, as shown on line 47 in the first screenshot!
Thanks!
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
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.