nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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 ?

Encontre mais publicações marcadas com

Accepted answers

JanSarata

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>

All comments

vbadugu_royomartin

use

isEmptyOptionHidden={true} to hide -All- option

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.

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

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

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

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
}

WalaZargouni

thank you for your reply, it was very helpful

JanSarata

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>

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.