PricingDocsAcademy
...
Wed, Jan 15, 1:54 PM
Log inSign up
Log inSign up
All topics

Idea/brainstorm (search, add, repeat)

  • /attachments/1319816965845684255/1319816966374162473/image.png

    alain

    25 days ago

    Hello team,

    Does anyone have any ideas on how I could achieve a functionality that goes like this:

    1. Search backend table of an exercise database via an input field
    2. Press enter to select
    3. The entered exercise gets added to repeating div formatted nicely like a card with a bunch of info.
    4. Can add and delete them
    image.png

  • Tom Ireland

    24 days ago

    Yes, Alain. Do you have a database you're using already for this e.g. Supabase, Xano, etc.?

  • alain

    24 days ago

    hey tom! im using Xano currently
  • nothing really in it right now all i have is authentication
  • @Tom Ireland
    Yes, Alain. Do you have a database you're using already for this e.g. Supabase, Xano, etc.?

    alain

    24 days ago

    im watching the shopping cart tutorial right now, it seems like theres some similar logic I could learn there
    👍1

  • Tod

    24 days ago

    Great energy @alain! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • @alain
    nothing really in it right now all i have is authentication

    Tom Ireland

    24 days ago

    It’s worth having a think about the data model, for example would you search by muscle like tricep, bicep, etc. What could you filter specifically using a category vs wildcard search. You could do both of course.

    A few of the backend appreciation month live videos the toddle crew did feature search a lot and you could use debounce to prevent hammering your API.
    ❤️1

  • Tom Ireland

    24 days ago

    I’m doing something similar at the moment for a couple of dropdown options but instead of refetching API results, I’m doing one call and then filtering on the front end.
    ❤️1
  • @Tom Ireland
    I’m doing something similar at the moment for a couple of dropdown options but instead of refetching API results, I’m doing one call and then filtering on the front end.

    alain

    23 days ago

    Would the benefit of doing it that way save on resources so you wouldn’t have to do so many API calls?
  • /attachments/1319816965845684255/1320437873211867159/IMG_7655.png

    alain

    23 days ago

    This is the type of functionality I’m trying to recreate with a better UI
    IMG_7655.png

  • alain

    23 days ago

    From what I see there is:

    1. An array that dynamically populates for every set of an exercise (which has inputs for lbs reps weight etc )
    2. A cumulative array that keeps tracks of the entire workout

  • alain

    23 days ago

    So far I was able to make a simple to do list type function that appends an array,

    Right now I’m trying to figure out how to make that to do list function he able to have 3 inputs sets reps weight instead of just one string input
  • @alain
    Would the benefit of doing it that way save on resources so you wouldn’t have to do so many API calls?

    Tom Ireland

    23 days ago

    Yeah, the main benefit is to prevent hitting your API so much but it depends on the use case.

    If I was approaching this scenario, I'd do everything from the front end (maybe store in local storage to prevent accidental loss of data if you refresh the page) and send everything to the db once done.

    I'd maybe have a formula, which takes some inputs like reps, weight, etc., assuming inputs remain consistent and use it as a way to capture a set, as an example. I'd then have a workflow, which would take similar inputs to pass to the formula and then append your set to the array. Do you follow?

  • alain

    23 days ago

    ah i see
  • i think im following a bit
  • my issue right now is that im setting inputs to a variable which is not dynamic
  • https://toddle.dev/projects/mobela/branches/ux/components/simpleWorkoutTracker?mode=test&leftpanel=design&rightpanel=style&canvas-width=360&canvas-height=740

  • alain

    23 days ago

    if you see the workout tracker currently, right now it will append reps and weight inputs to an array, but those values just copy over, versus being able to change the values on the next append
  • /attachments/1319816965845684255/1320458372520083618/Screen_Recording_2024-12-22_at_10.28.38_AM.mov

    alain

    23 days ago

  • Tom Ireland

    23 days ago

    I see the issue. I knocked up a quick example for you. Give me a few mins...
    ❤️1

  • alain

    23 days ago

    i think im catching onto the concept youre talking about. Using a formula to capture inputs and then running the workflow to capture and append that current state
  • since the variable will only store the current input.
  • @Tom Ireland
    I see the issue. I knocked up a quick example for you. Give me a few mins...

    alain

    23 days ago

    i appreciate your help!
  • /attachments/1319816965845684255/1320467599930167339/Screen_Recording_2024-12-22_at_11.05.21_AM.mov

    alain

    23 days ago

    getting there!

  • Tom Ireland

    23 days ago

    Here you go, @alain ! Hope it's useful. 🙂

    https://www.tella.tv/video/alain-and-his-exercises-hfdw

  • alain

    23 days ago

    sick thanks man gonna check this out and gather some questions!
    👍1

  • alain

    23 days ago

    damn this is crazy hahah gonna rewatch this a bunch of times to fully grasp whats happening
    👍1

  • Tod

    23 days ago

    Great energy @alain! Your continuous contribution to the toddle Community just made you advance to Community Level 3!

  • alain

    23 days ago

    really appreciate it
    👍1

  • Tom Ireland

    23 days ago

    @alain - Remembered the other approach for updating a specific object in an array by index. See https://www.tella.tv/video/alain-and-his-exercises-v2-5474
    ❤️1

  • alain

    22 days ago

    thanks again for this update tom!
  • I think im starting to get it
  • Im trying to understand why parameters are significant in this case
  • @Tom Ireland
    @alain - Remembered the other approach for updating a specific object in an array by index. See https://www.tella.tv/video/alain-and-his-exercises-v2-5474

    alain

    22 days ago

    I'm thinking it's because the parameters will allow us to dynamically choose which input field to modify based on the repeat item's index.

    I'm a bit confused on the concept of workflows taking parameters and formula's taking inputs.
  • @alain
    I'm thinking it's because the parameters will allow us to dynamically choose which input field to modify based on the repeat item's index.

    I'm a bit confused on the concept of workflows taking parameters and formula's taking inputs.

    Tom Ireland

    22 days ago

    Yes, you’re right - it makes things a lot more flexible and consistent. It can also make things more complicated as well. 😂

    Formulas always evaluate to something consistent. For example, if you pass in two numbers and the formula adds them together, you’re going to get a consistent answer. Workflows can alter variables, call APIs, etc., so you’re modifying state, which can cause you to smash your head repeatedly on the desk. 🤣

  • Tom Ireland

    22 days ago

    The good thing about workflows and formula is if you use them to perform repeat actions, you know where you need to go when solving a problem you might have introduced.

  • Tom Ireland

    22 days ago

    In your example, the set creation formula is always going to create an empty object for you and the add set workflow will always append an empty one to the array. This inspires confidence your logic is doing what it should. The update set workflow is the most complex part just now.
  • /attachments/1319816965845684255/1321156476802170942/Screen_Recording_2024-12-24_at_8.42.39_AM.mov

    alain

    21 days ago

  • alain

    21 days ago

    had to flip back and forth between both videos to make it make sense haha but i got it to work heres a demo

  • alain

    21 days ago

    now i want to add another layer of complexity basically wrapping this function within an exercise so

    add exercise [bench press]
    then this set workflow pops up.

    then can add another exercise with its own sets

    so basically what you'd end up with is the entire workout that would look something like

    Exercise 1: Bench press
    set 1: 10 reps, 100 lbs
    set 2: 10 reps, 100 lbs
    set 3: 10 reps, 100 lbs
    [add set]

    Exercise 2: Squat
    set 1: 10 reps, 100 lbs
    set 2: 10 reps, 100 lbs
    set 3: 10 reps, 100 lbs
    [add set]

    [add exercise]
  • /attachments/1319816965845684255/1321167835375997029/Screen_Recording_2024-12-24_at_9.27.45_AM.mov

    alain

    21 days ago

  • the challenge here is that there's no data flowing from the component to the parent 😂

  • Tom Ireland

    21 days ago

    Nice work, Alain! 💪
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Møller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

© Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle