topic Re: Get Selected Features in Custom Widget in ArcGIS Experience Builder Questions

Get Selected Features in Custom Widget

AdrianAkbariNet4s — Wed, 21 Apr 2021 13:00:11 GMT

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.

Re: Get Selected Features in Custom Widget

DavidMartinez — Wed, 21 Apr 2021 20:00:04 GMT

Can you describe your workflow? What is the behavior after you get the selected features? Do you use those in another widget? I think a better approach would be to use the query widget with the draw tool to get the features inside the drawn shape which generates an output data source. Then you could use that output data source in other widgets. The 1.4 release of the dev edition will have the query widget as well as samples on how to use an output data source if you need to use that in another custom widget.

Cheers,

David

Re: Get Selected Features in Custom Widget

AdrianAkbariNet4s — Thu, 22 Apr 2021 14:18:10 GMT

Hi David,

I want to get a selected feature then make a http(s) request (fetch) and send it's attributes to run a python tool online. So no I am not gonna use it in another widget.

Maybe Query widget helps with this workflow partially but in the end I still need my custom widget to send the http call.

Any idea when 1.4 dev edition will be released?

Re: Get Selected Features in Custom Widget

DavidMartinez — Mon, 26 Apr 2021 21:56:39 GMT

If it is an individual feature you will need to have a click event on the map, get the graphics layer and then do a query and pass the attributes to the python tool. If you want it to work off the map selection tool you're going to need to modify the computerSelectedGraphics method located in the selected-number.tsx file in the map widget.

Cheers,

David

Re: Get Selected Features in Custom Widget

SBerg_VHB — Fri, 25 Jun 2021 19:12:36 GMT

@DavidMartinez can you suggest how a custom widget can access an existing selected feature in a layer? Mostly I am trying to resolve an issue in that the editor widget sample does not seem to pick up the selected feature in the map when it loads requiring an extra map click. https://community.esri.com/t5/arcgis-experience-builder/editor-widget-and-picking-up-the-current-selection-without/m-p/1072426#M2202 I was investigating a workaround to use something like startUpdateWorkflowAtFeatureSelection(f) to try and trigger the expected behavior. But if you have feedback on the general issue and approach to the problem I would be grateful, thanks.

Re: Get Selected Features in Custom Widget

AdrianAkbariNet4s — Thu, 01 Jul 2021 07:21:08 GMT

Hi Sam,

I can explain you a little bit about that. I suggest you start by cloning one of the existing sapmple widgets. That makes your life much easier since the JIMU documentation is not very complete. For this case you can use for example:

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/samples/widgets/feature-layer-class

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/samples/widgets/feature-layer-function.

In the sample above the part the dataRender function is where you should be working to get selected features. There, if you change the:

...ds.getRecords().map((r, i)...

...ds.getSelectedRecords().map((r, i)...

you will have the selected records. (So I basically changed getRecords with getSelectedRecords).

This should help you to get further.

I share my complete function here in case it helps.

dataRender = (ds: DataSource, info: IMDataSourceInfo) => { // this.createOutputDs(ds); const fName = this.props.useDataSources[0].fields[0]; let selectedAttributes = []; for (let i = 0; i < ds.getSelectedRecords().length; i++){ selectedAttributes.push(ds.getSelectedRecords()[i].getData()[fName]); selectedAttributes.push(<br/>) }; // ds.getSelectedRecords().forEach(element => { // selectedAttributes.push(element.getData()[fName]); // }); this.setState({ selectedRecords: selectedAttributes }); return <> <div> <p> Selected Records:</p> </div> <div className="record-list" style={{ width: '100%', marginTop: '20px', marginBottom: '20px', height: 'auto', overflow: 'auto' }}> { ds && ds.getStatus() === DataSourceStatus.Loaded ? ds.getSelectedRecords().map((r, i) => { return <div key={i}>{r.getData()[fName]}</div> }) : null } </div> </> }

Re: Get Selected Features in Custom Widget

SBerg_VHB — Wed, 30 Jun 2021 15:35:08 GMT

Thank you @AdrianAkbariNet4s. Are you able to describe how to incorporate the ds.getSelectedRecords() into the Editor Widget sample workflow where an ActiveMapView is used to access the layer necessary to initialize an editor widget? Thanks for any info, and I appreciate the response here!

Re: Get Selected Features in Custom Widget

SBerg_VHB — Wed, 30 Jun 2021 17:38:26 GMT

What I have working just now is a custom editor widget with both a JimuMapViewComponent and DataSourceComponent. The editor widget is configured with the configured layer read in ActiveViewChanged, and that layer saved in state. Then on DataRender I am getting the selection as suggested by @AdrianAkbariNet4s and used to create a feature with the layer reference to pass to startUpdateWorkflowAtEdit.

if(this.state && this.state.currentWidget && ds.getSelectedRecords().length==1){ let g=new Graphic(); g.attributes=ds.getSelectedRecords()[0].getData(); g.layer=this.state.currentEditLayer; this.state.currentWidget.startUpdateWorkflowAtFeatureEdit(g); }

This seems to have the behavior I am looking for which keeping the editor in sync with feature selection changes. Thank you. Sam

Re: Get Selected Features in Custom Widget

AlejandroMari1 — Mon, 16 Aug 2021 22:46:16 GMT

Hi all! How do you keep up with the selection changed on the data source from another widget? I can't figure that out. Basically I want a callback or something on my widget when the selection has changed from another widget... I couldn't find anything on the <DataSourceComponent> or the DataSource object itself that will provide that.

Re: Get Selected Features in Custom Widget

AdrianAkbariNet4s — Tue, 17 Aug 2021 10:02:45 GMT

I am not sure what you exactly want to do when the selection changes. Do you mean for example when a selection is changed via selection widget on the map, then your custom widget automatically takes the updated selection?

In that case you can try stroring your selected features/graphics as a state. Then React will automatically takes care of the updates. This way you can also do something if state changes.

Re: Get Selected Features in Custom Widget

AlejandroMari1 — Tue, 17 Aug 2021 16:01:45 GMT

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-data-source-from/m-p/1089470

Thanks!

Alejandro

Re: Get Selected Features in Custom Widget

AdrianAkbariNet4s — Wed, 18 Aug 2021 08:04:39 GMT

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?

Re: Get Selected Features in Custom Widget

AlejandroMari1 — Wed, 18 Aug 2021 15:04:02 GMT

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 }) }

Re: Get Selected Features in Custom Widget

DougBrowning — Wed, 22 Oct 2025 15:03:03 GMT

If there is a way to fix the Analysis widget then to see selections? We have been trying for months and the Analysis widget cannot seem to see selections from anything. thanks