topic Re: Move the popup widow in WAB in ArcGIS Web AppBuilder Questions

Move the popup widow in WAB

GeorgeKatsambas — Tue, 30 Jun 2015 14:22:14 GMT

Is there a way to change the position of the popup window, or drag it with your mouse out of the way. As it is now the popup window open where you click and you cant move it at all. I know in Flex you could move it with the mouse.

Re: Move the popup widow in WAB

StanMcShinsky — Tue, 30 Jun 2015 14:35:31 GMT

George,

As of right now there is not a way to move the popup. I agree that this would be very helpful. Here is a thread that talks a little about this. You may find it helpful/interesting.

How do I edit pop-up size and location?

-Stan

Re: Move the popup widow in WAB

NathanielRoth — Thu, 13 Aug 2015 15:59:52 GMT

Just checking in... Has the recent release changed our ability to modify the defaults on popup window placement? I'm not concerned about size in this case, more about being able to back the popup off from the highlighted feature a bit.

Re: Move the popup widow in WAB

BrandonKeinath1 — Thu, 13 Aug 2015 16:02:45 GMT

An excellent question. I don't know the answer but it is possible to change the pop-up size if you're curious.

Re: Move the popup widow in WAB

NathanielRoth — Fri, 14 Aug 2015 17:00:44 GMT

Thank, but I'm comfortable with the default behavior for the popup size (and that's relatively easy to change once you find the settings). I'd just like to change the distance from the clicked point from 16pixels to ~40-60pixels. Having over written the default selection highlight, I'd actually be happy to turn off the leader too.

Re: Move the popup widow in WAB

Anonymous User — Tue, 12 Jan 2016 15:09:59 GMT

Found this idea on Ideas site. I'm voting it up for sure!

http://ideas.arcgis.com/ideaView?id=087E0000000CxFeIAK#sthash.Os2r5ajs

and this one: http://ideas.arcgis.com/ideaView?id=087E00000004Q0GIAU#sthash.71gGAGao

Re: Move the popup widow in WAB

RebeccaStrauch__GISP — Tue, 12 Jan 2016 15:23:15 GMT

It looks like the first one you listed is a duplicate and should be merged with the second link. That one s under consideration ..yea ...

Re: Move the popup widow in WAB

Anonymous User — Tue, 12 Jan 2016 15:25:56 GMT

Agreed.

Re: Move the popup widow in WAB

DannyGray — Sun, 21 Feb 2016 07:41:55 GMT

Andrea,

Did you ever come across a solution for this issue?

Josie

Re: Move the popup widow in WAB

Anonymous User — Mon, 22 Feb 2016 14:10:50 GMT

Hi Josie!

No, I didn't. Built-in functionality is not good for WAB. As per usual, it seems like Esri didn't think of obvious functions the average user would want.

Re: Move the popup widow in WAB

MihkelMänna — Fri, 10 Dec 2021 21:16:40 GMT

Just stumbled upon this thread and I'm confused that anyone hasn't come up with a solution yet.

Sure it's possible to enable dragging the popups. With the WAB's Dev edition, that is.

I've used an invisible widget that wraps all the popups into Dojo's Moveable object. The code isn't the most elegant but I guess it could help someone reading this thread. Just make a new invisible widget and paste this into the Widget.js.

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/dnd/Moveable',
  'dojo/on',
  'dojo/query',
  'jimu/BaseWidget'], 
    function(
    declare,
    lang,
    Moveable,
    on,
    query,
    BaseWidget) {
        var clazz = declare([BaseWidget], {

            postCreate: function() {
                this.inherited(arguments);
            },

            startup: function() {
                this.inherited(arguments);

                on(this.map.infoWindow, "show", lang.hitch(this, function(e) {
                    this.makePopupDraggable();
                }));
                on(this.map, "click", lang.hitch(this, function (e) {
                    if (this.map.infoWindow.isShowing) {
                        this.map.infoWindow.hide();
                        this.makePopupDraggable();
                    }
                }));
                on(query(".esriPopupWrapper .titleButton.prev"), 'click', lang.hitch(this, function() {
                    this.makePopupDraggable();
                }));
                on(query(".esriPopupWrapper .titleButton.next"), 'click', lang.hitch(this, function() {
                    this.makePopupDraggable();
                }));
            },

            makePopupDraggable: function() {
                query(".esriPopup").forEach(function(node) {
                    new Moveable(node);
                });
            }

        });
        return clazz;
    }
);

Re: Move the popup widow in WAB

TylerDunn2 — Fri, 10 Dec 2021 21:16:43 GMT

So not sure if you've found the answer to this yet, but I just got it sorted out today. Hopefully some other people can reference this if they want to get these popups moving.

It's mashing the information in this link: Esri JS API Draggable Popups - JSFiddle with the wacky web app builder file structure.

