topic Move the popup window in WAB? in Web AppBuilder Custom Widgets Questions

Move the popup window in WAB?

CarolinaAguilar_Aravena — Wed, 27 Nov 2019 15:50:31 GMT

I need a code that allows moving the pop-up window, since when viewing the map this window covers the layers of the map. I need this to better the user experience assistance. I use the code of How To: Enable drag function on an infoWindow pop-up in Web AppBuilder for ArcGIS but generate this error.

Re: Move the popup window in WAB?

RobertScheitlin__GISP — Mon, 02 Dec 2019 13:32:15 GMT

Carolina,

Sounds like you have something missing or out of order in the define array (step 2 in the instructions).

Re: Move the popup window in WAB?

CarolinaAguilar_Aravena — Mon, 02 Dec 2019 13:55:19 GMT

Do you know how I can solve this error?

Re: Move the popup window in WAB?

RobertScheitlin__GISP — Mon, 02 Dec 2019 14:13:25 GMT

Not without seeing your code change, were I can identify your mistake.

Re: Move the popup window in WAB?

CarolinaAguilar_Aravena — Mon, 02 Dec 2019 14:18:59 GMT

The modifications of the code that generated this error were those shown in the following link: How To: Enable drag function on an infoWindow pop-up in Web AppBuilder for ArcGIS in step 2 and 3, these generate the message presented, of the function "Moveable"

Re: Move the popup window in WAB?

RobertScheitlin__GISP — Mon, 02 Dec 2019 14:48:56 GMT

Carolina,

That is the problem. When those modification are done properly they do Not produce an error. So you are likely make a standard beginners error and adding the new define and making the vars that are linked with those defines out of order.

Re: Move the popup window in WAB?

CarolinaAguilar_Aravena — Mon, 02 Dec 2019 14:52:03 GMT

Could you help me solve it? What part of code do you need to see what the error is?

Re: Move the popup window in WAB?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:36:28 GMT

Carolina,

The utils.js that step 2 tells you to modify, should look like this.

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',
    'moment/moment',
    'esri/arcgis/utils',
    'esri/dijit/PopupTemplate',
    'esri/SpatialReference',
    'esri/geometry/Extent',
    'esri/geometry/geometryEngine',
    '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',
    'esri/IdentityManager',
    'esri/arcgis/OAuthInfo',
    'jimu/portalUrlUtils',
    './shared/utils',
    './accessibleUtils',
    './zoomToUtils',
    'dojo/dnd/Moveable',
    'dojo/dom-class',
    'libs/caja-html-sanitizer-minified'
  ],

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

Re: Move the popup window in WAB?

CarolinaAguilar_Aravena — Mon, 02 Dec 2019 16:14:48 GMT

I thought my code was the same as yours, but I copy your code and it worked and my problem was solved. Thanks

Re: Move the popup window in WAB?

ЭрикНазаров — Wed, 13 Oct 2021 10:18:13 GMT

Hello! Please help me! I did everything in accordance with these recommendations, but still nothing comes out. In the file "utils.js "there is no "mo.createwebapp", there is only "e.create a web map." I also changed it there and nothing worked out.

Re: Move the popup window in WAB?

ЭрикНазаров — Wed, 13 Oct 2021 11:44:27 GMT

Can you please send the file "utils.js "?

Re: Move the popup window in WAB?

imranrajjad_cc — Fri, 07 Oct 2022 06:36:55 GMT

For anyone trying to do this on Portal that came with 10.8.1

open the file: [Portal Instllation Folder]\apps\webappviewer\jimu.js

Look for a function

y.createWebMap = function(a, c, b, g) {
a = U.getStandardPortalUrl(a);
a = U.getBaseItemUrl(a);
C.arcgisUrl = a;
return C.createMap(c, b, g)
}

You may need to prettify the file

Replace with:

y.createWebMap = function(a, c, b, g) {
a = U.getStandardPortalUrl(a);
a = U.getBaseItemUrl(a);
C.arcgisUrl = a;

def=C.createMap(c, b, g)
def.then(function (response){
var map = response.map;
var handle = dojo.query(".title", map.infoWindow.domNode)[0];
var dnd = new dojo.dnd.Moveable(map.infoWindow.domNode, {
handle: handle
});
});
return def;

//return C.createMap(c, b, g)
}

For CSS changes, I wanted to do in the FoldableTheme (You may change for theme you are working on).

Open file [Portal Instllation Folder]\apps\webappviewer\themes\FoldableTheme\common.css

Add this at the bottom

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

.jimu-link {
opacity: 0.8;
}

.esriPopupWrapper .title{
cursor: move;
}

Re: Move the popup window in WAB?

HelenWhiteley_tfl — Fri, 15 Dec 2023 16:25:18 GMT

I used the advice from https://support.esri.com/en-us/knowledge-base/000015175 to successfully make pop ups moveable. Unfortunately, before I could document my process, ESRI have removed the page! (404 error) Does anyone have a copy of what was in the page, or know how to successfully contact ESRI to request the page is reinstated?

Thanks