Best practice for managing feature selection between Features widget and Editor widget in same application?

Question

Hi all,

I'm building an enterprise application using the ArcGIS Maps SDK for JavaScript (v4.x) that requires both the Features widget (for displaying feature information) and the Editor widget for editing capabilities.

The Problem: Both widgets have their own selection/interaction behavior, and I'm finding conflicts when trying to use them together. When a user clicks on a feature:

* The Features widget wants to display the popup/info panel
* The Editor widget also responds to selection for editing

This creates a confusing UX where it's unclear which widget "owns" the selection, and switching between viewing and editing modes isn't intuitive.

What I'm looking for: I'd like to implement a global/unified selection mechanism that:

* Allows a single feature selection to be shared across both widgets
* Provides clear mode switching (view vs. edit)
* Maintains a consistent selection state across the application

I know there is a the Select widget in ExB, but has anyone implemented something similar for JavaScript applications?

Thanks!

ClangDevGuy · Answer

I guess that is one way to handle it for handling selections one widget at a time, thanks for the response!

It would be nice if there was a global selection widget that just passes the selection to all active widgets or of your choosing. Sometimes its nice to look at the nicely formatted popup while you are editing the attributes of that feature. I'll keep exploring and see if I can come up with a solution.

Jeff.Thompson@arlingtontx.gov_arlingtontx · Answer

https://community.esri.com/t5/arcgis-javascript-maps-sdk-ideas/optional-off-switch-for-edit-widget/idi-p/1655133/jump-to/first-unread-message

I've built an editing on/off switch before. When editing is turned off, it loops through the editable feature layers and sets their editingEnabled property to false. It does the opposite when editing is turned on.

A related idea would be to create a toggle switch to change what the select function does. All of the reactiveUtils functions return a watchHandle that can be deleted with the .remove() method. So, you can wrap your create editing/identifying events into a function, like this:

const makeEditing = () => {
   const handle = reactiveUtils.on(() => viewElement,
  "arcgisViewClick",
  (event) => {
    doStuff(event)
   }
  return handle
}

Then have your switch delete the old handle and make a new one like this:

if (editingOn) {
   currentHandle.remove()
   currentHandle = makeEditing()
} else {
   currentHandle.remove()
   currentHandle = makeIdentifying()
}