Started with going to this css file: [app instal]\server\apps\[app#]\themes\LaunchpadTheme\common.css

and making it look like this:

@import url("panels/LaunchpadPanel/style.css");


.esriPopupWrapper .title {
    cursor: move;
}
.esriPopup .hidden {
    display: none !important;
}

This makes the pointer turn into the move cursor so your user knows they can move it around.

Then I headed to [app instal]\server\apps\[app#]\jimu.js\utils.js and added the following to their respective locations:

define(['dojo/dnd/Moveable', 'dojo/dom-class'], 
function(Moveable, domClass)

Then down around line 1089 (or do a find and look for createWebMap) I added some lines to mo.createWebMap:

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

Let me know if you have any questions, I'll try to answer them.

Re: Move the popup widow in WAB

AdamGebhart — Thu, 12 May 2016 15:52:53 GMT

Tyler Dunn

Thank you 1,000x over for posting this. We have received numerous requests to have the popup be moveable and now I can set that up for our applications.

I really wish ESRI would make it moveable by default or provide a config option of making it moveable, but that's still not the case. Hopefully in the future it will be though.

Thanks again.

Re: Move the popup widow in WAB

ShitalDhakal__GISP — Mon, 16 May 2016 17:51:12 GMT

Hi Tyler Dunn

Thank you for posting this. Its super helpful for someone like me who has just started on js.

I tried changing my code like you suggested and was only partially successful to replicate. I changed my 'common' file and was able to get the pointer changed into a move cursor.

But upon making subsequent changes on the utils.js file, the WAB stopped displaying any map at all. I went back and took out all the new codes I added and it looks like the addition of

function(Moveable, domClass)

is creating some anomaly.

I should also tell you that I couldn't find 'domClass' or 'dom-class' anywhere else in the code.

Can you please tell if there is anything I am doing wrong?

Thanks in advance.

Shital

Re: Move the popup widow in WAB

TylerDunn2 — Mon, 16 May 2016 18:11:22 GMT

Hey Shital,

When you added 'dojo/dnd/Moveable' and 'dojo/dom-class' to the define([ ] part of the code, did you have it in the same order you called it in the function( ) area? Ex:

define([

'dojo/_base/lang',

'dojo/_base/array',

'dojo/_base/html',

'dojo/_base/sniff',

'dojo/_base/config',

'dojo/dnd/Moveable',

'dojo/io-query',

'dojo/query',

'dojo/NodeList-traverse',

'dojo/Deferred',

'dojo/on',

'dojo/dom-class',

'dojo/json',

'dojo/cookie',

'dojo/number',

'dojo/date/locale',

'dojox/encoding/base64',

'esri/lang',

'esri/arcgis/utils',

'esri/SpatialReference',

'esri/geometry/Extent',

'esri/geometry/Multipoint',

'esri/geometry/Polyline',

'esri/geometry/Polygon',

'esri/geometry/webMercatorUtils',

'esri/tasks/GeometryService',

'esri/tasks/ProjectParameters',

'esri/urlUtils',

'esri/request',

'esri/graphicsUtils',

'jimu/portalUrlUtils',

'./shared/utils'

function(lang, array, html, has, config, Moveable, ioQuery, query, nlt, Deferred, on, domClass, json, cookie,

dojoNumber, dateLocale, base64, esriLang, arcgisUtils, SpatialReference, Extent, Multipoint,

Polyline, Polygon, webMercatorUtils, GeometryService, ProjectParameters,

esriUrlUtils, esriRequest, graphicsUtils, portalUrlUtils, sharedUtils)

Re: Move the popup widow in WAB

ShitalDhakal__GISP — Mon, 16 May 2016 19:09:01 GMT

This worked like a charm Tyler. Thank you so much. Much appreciated!

Re: Move the popup widow in WAB

DanielChantlos1 — Wed, 18 May 2016 14:54:42 GMT

Mihkel,

I just tried to create this invisible widget, without success. I copied/pasted your code into the Widget.js file, and placed the widget in my widgets folder on the app. No popups appear to be moveable.

Re: Move the popup widow in WAB

ShitalDhakal__GISP — Wed, 25 May 2016 17:20:25 GMT

You might wanna try the solution posted by Tyler. It worked for me

Re: Move the popup widow in WAB

DanielChantlos1 — Thu, 02 Jun 2016 16:09:45 GMT

Shital,

Tyler's solution worked great for me. However, his solution as a work around requires the user to manually configure every app created with WAB after creating/hosting on the server. This becomes very tedious when managing 40+ different WebApps.

With the "invisible" widget, moveable popups could be automatically generated in the app framework without editing intricate files each time the user makes a new WebApp.

Re: Move the popup widow in WAB

ShitalDhakal__GISP — Tue, 14 Jun 2016 17:12:00 GMT

Daniel,

I made the changes in the main WAB folder, so all the widgets I produce now will have the capability to move the pop-up right from start. I don't have to worry about making the changes each time I update or make a new widget.