Move the popup widow in WAB

[GeorgeKatsambas]

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.

[MihkelMänna]

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

[DanielChantlos1]

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.

[ShitalDhakal__GISP]

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

[DanielChantlos1]

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.

[ShitalDhakal__GISP]

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.

[AndresCastillo]

Daniel Chantlos

See:

https://community.esri.com/thread/122195#comment-644409

Robert Scheitlin, GISP @ ksundeen_mnpower on Nov 1, 2016 11:47 AM

Kim,

  Sorry to say that for existing apps you will have to modify the MapManager in each but when you make that change in the stemapp the all NEW app will have the change. To explain... When a new app is created it copies the stemapp to a new folder like server/apps/[app #]. So because each app is a copy (snapshot) of the stemapp and not a direct link to it your changes to the stemapp have no effect on existing apps.

[TylerDunn2]

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.

[AdamGebhart]

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. 

[AnninaHirschi_Wyss1]

Thank you!!!!

[AdamVellutini]

Hello Tyler,

I am attempting to implement this code and have a question as to where the respective locations are for the following step:

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

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

Thanks so much!

Adam