I’m currently facing an issue with displaying data from an AI Table on my screen. The data sheet contains 5 columns with multiple records. Although the GET request API was successful, I’m unable to link the data to the screen effectively. I’ve utilized the Data Builder wrapper as per the tutorials, but the data isn’t showing up. Additionally, I’ve added text variables to a group column on the screen, following the tutorial instructions, but the text isn’t editable after adding them.
Could you please assist me in correctly connecting and displaying the data on my screen? I need guidance on how to link the data records from the data sheet to the screen column and ensure it functions correctly.
Hey @Shrut_Patel first of all welcome to out community It seems for me you missed a step in the process, so let me walk you through the steps:
Create the API, add the data inside, and run the test to be sure it’s all working
Add a data builder wrapper above the widget or group of widgets where you will display the data
In case you want to display it in a list, use “ListView” widget.
Replace the placeholder widget with the placeholder you want (let’s say a Text Widget)
In the details panel you will find a button to connect data, choose “data” variable, which is the list coming from the data
Inside the placeholder widget (which we assumed it’s a Text widget), you will find a new variable there called “element” which hold the item from the data passed to that placeholder instance. Connect the “element” or what’s inside of it, with the property of the placeholder that is needed (For example, connect text property inside the Text widget that act as a placeholder, which “element.name” in case the element arrives has a name property inside).
I will publish a new doumnetation on using Listview which will make all of this clear. I will add the link here after it’s being publihsed within today or tomorrow maxmium.
if you need any further help still please let me know
hi, i tried the steps mentioned above, but it still doesnt work for me.
I need help with creating a proper table with five columns to receive the data from the API.
Field Grouping: What is the best way to group the fields for data display? Should I use rows or columns for organizing the data?
Text Variables Placement: Should the text variables be placed separately for the field titles and records, or is there a better way to structure them?
Data Binding: Could you provide guidance on how to bind the respective data fields from the API response to the screen UI?
Hey @Shrut_Patel Thanks for posting here I am excited by what you are building I will make sure you build what’s in your mind sucessfully
So let me help you with your questions:
You can have many different layouts for the UI actually and there’s probably not a right and wrong answer. What I will do is that I will create a component which present the actual row in the table, and this component will be with the row layout and contains many Text widgets, then i will use that component as the placeholder for a ListView widget (I recommend you using the new way of displaying data using ListView and not using Groups. Check out this: When to use Listview and Gridview, and when to use Groups? - #3 by anas
For theText variables, you can create a text variable for each Text widget, but if you will use the structure I mentioned in the above point, you can also create an object that will hold a single row, and this object will hold the variables, but you can also simply create parameters in the component, each as a String so you can pass the row data easily from the Listview
For that, we will do a livestream on Sunday and we will work through the full flow of connecting the API to a Listview. If you can watch it live it will be great, otherwise you can watch it later as well
It seems for me you missed a step in the process, so let me walk you through the steps:
