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
}