Here’s a minimal “bridge” custom widget for Experience Builder that listens to a List’s selection and adds the selected feature as a stop to a Directions widget (or your own routing service). It’s a sketch you can drop into the ExB developer template and extend.
1) What it does
Subscribes to record selection from a target List.
Reads the selected feature’s geometry + a label.
Pushes it as a stop to your routing logic:
Option A: send a message to an existing Directions widget.
Option B: call your REST route (ArcGIS NA service or your API) and render results.
2) Files (core snippets)
manifest.json
{
"name": "list-to-directions-bridge",
"label": "List → Directions Bridge",
"type": "widget",
"version": "1.0.0",
"exbVersion": "1.14.0",
"author": "You",
"dep": ["jimu-core","jimu-ui","jimu-arcgis"]
}
config.ts
import { ImmutableObject } from 'seamless-immutable';
export interface Config {
listDataSourceId?: string;
directionsWidgetId?: string; // optional: if you want to message an existing Directions widget
autoRoute?: boolean; // call your route API automatically on selection
}
export type IMConfig = ImmutableObject<Config>;
setting.tsx (simple settings panel)
import { React, AllDataSourceTypes, DataSourceSelector } from 'jimu-core';
import { SettingSection, SettingRow } from 'jimu-ui/advanced/setting-components';
import { TextInput, Switch } from 'jimu-ui';
import { IMConfig } from './config';
export default function Setting(props: { config: IMConfig; onSettingChange: any }) {
const { config, onSettingChange } = props;
return (
<>
<SettingSection title="Data source (List)">
<SettingRow>
<DataSourceSelector
types={AllDataSourceTypes.FeatureLayer}
useDataSources={config.listDataSourceId ? [{ dataSourceId: config.listDataSourceId }] : []}
onChange={(useSources) =>
onSettingChange({
config: config.set('listDataSourceId', useSources?.[0]?.dataSourceId)
})
}
/>
</SettingRow>
</SettingSection>
<SettingSection title="Directions target (optional)">
<SettingRow label="Directions widget ID">
<TextInput
value={config.directionsWidgetId || ''}
onChange={(_, v) => onSettingChange({ config: config.set('directionsWidgetId', v) })}
placeholder="(optional) widget_XX"
/>
</SettingRow>
<SettingRow label="Auto-route on select">
<Switch
checked={!!config.autoRoute}
onChange={(_, v) => onSettingChange({ config: config.set('autoRoute', v) })}
/>
</SettingRow>
</SettingSection>
</>
);
}
Please let me know if this helps.
Regards,
Venkat
