Trigger() does not work from Data source field in image grid

I'm trying to pass a variable via additional scopes from the Data Source of an image grid and keep getting an error that trigger() is not a function.

I have a table named, "get_photos_by_context"

When I have the following set as the data source I get an error
{{ get_photos_by_context.trigger() }}

Why is this? If I call get_photos_by_context.trigger() from other places it works fine.

there are 2 problems I can see if I'm understanding your setup/situation correctly.

  1. tables don't have a .trigger() function, only queries and workflows do.
  2. second, Data Source (for any component) requires an array. The trigger() function actually returns a promise, not the results or return value of the query.

you would actually need something like {{ (await get_photos_query.trigger()).data }}. I've never actually tried using await in the value of anything before other than just in js queries, custom components, workflows.... the normal places where js code doesn't require {{ }}. you might have to do some finagling to get it to work with something like {{ return (async () => {(await get_photos_query.trigger()).data} }} to get access to await.... just be sure there is a space before the closing }}. if there are 3 in a row like }}}, the linter doesn't pick it up correctly.

1 Like

Thanks. get_all_photos_by_context and get_all_photos are queries, so not sure why they work when I use custom JS inside a JS Query, but not in Data Source fields.

I was able to get this sort of going using a gnarly map then filter work-around.

{{ => {
  // Filter indices where context is matching the list item
  const bath2Indices =, index) => context === "Bath 2" ? index : -1).filter(index => index !== -1);

  // Use these indices to gather the relevant information
  return {
    id: =>[index]),
    url_thumb: => item.url_thumb[index]),
    url_optimized: => item.url_optimized[index]),
    url_raw: => item.url_raw[index]),
    latitude: => item.latitude[index]),
    longitude: => item.longitude[index]),
    created_at: => item.created_at[index]),
    description: => item.description[index]),
    ai_description: => item.ai_description[index])
}).filter(item => > 0)[0]

Now the part I'm hung up on is identifying the index inside a List View. I have a List View that is showing one list item per context (via a separate query for distinct contexts), and my aim is leverage that inside the snipped above in replacement for "Bath 2". So it's dynamic.

Solved it!

Here's the final code for the Data Source field of an image grid inside of a List View.

{{ => {
  // Filter indices where context is matching the list photo
  const indices =, index) => context === item.context ? index : -1).filter(index => index !== -1);

  // Use these indices to gather the relevant information
  return {
    id: =>[index]),
    url_thumb: => photo.url_thumb[index]),
    url_optimized: => photo.url_optimized[index]),
    url_raw: => photo.url_raw[index]),
    latitude: => photo.latitude[index]),
    longitude: => photo.longitude[index]),
    created_at: => photo.created_at[index]),
    description: => photo.description[index]),
    ai_description: => photo.ai_description[index])
}).filter(photo => > 0)[0]
1 Like