Custom Experience Builder widget dropdown value will not populate

wjenkins — Fri, 03 Jun 2022 19:17:37 GMT

I am working on a custom widget and we are using the a configuration file to feed in additional parameters to the initialized widget. When we are setting up the widget for a new app we have a list of drop downs that we are using to set the parameters for the widget, but when we select the item from the drop down the value is not displaying.

We are using `UseDataSource` in the drop down menus for the map and the layer that we are connecting to, but we use config to set key value pairs for custom values that we are passing to the widget. When I looked into the feature-layer-class widget example the `FieldSelector` components are setting a key called fields on `UseDataSources` that has a type of an array of string, but we have a lot of fields and would rather have an object associated with these to access keys.

I have looked at the `jimu-ui` docs for `FieldSelector` but it is not list and looked into the `Dropdown` in Reactstrap, but I am not able to make heads or tails of it.

Is there something that I am doing wrong to populate these fields, is there documentation that I am missing out on.

It would be helpful if we had a `value` prop to the `FieldSelector` drop down to set a custom value from a config object.

/** @jsx */ import { React, jsx, Immutable, DataSourceTypes, UseDataSource } from 'jimu-core'; import { AllWidgetSettingProps } from 'jimu-for-builder'; import { IMConfig } from '../config'; import { JimuMapViewSelector, SettingSection, SettingRow, } from 'jimu-ui/advanced/setting-components'; import { AllDataSourceTypes, DataSourceSelector, FieldSelector, } from 'jimu-ui/advanced/data-source-selector'; export class Setting extends React.PureComponent<AllWidgetSettingProps<IMConfig>, any> { supportedTypes = Immutable([DataSourceTypes.FeatureLayer]); onMapWidgetSelected = (useMapWidgetIds: string[]) => { this.props.onSettingChange({ id: this.props.id, useMapWidgetIds: useMapWidgetIds, config: this.props.config.set('layerId', useMapWidgetIds[0]), }); }; onDataSourceChange = (useDataSources: UseDataSource[]) => { this.props.onSettingChange({ id: this.props.id, useDataSources: useDataSources, }); }; setPropertyFieldName = (fieldProperty, fieldName) => { this.props.onSettingChange({ id: this.props.id, config: this.props.config.set(fieldProperty, fieldName), }); console.log(this.props.config); }; onToggleUseDataEnabled = (args) => { console.log({ args }); }; render() { return ( <div> <div className='widget-setting-br-buffer-tool'> <SettingSection className='map-selector-section' title='Select Map'> <SettingRow> <JimuMapViewSelector onSelect={this.onMapWidgetSelected} useMapWidgetIds={this.props.useMapWidgetIds} /> </SettingRow> </SettingSection> <SettingSection className='map-selector-section' title='Select Parcel Layer'> <SettingRow> <DataSourceSelector mustUseDataSource types={Immutable([AllDataSourceTypes.FeatureLayer])} useDataSources={this.props.useDataSources} onChange={this.onDataSourceChange} widgetId={this.props.id} /> </SettingRow> </SettingSection> {this.props.useDataSources && this.props.useDataSources.length > 0 && ( <React.Fragment> <SettingSection className='map-selector-section' title='OID field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select OID field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('oidField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='PIN field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select PIN field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('pinField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='Owner field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select Owner field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('ownerField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='Street # field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select Street# field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('streetNberField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='Street name field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select Street name field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('streetNameField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='Street type field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select Street suffix field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('streetSuffixField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='City field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select city field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('cityField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='State field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select state field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('stateField', evt[0].name)} /> </SettingSection> <SettingSection className='map-selector-section' title='Zip Code field'> <FieldSelector useDataSources={this.props.useDataSources} isMultiple={false} isDataSourceDropDownHidden={true} isSearchInputHidden={false} useDropdown={true} placeholder={'Select zipcode field'} useDefault={false} onChange={(evt) => this.setPropertyFieldName('zipCodeField', evt[0].name)} /> </SettingSection> </React.Fragment> )} </div> </div> ); } } export default Setting;

topic Custom Experience Builder widget dropdown value will not populate in ArcGIS Experience Builder Questions

Custom Experience Builder widget dropdown value will not populate