How Can I Make My List Widget Automatically Update Directions on the Map?

Question

Hi everyone,

I’m building an Experience Builder app (Developer Edition) and could use some advice. I have a List widget showing multiple store locations, and I’d like it so when a user clicks on a store, the map automatically updates with directions to that location—without the user needing to manually add stops in the Directions widget. Even better, if the user selects multiple stores, I’d love for the route to automatically optimize so it shows the shortest path. Is there a way to do this in the ArcGIS Online version without coding, or do I need to build something in Developer Edition? If Developer Edition is the way to go, what’s the best approach to pull the selected stores from the list, feed them into the Directions widget (or a Route Task), and display the optimized route on the map? Any tips, examples, or pointers would be awesome!

VenkataKondepati · Answer

Hi John,

Thanks! I don’t have access to the original S&P environment or that widget anymore, but here are two supported ways to wire List → Directions in Experience Builder:

A) No-code (built-in actions)

* Make sure the List and Directions use layers in the same map (or at least that the List items carry geometry).

* In Directions, enable accepting features as stops (Data actions).

* In List → Action: add a Message action for Record selection changes → target the Directions widget → Add as stop.

* Multi-select in the List lets users add multiple stops; in Directions, enable Optimize route to reorder.

B)  Low-code (custom widget “bridge”)

* Create a tiny widget that listens to the List’s selection and pushes stops into Directions:

// pseudo-code (TypeScript)
const ds = DataSourceManager.getInstance().getDataSource(listDsId);
ds.on('selectionChange', async () => {
  const recs = await ds.getSelectedRecords();
  const stops = recs.map(r => ({
    geometry: r.getGeometry(),
    attributes: { name: r.getData().Name }
  }));
  // publish a message or call your Directions VM to add stops
  MessageManager.getInstance().publishMessage(
    new DataRecordsSelectionChangeMessage(widgetId, recs)
  );
  // or, if you host your own route logic, call JS API Directions/RouteLayer here
});

* This keeps your UI simple: select in List → stops appear in Directions → Optimize.

When to choose which

* If your List items already have points and you just need “click to route,” A is fastest.

* If you need custom logic (e.g., dedupe, custom stop names/order, auto-route on select), use B.
Regards,
Venkat

GID · Answer

Thanks for the detailed breakdown—this is exactly the kind of functionality I'm looking to implement.

You're right that the hosted version of Experience Builder doesn’t currently support dynamic routing tied to list selections, so I’ve been worstore feature layer and then uses the ArcGIS REST Routing Service to generate optimized routes.

I appreciate the code snippet and would definitely be interested in checking out a working widget template if you're open to sharing it. That would really help speed up development.

Let’s stay in touch as I build this out. I’ll share back what I come up with too!

VenkataKondepati · Answer

Hi,

I've worked on a similar use case recently using ArcGIS Experience Builder Developer Edition, and here’s what I’ve learned:

Unfortunately, the hosted ArcGIS Online version of Experience Builder doesn’t currently support auto-populating the Directions widget based on dynamic selections from a List widget. Users still have to manually add stops, and route optimization (e.g., shortest path across multiple locations) isn’t available out of the box.

To achieve what you're aiming for—automatically generating and optimizing a route when one or more stores are selected from the list—you’ll need to use the Developer Edition.

Here’s a high-level approach:

* Listen to the List widget's selection: Capture the selected store locations.

* Use the ArcGIS REST Routing Service via the ArcGIS API for JavaScript or REST JS to compute the route.

* Enable optimization by setting:

* findBestSequence = true

* preserveFirstStop = true

* Display the resulting route on the map using a GraphicsLayer.

Example (Developer Edition):

Using RouteTask from the JS API, you can pass selected store geometries as stops and get an optimized route. Here's a simplified snippet:

const routeParams = new RouteParameters({
stops: new FeatureSet({ features: selectedStoreGraphics }),
findBestSequence: true,
preserveFirstStop: true,
returnRoutes: true
});
routeTask.solve(routeParams).then(result => {
// Add result.routeResults[0].route to the map
});

This lets you build a fully dynamic experience: when the user selects stores, the route automatically appears on the map—optimized and ready.

If you're new to the Developer Edition, I recommend starting with the official SDK and exploring custom widgets. Feel free to DM me if you’d like a working widget template or more detailed examples!

Hope this helps,
Venkat