How to Data Bind from app table to labels

Anvil Q&A
1

What I’m trying to do:
I am trying to make a scraper that returns product information and displays it on the application. Each item should have its own card with a label, and image.

What I’ve tried and what’s not working:

I’ve tried data binding to the label and image itself but it doesn’t work
But when I try doing the data binding on a repeating panel it works fine. But I don’t really like the look of the repeating panel.

image
image812×385 20.3 KB

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
https://anvil.works/build#clone:O2WIHXULYE3YTTPH=GQA4YRHL7FKXHFZMA2F6DRXP

2

Hi and Welcome to the Forum.

The problem is that you are not telling the cards where to get their information from.
The card’s data bindings are to self.item['image'] but self.item is still a blank dictionary because it has not been set yet. Even so, if you had set self.item it would the item dict for the Main form.

The easiest way is to create a form called RecordCard and copy and paste the card from your Main Form into it. I also added a flow panel to your main form.

Then in the init of main add the following code:

#### New Code
from ..RecordCard import RecordCard

for record in app_tables.records.search(): 
 self.flow_panel_1.add_component(RecordCard(item=record))

That should work.

I also set an arbitrary width on the cards to 350 px.

See this clone.
https://anvil.works/build#clone:4XKZT6SFWE4V5KGA=VCOJVTM455NFL7GN6ADXWSAD

3

Thanks so much!

I see what i did wrong and it works now

1 Like