Custom popup actions misfires on second popup open

512
2
03-10-2022 04:19 AM
JasmineNoble-Shelley
New Contributor

I have followed the example code here to get custom popup actions to show depending on a feature's attribute: https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/

My code works well the first time the first time a feature is clicked after load, but upon closing that popup or switching to another point, the popup box will jump to the top left corner and not show any information.

In the browser console, the error upon the second time popup opening is "Uncaught TypeError: Cannot read properties of null (reading 'getEffectivePopupTemplate')".

I can't figure out why it fires correctly the first time but not the second.

If anyone could point me in the right direction I'd be very grateful, thanks!

My code:

   view.when(() => {
      view.popup.watch("selectedFeature", (graphic) => {
        const graphicTemplate = graphic.getEffectivePopupTemplate();
          if (view.popup.viewModel.selectedFeature.attributes.restricted == "True")
           {
            graphicTemplate.actions.items[0].visible = false;
            console.log('hidden');
          } else {
            graphicTemplate.actions.items[0].visible = true;
            console.log('showing');
          }
        })
    });
 
0 Kudos
2 Replies
JeffreyWilkerson
Occasional Contributor III

If you click somewhere and there is not a 'graphic' object the code stops because you are trying to 'getEffectivePopupTemplate()' from a 'null' object.  I put in the check for null and it seems to work.

view.when(() => {
    view.popup.watch("selectedFeature", (graphic) => {
        if (graphic != null) {
            const graphicTemplate = graphic.getEffectivePopupTemplate();
            if (view.popup.viewModel.selectedFeature.attributes.restricted == "True")
            {
                graphicTemplate.actions.items[0].visible = false;
                console.log('hidden');
            } else {
                graphicTemplate.actions.items[0].visible = true;
                console.log('showing');
            }
        }
    })
});
JasmineNoble-Shelley
New Contributor

Thank you Jeffery! This works perfectly. 

0 Kudos