jimu-ui FieldSelector componenet with multiple data sources

AlexGilvarry1

I'm trying to extend the Use a feature layer (function)  sample to use more than one Feature Layer, but I can't seem to make the FieldSelector component cooperate.  It seems like it working part of the way, but I have these issues:

1. Whenever I select a field in a data source that is not the first in the list it will pop back to the initial selection. Logging props.useDataSources show that the select was made despite this.
2. When I try to switch to a data source other than the initial after having made a selection it triggers the onChange parameter, which will wipe out my selected fields because it registers as nothing being selected.
3. In addition to #2 usually when I try to switch the data source it won't actually change despite the above behavor.

I'm not sure if these issues are something I'm missing or if there is an issue in the API itself but the documentation doesn't give any example of using FieldSelector with more than one data source.

 

I haven't made many changes to the code, but here is my setting.tsx file:

 

import { React, Immutable, IMFieldSchema, UseDataSource, AllDataSourceTypes, DataSource, ImmutableObject } from 'jimu-core'
import { AllWidgetSettingProps } from 'jimu-for-builder'
import { DataSourceSelector, FieldSelector } from 'jimu-ui/advanced/data-source-selector'

export default function Setting (props: AllWidgetSettingProps<{}>) {
  const onFieldChange = (allSelectedFields: IMFieldSchema[], ds: DataSource, isSelectedFromRepeatedDataSourceContext: boolean) => {
    props.onSettingChange({
      id: props.id,
      useDataSources: [...props.useDataSources].map(item => item.dataSourceId === ds.id ? { ...item, ...{ fields: allSelectedFields.map(f => f.jimuName) } } : item)
    })
  }

  const onToggleUseDataEnabled = (useDataSourcesEnabled: boolean) => {
    props.onSettingChange({
      id: props.id,
      useDataSourcesEnabled
    })
  }
  const selectedFields = () => {
    let newFields = Immutable({}) as ImmutableObject<{ [dataSourceId: string]: string[] }>
    props.useDataSources.forEach(ds => {
      newFields = newFields.set(ds.dataSourceId, ds.fields ? ds.fields : [])
    })
    return newFields
  }

  const onDataSourceChange = (useDataSources: UseDataSource[]) => {
    props.onSettingChange({
      id: props.id,
      useDataSources: useDataSources
    })
  }

  return <div className="use-feature-layer-setting p-2">
    <DataSourceSelector
      types={Immutable([AllDataSourceTypes.FeatureLayer])}
      useDataSources={props.useDataSources}
      useDataSourcesEnabled={props.useDataSourcesEnabled}
      onToggleUseDataEnabled={onToggleUseDataEnabled}
      onChange={onDataSourceChange}
      widgetId={props.id}
      isMultiple={true}
    />
    {
      props.useDataSources && props.useDataSources.length > 0 &&
      <FieldSelector
        useDataSources={props.useDataSources}
        onChange={onFieldChange}
        selectedFields={selectedFields() || Immutable([])}
      />
    }
  </div>
}

 

chachamonkey

Disregard the previous, code. I copied from the wrong settings. This was the altered code.

import { React, jsx, Immutable, DataSourceTypes, UseDataSource, IMFieldSchema, DataSource } from 'jimu-core';
import { AllWidgetSettingProps } from 'jimu-for-builder';
import { IMConfig } from '../config';
import {
    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> {

    constructor(props) {
        super(props);
        this.state = {
            selectedFields: {}  // This will be in the form: { [dataSourceId]: { fieldName: field } }
        }
    }


    onDataSourceChange = (useDataSources: UseDataSource[]) => {
        // Update the widget's settings to reflect the selected data sources
        this.props.onSettingChange({
            id: this.props.id,
            useDataSources: useDataSources,
        });
    };

    onFieldChange = (attributeName, allSelectedFields: IMFieldSchema[], ds: DataSource) => {
        const fieldName = allSelectedFields[0].jimuName;

        // Update the local state with the selected field for the given attribute
        this.setState(prevState => {
            const updatedFieldsForDataSource = {
                ...prevState.selectedFields[ds.id],
                [attributeName]: fieldName
            };
            return {
                selectedFields: {
                    ...prevState.selectedFields,
                    [ds.id]: updatedFieldsForDataSource
                }
            };
        }, () => {
            const existingFields = this.props.useDataSources.find(item => item.dataSourceId === ds.id).fields || [];
            const newFields = Array.from(new Set([...existingFields, fieldName]));
            // Update the widget's settings to reflect the new selected fields
            this.props.onSettingChange({
                id: this.props.id,
                useDataSources: [...this.props.useDataSources].map(item =>
                    item.dataSourceId === ds.id
                        ? { ...item, ...{ fields: newFields } }
                        : item)
            });
        });
    };

    renderFieldSelectors(dataSource, fieldCount) {
        const selectors = [];
        const dataSourceFields = this.state.selectedFields[dataSource.dataSourceId] || {};

        for (let i = 0; i < fieldCount; i++) {
            const fieldKey = `${dataSource.dataSourceId}_field_${i + 1}`;
            const selectedField = dataSourceFields[fieldKey];

            selectors.push(
                <FieldSelector
                    key={i}
                    useDataSources={Immutable.from([dataSource.asMutable({ deep: true })])}
                    isMultiple={false}
                    isDataSourceDropDownHidden={true}
                    isSearchInputHidden={false}
                    useDropdown={true}
                    placeholder={`Select Field ${i + 1} for ${dataSource.dataSourceId}`}
                    useDefault={false}
                    onChange={this.onFieldChange.bind(this, `${dataSource.dataSourceId}_field_${i + 1}`)}
                    selectedFields={selectedField ? Immutable.from([selectedField]) : Immutable([])}
                />
            );
        }
        return selectors;
    }

    render() {
        return (
            <div>
                <div className='widget-setting-br-buffer-tool'>
                    <SettingSection className='node-selector-section' title='Select Datasource for Activity Nodes'>
                        <SettingRow>
                            <DataSourceSelector
                                mustUseDataSource
                                types={Immutable([AllDataSourceTypes.FeatureLayer]) || Immutable([AllDataSourceTypes.FeatureService])}
                                useDataSources={this.props.useDataSources}
                                onChange={this.onDataSourceChange}
                                widgetId={this.props.id}
                                isMultiple={true}
                            />
                        </SettingRow>
                    </SettingSection>
                    {this.props.useDataSources && this.props.useDataSources.length > 0 && (
                        <React.Fragment>
                            {this.props.useDataSources.map((dataSource, index) => (
                                <SettingSection key={index} className='node-selector-section' title={`Fields for ${dataSource.dataSourceId}`}>
                                    {index === 0 ? this.renderFieldSelectors(dataSource, 6) : this.renderFieldSelectors(dataSource, 6)}
                                </SettingSection>
                            ))}
                        </React.Fragment>
                    )}
                </div>
            </div>
        );
    }
}

export default Setting;