topic Re: Experience Builder: Advanced Select component in ArcGIS Experience Builder Questions

Experience Builder: Advanced Select component

WalaZargouni — Tue, 26 Mar 2024 13:42:23 GMT

Hello, i'm developing a widget on experience builder 1.14 that uses the AdvancedSelect component from jimu-ui, is there any way to listen to the search input change event to trigger an api call for fetching data ?

I'm actually using the staticValues property to provide the options for my advancedSelect , how can I use the datasource property instead ?

Re: Experience Builder: Advanced Select component

JanSarata — Tue, 26 Mar 2024 13:56:36 GMT

Hi @WalaZargouni

a few versions back it was not possible with the componenet AdvancedSelect ... I believe it is still the same in version 1.14.

We kind of hacked the simple component Select to provide the functionality you described. See the sample below

<Select {...restProps}

placeholder={placeHolder}

value={activeId}

buttonProps={buttonProps}

autoWidth

onChange={onSelectChange}>

<TextInput

type={'text'}

size={'sm'}

style= {{ marginLeft: '-0.5rem', marginRight: '-0.5rem' }}

placeholder={searchTextPlaceholder}

onChange={(event) => {

onSearchInputChanged(event.target.value);

}}

prefix={<span style={{ marginRight: '2px' }}><SearchOutlined size="m" color={'black'} /></span>}

</Option>

{items.map(it => {

return (

{it.value}

</Option>

);

})}

</Select>

Re: Experience Builder: Advanced Select component

WalaZargouni — Tue, 26 Mar 2024 14:46:41 GMT

thank you for your reply, it was very helpful

Re: Experience Builder: Advanced Select component

SumingSun — Wed, 27 Mar 2024 02:35:23 GMT

Hi @JanSarata, thanks for your hacked solution with Select. I wanted to mention that the Advanced select component supports showing a static list with prop "staticValues" or a dynamic list with props "dataSource" and "field".

Hi @WalaZargouni, if you're interested, there is a dynamic demo on storybook https://developers.arcgis.com/experience-builder/storybook/?path=/story/components-jimu-ui-index-advancedselect--dynamic-data, and please refer to the following codes:

const field = { name: 'objectid', alias: 'objectid', jimuName: 'objectid', esriType: EsriFieldType.OID, type: JimuFieldType.Number } const imField = Immutable(field) as IMFieldSchema const DynamicTemplate: Story<AdvancedSelectProps> = args => { const [selectedValues, SetSelectedValues] = React.useState([]) const { staticValues, ...otherArgs } = args // no staticValues for dynamic case const onChange = (value) => { SetSelectedValues(value) } return <AdvancedSelect {...otherArgs as any} dataSource={ds} selectedValues={selectedValues} onChange={onChange} > </AdvancedSelect> } export const DynamicData = DynamicTemplate.bind({}) DynamicData.args = { field: imField }

Re: Experience Builder: Advanced Select component

SerjStol — Tue, 15 Oct 2024 18:37:06 GMT

Hello SumingSun,

The code for AdvancedSelect in the storybook does not exist and also the link you provided does not work. Could you please update the documentation? I am working on a widget that needs its dropdowns populated by fieldname of records from a data source based on the first drop down selection, seems like the dynamic props is a proper way of doing it rather than querying Data Source and populating the StaticValues prop?

Many thanks!

Re: Experience Builder: Advanced Select component

SumingSun — Wed, 16 Oct 2024 02:07:58 GMT

Hello @SerjStol, please try the latest help links for the advancedSelect in storybook.

https://developers.arcgis.com/experience-builder/storybook/?path=/story/components-jimu-ui-index-advancedselect--static-data

https://developers.arcgis.com/experience-builder/storybook/?path=/story/components-jimu-ui-index-advancedselect--dynamic-data

The dynamic list with props "dataSource" and "field" will query features' values to populate the dropdown menu in the component side. The static list with prop "staticValues" will not make any queries.

Re: Experience Builder: Advanced Select component

SerjStol — Thu, 17 Oct 2024 09:52:11 GMT

Thanks @SumingSun , I managed to get it to work and query my datasource. Is there any way to remove the "All" option in the dropdown? I only need to select one option and never more than one.

Also, the example code is missing for dynamic data from the storybook:

Re: Experience Builder: Advanced Select component

SumingSun — Mon, 21 Oct 2024 09:31:12 GMT

Hello @SerjStol, the Tag '- All -' can't be removed when prop isMultiple=false. It's the only way to remove the current selected value for users. You can custom the label with prop allTag: string if needed.

Thanks for pointing out the code display issue in the storybook, it will be fixed with the upcoming release.

Re: Experience Builder: Advanced Select component

SerjStol — Mon, 21 Oct 2024 13:12:24 GMT

@SumingSun Thats a shame it cant be removed as it seems counter intuitive since i set prop isMultiple={false} then why would I want to select "All". I tried to add allTag="Please select one site..." but it still shows as "-All-". Am I doing it wrong?

<AdvancedSelect

onChange={handleDynamicSelectChange}

staticValues={dynamicOptions}

selectedValues={selectedDynamicOption}

placeholder="Select site..."

hideSearchInput={false}

isMultiple={false}

allTag="Please select one site..."

/ >

I decided to use staticValues btw since I need to do a more complex query than just one field. I like AdvancedSelect because it has Search capabilities.

Re: Experience Builder: Advanced Select component

vijaybadugu — Thu, 07 May 2026 15:48:28 GMT

use

isEmptyOptionHidden={true} to hide -All- option