How to populate a repeating panel with a textbox

Hello, I am really enjoying building apps for the past year using anvil. I am currently trying to build a shopping web app and I am stuck trying to figure out the best way to create a add to cart feature. I have done it using data tables and linking it to user profile, but now i would like to use it without using data tabels.

I am trying to use the concept of populating a repeating panel from a list or a dict on the client side. But I fail at accomplishing it. I am having trouble appending one textbox value after a button click. Can someone create a simple app demonstrating this? Would be very helpful! Hopefully my request makes sense.

I really love this forum and all the support from its members.

hi @magdiel_adames, and welcome to the forum

could you share a clone link that demonstrates the behaviour you’re trying to achieve with the code you’ve tried?

someone on here will then be able to jump in and give you some suggestions.

I took this from another example that was posted in this forum. I am still new at python so I am having trouble with this. Here is a simple app that just has a textbox, button and repeating panel. I just want to understand how to enter one value and display it on the repeating panel. Then when i enter another item how to append it to the repeating panel.

https://anvil.works/build#clone:CZH4QHWS3CWSHDP2=EKCAZZA5C7IVKSZMPRYAE6W4

so you need to adjust the itemTemplate for the repeating panel.

add a label into itemTemplate

add a databinding


and boom… :boom:

I also changed a bit of code so that the new item was
{'foo':self.text_box_1.text}

https://anvil.works/build#clone:GUCHXPECHKNFN6PJ=VEEKBRNRJRXYHHQA6BZOEF4H

1 Like

Excellent, thank you so much!

Hey thanks for the solution, I added it to my Shopping App. I am trying to add items of a repeating panel to a “Cart” which is another repeating panel but it only displays the individual dictionaries of the Products select. How can I add all the products and display it to the repeating panel on the right?

Here is my app.
https://anvil.works/build#clone:IOMXARNNLD7JBASD=B3N6XJ44NLJ4QDARAJUJ54WS

AnvilApp

each item template is its own form.

notice how in the init method you are setting self.data = []
this is true for each item template of which you have 3

So you need to keep track of the data in the cart a different way.
each item template appends the item to its own self.data attribute (so when you click a new item template you are appending it to a different list…

Here’s one way you could do it.
https://anvil.works/build#clone:SBJ326OO3HGI3RHI=ZCVATU3UCPQTW4JZQTONSU7C

3 Likes

Thank you so much for your explanation and your help!