Experience Builder: Advanced Select component

[WalaZargouni]

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 ? 

[JanSarata · Accepted solution]

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

        <Option header>

          <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 (

            <Option value={it.id} key={it.id} disabled={!it.id && it.id !== 0} >

              {it.value}

            </Option>

          );

        })}

      </Select>

[WalaZargouni]

thank you for your reply, it was very helpful

[SumingSun]

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-adv... 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
}

[SerjStol]

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!

[SumingSun]

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-adv...

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

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.

[SerjStol]

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:

[SumingSun]

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.

[SerjStol]

@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.