Popups in ArcGIS v4.23 vs 4.11

[TimDietz]

Our app contained the following code snippet when configured to use 4.11:

popup.on('trigger-action', (event) => {
    const featureLocation = this.mapView.toMap(event.target.screenLocation);
}

We are now moving to 4.23 and the only event attribute is 'action', not 'target'. I can't quite figure out how to do it the new way. It looks like I might be able to do:

event.action.get(<something>)

but I don't know what the equivalent to 'screenLocation' would be.

Can somebody help with this and either point me to where I might find the event.action object or paste the equivalent statement?

TIA.

Tim

[JeffreyThompson2]

The event referred to in the trigger-action is the triggering of the popup action, not the standard browser click event. https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#event-trigger-...

Since you have a popup open, you can use its selectedFeature property to get the get the geometry of the that the popup is connected to and then go to that map point. Something like...

mapView.goTo(popup.selectedFeature)

[JoelBennett]

You can also do this as well:

popup.on("trigger-action", function(target, event) {
	const featureLocation = target.location;
}.bind(this, popup));

[TimDietz]

As an FYI, your example will not work.  I tried it and apparently, there is only one argument associated with the function and it is the event.  When I put the two in the console, the target param contained the same elements as an event, and the event param was null.

Still searching for a solution.

[JoelBennett · Accepted solution]

I've found it to be working properly.  In the sandbox for the "Popup actions" sample, you can change the code in the script tag beginning on line 27 to the following:

      require([
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/geometry/geometryEngine",
        "esri/core/reactiveUtils",
        "esri/widgets/Popup"
      ], (Map, FeatureLayer, MapView, geometryEngine, reactiveUtils, Popup) => {
        // Create the Map
        const map = new Map({
          basemap: "gray-vector"
        });

        // Create the MapView
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.08, 34.1],
          zoom: 11,
          popup: new Popup({})
        });

        /*************************************************************
         * The PopupTemplate content is the text that appears inside the
         * popup. Bracketed {fieldName} can be used to reference the value
         * of an attribute of the selected feature. HTML elements can be
         * used to provide structure and styles within the content.
         **************************************************************/

        // Add this action to the popup so it is always available in this view
        const measureThisAction = {
          title: "Measure Length",
          id: "measure-this",
          image:
            "https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/live/Measure_Distance16.png"
        };

        const template = {
          // autocasts as new PopupTemplate()
          title: "Trail run",
          content: "{name}",
          actions: [measureThisAction]
        };

        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
          popupTemplate: template
        });

        map.add(featureLayer);

        // Execute each time the "Measure Length" is clicked
        function measureThis() {
          const geom = view.popup.selectedFeature.geometry;
          const initDistance = geometryEngine.geodesicLength(geom, "miles");
          const distance = parseFloat(
            Math.round(initDistance * 100) / 100
          ).toFixed(2);
          view.popup.content =
            view.popup.selectedFeature.attributes.name +
            "<div style='background-color:DarkGray;color:white'>" +
            distance +
            " miles.</div>";
        }

        // Event handler that fires each time an action is clicked.
        reactiveUtils.on(
          () => view.popup,
          "trigger-action",
          (event) => {
            // Execute the measureThis() function if the measure-this action is clicked
            if (event.action.id === "measure-this") {
              measureThis();
            }
          }
        );

        view.popup.on("trigger-action", function(target, event) {
          const featureLocation = target.location;
          console.info(featureLocation.x + ", " + featureLocation.y);
          console.info(event.action.title);
          console.info(target);
          console.info(event);
        }.bind(this, view.popup));
      });

In the code above, changes to the original are found on lines 6-8, 19-20, and (primarily) 77-84.  After the sample is refreshed, clicking on a feature and then the "Measure Length" action in the popup produces the following in the console, showing the expected output:

If I had to guess as to why it isn't working for you, perhaps the call to bind was not made correctly.

[TimDietz]

Thanks for the reply.  I believe your 'this' and my 'this' are two different object.  What does your 'this' refer to?

[JoelBennett]

In the case of the sample, "this" will refer to the window object since that's the context in which the call to bind occurs.  Whatever you pass in the first argument of the bind function will be whatever "this" refers to inside the bound function.

[TimDietz]

Thank you, Sir!  That did it.  Appreciate the quick responses.