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

Queries and Resources
1

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.

Screenshot 2024-01-04 at 4.29.54 PM
Screenshot 2024-01-04 at 4.29.54 PM628×924 45.4 KB

2

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
3

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.

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

  // Use these indices to gather the relevant information
  return {
    id: bath2Indices.map(index => item.id[index]),
    url_thumb: bath2Indices.map(index => item.url_thumb[index]),
    url_optimized: bath2Indices.map(index => item.url_optimized[index]),
    url_raw: bath2Indices.map(index => item.url_raw[index]),
    latitude: bath2Indices.map(index => item.latitude[index]),
    longitude: bath2Indices.map(index => item.longitude[index]),
    created_at: bath2Indices.map(index => item.created_at[index]),
    description: bath2Indices.map(index => item.description[index]),
    ai_description: bath2Indices.map(index => item.ai_description[index])
  };
}).filter(item => item.id.length > 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.

4

Solved it!

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

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

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