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...?

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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to Make Pop-up Draggable

mpboyle

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...?

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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):

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

<SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> has<SPAN class="punctuation token">,</SPAN> config<SPAN class="punctuation token">,</SPAN> ioQuery<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> nlt<SPAN class="punctuation token">,</SPAN> Deferred<SPAN class="punctuation token">,</SPAN> all<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> json<SPAN class="punctuation token">,</SPAN> cookie<SPAN class="punctuation token">,</SPAN>
&nbsp; dojoNumber<SPAN class="punctuation token">,</SPAN> dateLocale<SPAN class="punctuation token">,</SPAN> nlsBundle<SPAN class="punctuation token">,</SPAN> base64<SPAN class="punctuation token">,</SPAN> esriLang<SPAN class="punctuation token">,</SPAN> arcgisUtils<SPAN class="punctuation token">,</SPAN> PopupTemplate<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
&nbsp; Extent<SPAN class="punctuation token">,</SPAN> Multipoint<SPAN class="punctuation token">,</SPAN> Polyline<SPAN class="punctuation token">,</SPAN> Polygon<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN> GeometryService<SPAN class="punctuation token">,</SPAN> ProjectParameters<SPAN class="punctuation token">,</SPAN> FeatureSet<SPAN class="punctuation token">,</SPAN>
&nbsp; PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> esriUrlUtils<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> EsriQuery<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> graphicsUtils<SPAN class="punctuation token">,</SPAN> portalUrlUtils<SPAN class="punctuation token">,</SPAN> sharedUtils<SPAN class="punctuation token">,</SPAN>
&nbsp; Moveable<SPAN class="punctuation token">,</SPAN> domClass
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and the mo.createWebMap function:

&nbsp; mo<SPAN class="punctuation token">.</SPAN>createWebMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">,</SPAN> itemId<SPAN class="punctuation token">,</SPAN> mapDiv<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">/* optional */</SPAN> options<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//var arcgisUrlOld = arcgisUtils.arcgisUrl;</SPAN>
&nbsp;&nbsp;&nbsp; portalUrl <SPAN class="operator token">=</SPAN> portalUrlUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getStandardPortalUrl</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> itemUrl <SPAN class="operator token">=</SPAN> portalUrlUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getBaseItemUrl</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; arcgisUtils<SPAN class="punctuation token">.</SPAN>arcgisUrl <SPAN class="operator token">=</SPAN> itemUrl<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> def <SPAN class="operator token">=</SPAN> arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createMap</SPAN><SPAN class="punctuation token">(</SPAN>itemId<SPAN class="punctuation token">,</SPAN> mapDiv<SPAN class="punctuation token">,</SPAN> options<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; def<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> handle <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".title"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> dnd <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Moveable</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handle<SPAN class="punctuation token">:</SPAN> handle
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> def<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and the common.css for Foldable theme:

<SPAN class="atrule token"><SPAN class="rule token">@import</SPAN> <SPAN class="url token">url("panels/FoldablePanel/style.css")</SPAN><SPAN class="punctuation token">;</SPAN></SPAN>
<SPAN class="atrule token"><SPAN class="rule token">@import</SPAN> <SPAN class="url token">url("panels/DockablePanel/style.css")</SPAN><SPAN class="punctuation token">;</SPAN></SPAN>
<SPAN class="comment token">/********** styles for simple panel***********/</SPAN>
<SPAN class="selector token">.jimu-simple-panel</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">-moz-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">-webkit-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.esriPopupWrapper .title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> move<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

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.

RichBell

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

mpboyle

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

Thanks!

RobertScheitlin__GISP

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):

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

<SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> has<SPAN class="punctuation token">,</SPAN> config<SPAN class="punctuation token">,</SPAN> ioQuery<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> nlt<SPAN class="punctuation token">,</SPAN> Deferred<SPAN class="punctuation token">,</SPAN> all<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> json<SPAN class="punctuation token">,</SPAN> cookie<SPAN class="punctuation token">,</SPAN>
&nbsp; dojoNumber<SPAN class="punctuation token">,</SPAN> dateLocale<SPAN class="punctuation token">,</SPAN> nlsBundle<SPAN class="punctuation token">,</SPAN> base64<SPAN class="punctuation token">,</SPAN> esriLang<SPAN class="punctuation token">,</SPAN> arcgisUtils<SPAN class="punctuation token">,</SPAN> PopupTemplate<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN>
&nbsp; Extent<SPAN class="punctuation token">,</SPAN> Multipoint<SPAN class="punctuation token">,</SPAN> Polyline<SPAN class="punctuation token">,</SPAN> Polygon<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN> GeometryService<SPAN class="punctuation token">,</SPAN> ProjectParameters<SPAN class="punctuation token">,</SPAN> FeatureSet<SPAN class="punctuation token">,</SPAN>
&nbsp; PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> esriUrlUtils<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> EsriQuery<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> graphicsUtils<SPAN class="punctuation token">,</SPAN> portalUrlUtils<SPAN class="punctuation token">,</SPAN> sharedUtils<SPAN class="punctuation token">,</SPAN>
&nbsp; Moveable<SPAN class="punctuation token">,</SPAN> domClass
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and the mo.createWebMap function:

&nbsp; mo<SPAN class="punctuation token">.</SPAN>createWebMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">,</SPAN> itemId<SPAN class="punctuation token">,</SPAN> mapDiv<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">/* optional */</SPAN> options<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//var arcgisUrlOld = arcgisUtils.arcgisUrl;</SPAN>
&nbsp;&nbsp;&nbsp; portalUrl <SPAN class="operator token">=</SPAN> portalUrlUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getStandardPortalUrl</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> itemUrl <SPAN class="operator token">=</SPAN> portalUrlUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getBaseItemUrl</SPAN><SPAN class="punctuation token">(</SPAN>portalUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; arcgisUtils<SPAN class="punctuation token">.</SPAN>arcgisUrl <SPAN class="operator token">=</SPAN> itemUrl<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> def <SPAN class="operator token">=</SPAN> arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createMap</SPAN><SPAN class="punctuation token">(</SPAN>itemId<SPAN class="punctuation token">,</SPAN> mapDiv<SPAN class="punctuation token">,</SPAN> options<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; def<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> handle <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".title"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> dnd <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Moveable</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handle<SPAN class="punctuation token">:</SPAN> handle
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> def<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and the common.css for Foldable theme:

<SPAN class="atrule token"><SPAN class="rule token">@import</SPAN> <SPAN class="url token">url("panels/FoldablePanel/style.css")</SPAN><SPAN class="punctuation token">;</SPAN></SPAN>
<SPAN class="atrule token"><SPAN class="rule token">@import</SPAN> <SPAN class="url token">url("panels/DockablePanel/style.css")</SPAN><SPAN class="punctuation token">;</SPAN></SPAN>
<SPAN class="comment token">/********** styles for simple panel***********/</SPAN>
<SPAN class="selector token">.jimu-simple-panel</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">-moz-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">-webkit-border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.esriPopupWrapper .title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> move<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.