PricingDocsAcademy
Bluesky ...
Wed, Dec 11, 10:32 PM

Create/Edit form flow

  • Sam B

    15 days ago

    I have multiple pages which can take the create flow or the edit flow depending on the user action. Here is what I do:

    1. I set a variable called "mode" to session storage. It may take a value "create" or "edit" depending on which button was clicked.
    2. In the first form page, there are 2 fields, say "name" and "description". It needs to be populated from database if it's an edit flow or it'll be blank if it's create flow
    3. To handle this, I have 2 formulae, 1 for name, 1 for description
    4. I call them populateName and populateDescription. I use DefaultTo and use a GET API's response against 0 and leave it blank for 1. Meaning, if the API responds with a value, that'll be populated, else it will be blank
    5. If the user wants, he/she can change the existing value and click on Submit
    6. I have two variables "name" and "description". On change event of the textbox, I set event.target.value to these variables.
    7. On Form submit, I check the mode and branch out to POST or PUT flow
    8. It branches out perfectly. In the PUT API, in the Body section, I set an object with name and description as keys and set the values (as set in Step 6)
    9. When I submit the form, it invokes the PUT request, the problem I face is, it does not send the updated value in Name and Description textboxes, it sends the populated value.
    10. I'm not binding the variables to the text boxes, since I have different flows which is why I do Step 6 explicitly

    What am I missing? Can someone help please?
  • Tom Ireland

    15 days ago

    I can't quite grasp the issue based on the description but it sounds like your variables might not be updating correctly, resulting in the update not having any effect on change event - assuming I have understood you correctly.

    Can you share a video of you walking through the process in the editor and display the variable values after updating the values?
  • /attachments/1310853576523780106/1310863285964247040/image.png

    Sam B

    15 days ago

    Thanks for reading. Yep, it's quite difficult to follow with these many steps, my bad 😒

    But the good news is, just after I posted here I figured out what was the mistake. I was calling a workflow in the wrong position. I removed it and it's all good.

    As a follow up question, what's the best way to check whether an API returns a value or just null. I use Equals and as the first entry I call the GET API and as the compare value, I just use null. But it never is equal although my API is returning null. What's the correct way to check?
    image.png
  • Tom Ireland

    15 days ago

    No need to apologise, @Sam B - it's hard to articulate these things in writing sometimes.

    Great to hear that you managed to solve the original issue. πŸ™Œ

    Re: your last question, the API is returning undefined and there isn't a way to check that as a comparison. It would be better if you can set your API to return a different result e.g. false , null, etc. What backend are you using?
  • Tom Ireland

    15 days ago

    As an example, I have a GET request (using Xano) that returns the results if a user provides an auth token. If not, it returns data as null, including an error and status code, so I can use that as the basis of my check.
  • Sam B

    15 days ago

    Alright, that's a good idea. I also use Xano. Let me modify my API and see how it goes. Thanks!
  • Tom Ireland

    15 days ago

    Great! I think you'd just need to tweak the result of what's returned in your API at the end of the function stack. πŸ‘
    βœ…1
  • Precondition is a good one to use as well depending on the use-case. πŸ˜‰
  • Sam B

    15 days ago

    I added a boolean variable that I set using is_empty filter on the query response. I return this boolean variable as part of my Xano response and in toddle I based my conditions on this newly returned boolean variable.

    It worked like a charm. Thanks for the tip!
  • Tom Ireland

    15 days ago

    Awesome. πŸ™ŒπŸ» Glad to hear you managed to solve this and leverage your API to assist with front end state.

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!

Β© Copyright 2024 toddle. All rights reserved.