Move the popup widow in WAB

15047
36
Jump to solution
06-30-2015 07:22 AM
GeorgeKatsambas
Occasional Contributor III

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.

Tags (2)
36 Replies
MihkelMänna
Occasional Contributor

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
Occasional Contributor

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.

0 Kudos
ShitalDhakal__GISP
Occasional Contributor

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

0 Kudos
DanielChantlos1
Occasional Contributor

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
Occasional Contributor

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.

0 Kudos
AndresCastillo
MVP Regular Contributor
See:

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.

0 Kudos
TylerDunn2
Occasional Contributor

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
Occasional Contributor III

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
Occasional Contributor III

Thank you!!!!

AdamVellutini
New Contributor III

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

0 Kudos