Using DataSourceComponent in a custom widget

JarrettGreen

I am attempting to use the DataSourceComponent to listen for selection changes on a data source. This works but I want to isolate the listener to certain events. For example, I only want this to be triggered when a user searches on my data source from the OOTB Search widget. I have the searchWidgetId and assumed the widgetId prop of the DataSourceComponent would handle this, but it doesn't honor that. Any selection made on this data source from any widget triggers the querySelectableDataSources from the onSelectionChange callback.

Below is the relevant functions and full JSX at this point. Any help is appreciated!

  const getFeatureLayerDataSource = (dsId: string) => {
    const dataSource = dataSourceManager.getDataSource(dsId);
    if (dataSource) {
      return dataSource as FeatureLayerDataSource;
    }
    return null
  };

  const constructFeature = (ds: FeatureLayerDataSource, record: DataRecord): ISelectedFeature => {
    const feature = {
      dsId: ds.id,
      attributes: record.getData(),
      geometry: record.getGeometry(),
      oidFieldName: record.dataSource.getIdField(),
      popupTemplate: ds.getPopupInfo()
    }
    return feature
  };

  const doQuery = () => {
    // conditions to exit out of the querySelectableDataSources function
    if (mapClickQuery["geometry"]) {
      // This can get called when a user clicks on the map, exit out of the function
      return false;
    }

    return true;
  };

  const querySelectableDataSources = (dsId: string) => {
    // This function is called when the widget is loaded
    // To return all the fields, ensure that each data source in the useDataSources
    // object in the app config has a property of "fields: ['*']"
    // This should be set in the settings implementation

    // It's also called when the data source selections are changed
    // Intended to handle selections from the search widget
    // Check doQuery to determine if we should proceed with the query
    if (!doQuery()) {
      return;
    }

    const dsLoaded = dataSourceManager.getDataSource(dsId);
    if (dsLoaded) {
      const featureDataSource = getFeatureLayerDataSource(dsId);
      const selectedRecords = dsLoaded.getSelectedRecords();
      if (selectedRecords.length > 0) {
        const selectedFeature = constructFeature(featureDataSource, selectedRecords[0]);
        dispatchSelectionChange([selectedFeature]);
      }
    }
  }

  const dispatchSelectionChange = (selectedRecords: ISelectedFeature[]) => {
    setIsRecordSelected(selectedRecords.length > 0);
    props.dispatch(appActions.widgetStatePropChange(props.widgetId, "selection", selectedRecords));
  }

  return (
    <div css={style}>
      <div className="imagery-viewer">
      </div>
      <JimuMapViewComponent
        useMapWidgetId={props.useMapWidgetIds?.[0]}
        onActiveViewChange={activeViewChangeHandler}
      />
      {tryCreateDataSourcesFinished ? (
        <>
          {props.useDataSources.map((useDataSource, index) => (
            <DataSourceComponent
              key={index}
              useDataSource={useDataSource}
              widgetId={props.config.searchWidgetId}
              onSelectionChange={() => querySelectableDataSources(useDataSource.dataSourceId)}
            />
          ))}
          {isRecordSelected ? (
            <div className="imagery-viewer-header jimu-widget">
              <ImagePopup {...props} jimuMapView={jimuMapView} />
            </div>
          ) : (
            <div className="imagery-viewer-header">{errorMessage ? (errorMessage) : (props.config.noSelectionMessage)}</div>
          )}
          <UserOptions {...props} />
        </>
      ) : (
        <Loading />
      )}
    </div>
  );

 

TimWestern

Yes, that's one example.

This SDK Repo has an example of how to do it.
Experience Builder SDK Resource - Message Subscriber - Custom Action example 

The one thing I'll add that took me a while to figure out, if you know you only ever have 1 of the widget in an experience, then you can put a defined id in one of two places either in the widget.json or as I did for my recent action, I created a shared defaultConfig file that I used in the action and the widget so its ID would always be the same.

I think I actually found a way you might infer at least the 'first' instance of it found in the config dynamically (to open that widget) from a method like this:

 

openCustomWidget = (): void => {
    // Lookup the dynamically assigned widget ID in the Experience Builder configuration
    const widgetUri = 'widgets/your-custom-widget/'
    const widgets = getAppStore().getState().appConfig.widgets // Get the current app widgets config

    // Find the widget with the specified URI
    const widgetEntry = Object.entries(widgets).find(
      ([, widgetConfig]: [string, any]) => widgetConfig.uri === widgetUri
    )

    if (!widgetEntry) {
      console.error(`No widget found with URI: ${widgetUri}`)
      return
    }

    const [dynamicWidgetId] = widgetEntry // Extract the dynamically assigned widget ID (e.g., "widget_34")
    console.log(`Found widget ID: ${dynamicWidgetId}`)

    // Check if the widget class is already loaded
    const isClassLoaded = getAppStore().getState().widgetsRuntimeInfo?.[dynamicWidgetId]?.isClassLoaded

    if (!isClassLoaded) {
      // Load the widget class dynamically
      WidgetManager.getInstance()
        .loadWidgetClass(dynamicWidgetId)
        .then(() => {
          getAppStore().dispatch(appActions.openWidget(dynamicWidgetId))
          console.log(`Widget (${dynamicWidgetId}) opened after loading.`)
        })
        .catch((err) => {
          console.error('Error loading widget class:', err)
        })
    } else {
      // If already loaded, just open it
      getAppStore().dispatch(appActions.openWidget(dynamicWidgetId))
      console.log(`Widget (${dynamicWidgetId}) opened directly.`)
    }
  }

 

 

But again, if you have a widget that can open multiple instances I don't think that code approach works 😕