Community
Select to view content in your preferred language

Cannot trigger headerActions with the arcgis-features map component

69
2
Thursday
FrValade1
by
New Contributor
Thursday

I'm using the arcgis-features map component in a react application and I'm able to add an action button in the header. Now the problem is that the "onarcgisTriggerAction" event handler is never fired when I click on the action button. Is this a bug?

 FrValade1_0-1752157413318.png

Here's my code :

 const [actionDetacherInformations] = useState(new Collection([new ActionButton({icon:"popup", title:"Détacher", id:"detacher",type:"button"})]));
<arcgis-features
    onarcgisTriggerAction={e => {
            if(e.detail.action.id === "detacher"){
                   setPopupDockEnabled(false);
            }
    }}
    headerActions={actionDetacherInformations}
referenceElement={mapId}>

 

 

0 Kudos
2 Replies
LaurenBoyd
by Esri Contributor
Esri Contributor
Thursday

Hi @FrValade1 -

Right now, the `trigger-action` event only covers the actions in the action bar. This doesn't include the header actions. We will look into updating the `trigger-action` event to fire when `headerActions` are triggered as well.

Could you provide more information on your use case for adding a custom headerAction? Looks like you may be creating a dock button for the Features component?

Lauren
FrValade1
by
New Contributor
Friday

I wanted to add a dock button to the header and I thought that the `trigger-action` event would be triggered since the headerActions property was available in the component. Also, I noticed that once I close the features component by using the default close button, I can't open or fetch features anymore because of an error :

 const featuresHandle = reactiveUtils.on(
                () => arcgisMapRef.current?.view,
                "click",
                async (event) => {
                    if(popupDockEnabled){
                        const { screenPoint } = event;
                        const features = await featuresRef.current?.fetchFeatures(screenPoint);
                        const graphics = await features?.allGraphicsPromise;
                        setPopupAucunResultat(graphics?.length === 0);
                        if (featuresRef.current) {
                            featuresRef.current.features = graphics ?? [];
                        }
                        setPanneauSelectionne("information");
                        setPanneauGaucheFerme(false);
                    }
                }
            )

FrValade1_0-1752247582380.png

Finally, I resolved my problem by hiding the header with the hideHeading and hideCloseButton properties and wrapping the arcgis-features component inside a calcite-flow-item with a header and custom actions. I replaced the close button with a custom action that change the closed property on the component. By doing it this way, there was no more problems with the fetchFeatures promise. 

<calcite-flow>
            <calcite-flow-item closed={!popupDockEnabled || popupAucunResultat} selected heading={titreFeatures ?? undefined}>
                <calcite-action text="Afficher dans la carte" title="Afficher dans la carte" slot="header-actions-end" icon="popup"
                    onClick={async () => {
                        setPopupDockEnabled(false);
                        await arcgisMapRef.current?.view.openPopup({ features: featuresRef.current?.features })
                        if (arcgisMapRef.current?.view.popup) {
                            while (arcgisMapRef.current.view.popup.selectedFeatureIndex !== featuresRef.current?.selectedFeatureIndex) {
                                arcgisMapRef.current.view.popup.next();
                            }
                        }
                    }
                }> </calcite-action>
                <calcite-action text="Fermer" title="Fermer" slot="header-actions-end" icon="x"
                    onClick={() => {
                        setPopupAucunResultat(true);
                    }
                }> </calcite-action>
                <arcgis-features ref={featuresRef}
                    onarcgisReady={() => setFeaturesRefReady(true)}
                    hideHeading
                    hideCloseButton
                    closed={!popupDockEnabled || popupAucunResultat}
                    referenceElement={mapId}>
                </arcgis-features>
            </calcite-flow-item>
        </calcite-flow>

 

0 Kudos