problems disabling navigation during edits when using infoTemplate

2754
14
Jump to solution
01-21-2016 08:36 AM
TracySchloss
Frequent Contributor

I know there are many threads on editing and navigation, but I still can't figure it out.  I want to be able to enable/disable editing on my featureLayer.

I have a boolean set as app.editEnabled.

I have the button constructed as a toggleButton:

      createEditButton: function (){

          var tglButton = new ToggleButton({

           showLabel: true,

           label: 'Begin Editing',

            onChange: function(val) {        

            if (val){

                this.set('label', 'Stop Editing');

                app.editEnabled = true;    

            }else{

                this.set('label', 'Begin Editing');

                app.editEnabled = false;

            }

           }

        }, "tglEditButton");

      },

It is properly changing my Boolean and my button label.

      var template = new PopupTemplate({        title: null      });

        template.setContent(setPopupContent);

My FeatureLayer is defined as

    featureLayer =  new FeatureLayer(pathName+"/arcgis/rest/services/MDA/sampleGeocodeEdit/FeatureServer/0",{

        id:"featureLayer",

        outFields:['*'],

     infoTemplate:template

     });

//symbology defined elsewhere

     featureLayer.renderer = renderer;

     featureLayer.setSelectionSymbol(highlightMarkerSymbol);

I have a listener on it:

     on(featureLayer, "click", function(evt){

       map.infoWindow.hide();

       formatString = "";

       objectId = evt.graphic.attributes[featureLayer.objectIdField];

       selectQuery.objectIds = [objectId];

       featureLayer.selectFeatures(selectQuery);

         if (app.editEnabled) {

           myEditor.activateToolbar(evt.graphic,map);

         }

     });

in myEditor

     activateToolbar: function (graphic,map) {

       map.infoWindow.hide();

         map.disableMapNavigation();

          map.disablePan();

         app.editToolbar.activate(Edit.MOVE, graphic);

         on(app.editToolbar, 'graphic-move-stop', function(evt){

           featureLayer.applyEdits(null, [graphic], null);

           app.editToolbar.deactivate();

           map.enableMapNavigation();

           map.infoWindow.hide();

         });

       }

There is where I'm getting stuck.  Instead of the graphic moving when I drag the mouse, it still just pans the screen instead.     As long as my feature doesn't have an infoTemplate, the graphic drags.  Once I include one in my featureLayer constructor, navigation is not disabled and instead of dragging the graphic, it just pans.  I've tried hiding the infoWindow, but it isn't getting removed.

0 Kudos
1 Solution

Accepted Solutions
thejuskambi
Occasional Contributor III

Ok, now I understand what you mean.

Change the below function in myEditor.js file.

          createEditButton: function (map) {
                var tglButton = new ToggleButton({
                    showLabel: true,
                    label: 'Begin Editing',
                }, "tglEditButton");
                
                on(tglButton, 'change',lang.hitch(this, function (val) {
                    if (val) {
                        this.set('label', 'Stop Editing');
                        app.editEnabled = true;
                        map.infoWindow.hide();
                        
                        var selected = featureLayer.getSelectedFeatures();
                        if(selected && selected.length > 0){
                            var graphic = selected[0];
                            this.activateToolbar(graphic, map);
                        }
                        
                    } else {
                        this.set('label', 'Begin Editing');
                        app.editEnabled = false;
                    }
                }));
            },

The idea is to get the selected feature and setup the edit Toolbar when the graphic is already selected. I have not tested the code. Also you need to require dojo/_base/lang.

Hope this helps.

View solution in original post

0 Kudos
14 Replies
thejuskambi
Occasional Contributor III

Could you also share the code for "setPopupContent".

0 Kudos
TracySchloss
Frequent Contributor

It's rather convoluted and it doesn't seem relevant, but sure.   I changed it to be just a simple string:

popupTemplate.setContent("this is my template")

and it didn't make any difference to the behavior.

   

function setPopupContent(content){

          var template = "<span id='attImage'></span><div class='boldPopup'>${Facility}</div><div>${Address}</div><div>${City},${State}</div>";

  // get attachments and update template when we have url        

          var oid = content.attributes[featureLayer.objectIdField];

          featureLayer.queryAttachmentInfos(oid).then(function(attachments){

            if(attachments.length > 0){

              var attachment = attachments[0];

              if(attachment.url && attachment.name){

                dom.byId("attImage").innerHTML= "<img class='popupImage' alt='siteImage' src='" + attachment.url +"'/>";

          }

            }

          });

          return esriLang.substitute(content.attributes,template);

        }

0 Kudos
thejuskambi
Occasional Contributor III

I just wanted to see if you were enabling the MapNavigation in it. As you mentioned, the issue occurs only when you use the template. It was just a thought.

0 Kudos
TracySchloss
Frequent Contributor

You must be a mind reader.  I actually did have mapNavigation.enabled set in it.  I was so sure that was clue I needed.  But I took the line out and it didn't help.

In my createEditButton function, I added map.infoWindow.hide() in the section if (val) .....  It removes the infoWindow, navigation is still enabled, so I get map movement, not graphic moving.  If I click the feature again, THEN that disables the navigation and I can move the point.

I don't want navigation to be disabled just because I enabled editing, though.  It feels close, I just don't have the logic right.

It will probably help to see it working here:

Add graphic by geocode

The points get added by geocoding, not by something like templatepicker.  It's the reason I'm using this approach, as opposed to something like the Editor widget.

0 Kudos
thejuskambi
Occasional Contributor III

Is the Link you have provided a sample code or the application where the issue exist?

0 Kudos
TracySchloss
Frequent Contributor

The application where the issue exists.  I haven't figured how to post some place like jsbin once I have it split into modules.

0 Kudos
thejuskambi
Occasional Contributor III

I dont find any issue, with the application. I think it was resolved when you removed the line from setContent function. My be try refreshing the local browser cache it should work.

0 Kudos
TracySchloss
Frequent Contributor

It's still not behaving like I want.  You have to select the feature again after the infoWindow has been removed before you can move the graphic.

0 Kudos
thejuskambi
Occasional Contributor III

What I see is, you click Enable Editbutton, which disables the InfoWindow/Popup  click. Then click the Graphic, which selects the point, updates the attributes panel and enables edittoolbar. Then mouse down, drag the graphic and mouse up.

I think its ideal flow.

For the first click event to raise, you need to mouse up ( this event enables the edittoolbar). Then you need to press the mouse again to drag. I dont see any other way to reduce the user click. unless, you use mouse-down to select the feature, enable editor and drag it immediately. I am not sure it will be user-friendly.

0 Kudos