topic Re: problems disabling navigation during edits when using infoTemplate in ArcGIS JavaScript Maps SDK Questions

problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 16:36:35 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 16:49:39 GMT

Could you also share the code for "setPopupContent".

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 16:56:11 GMT

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

}

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 17:06:28 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 17:16:56 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 17:30:39 GMT

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

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 17:33:01 GMT

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

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 17:35:44 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 17:40:09 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 17:54:15 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 18:02:04 GMT

I understand the way you're describing it, but there's a good chance the user might have an infoWindow open before they start. They may see some information that needs to be changed and then click Start Editing. Even though the graphic seems like it might be selected, because you just clicked it to see the information, it isn't.

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Sat, 11 Dec 2021 09:17:25 GMT

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.

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 19:10:49 GMT

With the lang.hitch, the use of 'this' doesn't work. It's giving the error 'this.set is not a function'. I get what you're saying, though.

Re: problems disabling navigation during edits when using infoTemplate

thejuskambi — Thu, 21 Jan 2016 19:21:58 GMT

That's because I have changed the scope of the function. Change it to

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

and

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

or get the instance of ToggeButton and set the label.

Re: problems disabling navigation during edits when using infoTemplate

TracySchloss — Thu, 21 Jan 2016 19:30:49 GMT

OK, that fixed that, but the map navigation gets turned back off again after moving it one time. I'll have to look at the activateToolbar function next. It's enabling mapNavigation at the end of every graphic-move-stop.