Custom AI component to build a collection?

Ask for Help
1

I have a simple table with 4 columns and 3 rows. creating a basic table lists all 3 rows just fine.

I am experimenting with using the gen ai component to display the table. i’ve added the columns i want in the data editor but the gen ai only lists the FIRST row of data no matter how i prompt it to display all the rows.

any ideas? thanks as always

2

I’m not sure 100% but in my understanding, the custom AI component can be used to generate a component such as text or image or a slider, but it cannot be used to generate a collection (the special component that point to all rows of a table).

I could be wrong, but that is my current understanding of the AI component.

3

Well that would explain what I’m seeing

When I ask it to display all rows it makes up dummy data

4

Typically what most of us do is generate JSON with all of the data from multiple rows and then feed that into the AI component. Getting the AI to understand the JSON is another story, but if you feed it a sample of the JSON, it can usually figure it out.

At a more basic level, you can feed it a comma delimited list of data, but it’s not as friendly if you have multiple pieces of data per row. In that case JSON is better.

4 Likes
5

Thanks for the reminder. I have all the data I need as JSON so I will give this a shot

Cheers

3 Likes
6

The “template” in AlpineJS is built specifically for this use case.

However, if you want to do something like “show details screen”, it’s a bit of a roundabout. You would have to tie each item to an action that:

  • Writes the rowID (you have to have something like that in the JSON) to a column in your user profiles row.
  • Relate that rowID to the right table to have access to the row.
  • Show details screen for that row.
1 Like
7

Hi @Carl_Johnson,

You can do this by creating your AI Component first, then dropping it into a ‘Custom Collection’. You can still make changes via the AI chat once it’s inside the collection. Here’s a quick example:

image
image1435×617 48.1 KB

I’m working on something similar and found the answer here (watch video to end): AI Custom | Glide Docs

4 Likes
8

That is a smart trick how did I not think of that :rofl:

2 Likes
9

Thanks so much for that reminder. i watched that video awhile back but the ability to drop into a custom collection is a game changer.

I still need a way to dynamically display the labels of 1st, 2nd, 3rd etc using this approach. I’ll be experimenting with ThinhDinh’s js idea. - new to me.

10

I’m not sure exactly what you mean (maybe you can add an example here of what you need), but you can ask the AI to add the labels e.g. I asked it to add the label ‘Joined:’ before the dates and to add icons to the other fields (its ‘birthday cake’ icon needs some work :joy:).

Also you can give it a sketch to show what you’re trying to achieve.

11

I am trying to display the row number of items like the Data Grid does. this is a common feature of tables in other apps I use. I’ve discussed this on Display row markers in tables not just the data grid - #5 by ThinhDinh

1 Like
12

As long as you can calculate that value, you can reference it as a variable in your AI component.

1 Like
13

and by calculating that value - do you mean implementing the 8 column approach provided in the other thread? It would be very handy if Glide could simply provide an option to number rows in tables just like it does now for the data grid :slight_smile:

14

It should be at most 3 columns if you use my approach.

The option to number rows in tables basically made the data grid impossible to work with CSS. I don’t think many people would be happy if the table component is the same way.

15

Good to know. Thanks for the historical context

1 Like