Get Selected Features in Custom Widget

903
12
Jump to solution
04-21-2021 06:00 AM
AdrianAkbariNet4s
New Contributor II

Hi, 

How can I create a custom widget in experience builder that takes the current selected features from the standard selection tool?

I have read the docs and looked at the sample repos but I still cant manage to do it. Any help is appreciated jimu documentation is not really helping. 

 

Thanks. 

0 Kudos
12 Replies
AlejandroMari1
New Contributor III

Hi @AdrianAkbariNet4s , thanks for your response. Yes, that's what I'm trying to do. I will give it a try, though I don't think storing the selected features on the state will work, since that object will be updated from another widget, it won't trigger a component update on my widget. 

I imagine there is a way to "listen" to selection changes in a data source, but can't figure out how. The documentation is minimal on this.

I've posted this as a separate question now: https://community.esri.com/t5/arcgis-experience-builder-questions/react-to-change-in-selection-on-da...

Thanks!

Alejandro

0 Kudos
AdrianAkbariNet4s
New Contributor II

I still think you can do it. In React its called " lifting your state up" . See Lifting your state up . 
That is how my widget works. User selects features with the default selection tool (widget A) and the selected features gets automatically updated in my custom widget (Widget B). Or am I not understanding your question correctly? 

 

0 Kudos
AlejandroMari1
New Contributor III

Thanks again @AdrianAkbariNet4s . I think you are correct. And my code is working now! Here's a snippet of my <DataSourceComponent>

<DataSourceComponent
    useDataSource={useDataSource}
    query={dataSource ? query : null}
    widgetId={this.props.widgetId}
    onDataSourceCreated={this.onDataSourceCreated}
    onDataSourceInfoChange={this.onDataSourceInfoChange}
    onCreateDataSourceFailed={this.onCreateDataSourceFailed}
>
    {this.renderChild}
</DataSourceComponent>

this.renderChild is called whenever there is a selection update on the data source, made by any other widget, including OOTB ones.

This is the only thing I'm storing in the sate when the onDataSourceInfoChange is called:

    onDataSourceInfoChange = (info: IMDataSourceInfo) => {
        this.setState({
            dataSourceStatus: info.status,
            dataSourceWidgetQueries: info.widgetQueries,
            dataSourceVersion: info.version
        })
    }

 

 

0 Kudos