topic Re: Using Multiple DataSources in a FieldSelector Widget in ArcGIS Experience Builder Questions

Using Multiple DataSources in a FieldSelector Widget

JeremyKolassa — Tue, 31 Oct 2023 17:13:43 GMT

I have been tasked with creating a custom search widget for a client inside Experience Builder. This widget will have to search multiple data sources simultanenously, and moreover, search multiple fields within each data source, then spit out an autocomplete/typeahead list a user can select from.

In order to make this as easy to configure as possible for our users, I am using the DataSourceSelector widget in settings, and using the FieldSelector widget to let them select what fields for which data source the widget should search. However, I'm running into a UI issue, where after I click on the dropdown for the data sources, and select a different one, the name in the dropdown does not update, and it only shows the fields (including selected ones) from the first data source. Weirdly, though, if I hit "save" (just for a test), it actually takes the selected fields for the first data source and applies them to the other data source I selected (but which doesn't appear in the UI.)

Below is the code I am using to put the FieldSelector into the settings panel. I am not sure if I am using it incorrectly -- the documentation for this widget is essentially non-existent, and the Storybook page is incomplete. My understanding is that the FieldSelector can handle multiple data sources at once, but am I using the right properties -- correctly -- to make that work? Should I be using one Field Selector widget per data source?

<SettingSection key="data"> <SettingRow><h4>Data Source</h4></SettingRow> <SettingRow> <DataSourceSelector isMultiple mustUseDataSource types={supportedTypes} onChange={onDataSourceChange} useDataSources={props.useDataSources} widgetId={props.id} /> </SettingRow> <SettingRow><h6>Search Fields</h6></SettingRow> <SettingRow> <FieldSelector isMultiple={true} useDropdown={true} useMultiDropdownBottomTools={true} useDataSources={props.useDataSources} onChange={onSearchFieldsChange} widgetId={props.id} selectedFields={props.config.fields || Immutable([])} /> </SettingRow> </SettingSection>

Re: Using Multiple DataSources in a FieldSelector Widget

JeremyKolassa — Tue, 31 Oct 2023 17:48:11 GMT

Further testing of this has indicated the problem is slightly different from what I described above.

What is actually happening is that every single time I select a different data source, and then select a field on that data source, it immediately switches back to the first data source and its fields inside the dropdown. Now, if I click nothing else except "Save," it does properly add the right fields to the right data source. However, I cannot add any more fields to that specific data source, as I can only select the first data source afterwards.

Re: Using Multiple DataSources in a FieldSelector Widget

JeffreyThompson2 — Tue, 31 Oct 2023 18:00:02 GMT

Based on your requirements, I think all of that can be done in the OOTB Search Widget.

https://developers.arcgis.com/experience-builder/guide/search-widget/

Re: Using Multiple DataSources in a FieldSelector Widget

JarrettGreen — Wed, 09 Oct 2024 19:49:55 GMT

@JeremyKolassa If you went with this approach, were you able to solve the issue you described? I'm facing a similar situation with multiple data sources within the FieldSelector component. When I set fields on a 2nd data source it flips back to the first data source. If I debug in Chrome, I get the final re-render but it seems to update again afterwards.