PricingBlog

Add to list on button click

  • building_stuff-1195759835074015273

    Janis

    2 years ago

    Hi all, I struggling with finding a proper solution for the following: I have a page that displays multiple listviews similar to the attached screenshot. Each listview is populated via a filtered Supabase query where every list item corresponds to a row. Now I would like to implement CRUD actions but I cannot figure out how I can add to the list on a button click? Any help or pointers is greatly appreciated. Thank you 🙂
  • Tod-1195759858864103525

    Tod

    2 years ago

    Great energy @Janis! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • building_stuff-1195760222199894076

    Janis

    2 years ago

    1195760221981769798-image.png
  • lucasg-1195785403014332566

    Lucas G

    2 years ago

    Pull your rows and save them to a variable and use that variable to display the list in toddle.
  • When you add an item to the list, add the values to the variable and simultaneously POST the new row to your database
  • Using a variable will help you display updated values without having to wait for API calls
  • lucasg-1195786081300385926

    Lucas G

    2 years ago

    Make sure to show an error if the POST call fails so the user knows their new list item didn’t save
    🙏1
  • building_stuff-1196128656905486356

    Janis

    2 years ago

    Thank you so much for your help!

    I managed to do the first part. So now I have the Supabase query which is saved to a variable and that variable is then used to show the list. I can also click on the plus button and an empty item is added. How do you achieve the POST part though? The text is displayed in a div with a contenteditable attribute. I have an input event but cannot find the proper way to save it to the variable.
    1196128656741896223-image.png
  • lucasg-1196156802618892340

    Lucas G

    2 years ago

    Save the input to a 'userInput' variable and append that to the existing 'list' variable then send that to your supabase database
  • Use POST or PATCH depending on whether youre adding a new row or updating an existing one