Checkbox in component - saving to different dataslots

Apologies if I have misunderstood something simple - I have a component that is populated by data from a Xano table. The component has a checkbox next to it. This is then placed in the page within a list. I want the users to select the check box and the name of the produce to be saved to a data slot.

I essentially need to iterate through successive data slots (i.e. ds_ing1, ds_ing2 - up to 5) adding the produce text field to the next empty data slot. I will then make an API call to Xano using these dataslots.

I hope I’ve explained this clearly! Some screenshots for clarity:

I’m not sure what the best way to achieve this is - would this be better dealt with server side? Many thanks for any advice!

Welcome Kara. There are no stupid questions here!

Just so I understand: you want to find a way to make a list of all produce names that have a check mark, and then use that list as a parameter to a Xano API call?

Doe the list have to be formatted in any particular way? (are you passing it as text or json?)

Adam

Hi, I’m not sure what kind of Api endpoint you’re using but Xano can handle the JSON as part of the request. So you could simply build (with a script) a json into one data slot and then send that into Xano endpoint while calling the API.

If you’re simply filtering something based on the checkboxes then you can probably just build a comma separated list into Data slot and use that as filter in the endpoint and query.

Hello both,

Many thanks for you responses!

I am returning JSON but the format that Antti suggests would work perfectly for my needs. This list will be appended to a natural language request from another API, Xano side.

A list in the form of “Apples, Pears, Ham,” would be great.

I have limited experience with React JS and JS code but I really want to learn the nuts and bolts - do you have any good reference you could recommend?

Really appreciate this bit of software and the help on this forum! :slight_smile:

This is my personal favorite for learning any language:

There is a higher bar because you need to learn how to setup your own environment and also to read test scripts as specifications, and there are no lectures, you have to Google everything.

On the other hand: these are all reasons why I like it better. It really prepares you for the real world.

Did you find the pulldown menu in the script editor that inserts code for data slots etc.?

Adam

Thank you Adam for this! The data slot pull down feature has helped massively! I am currently trying to implement Antti’s suggestion - I may come and bug you all again but want to try and figure it out myself first (or at least give it a good crack).

I have some experience of programming but it is largely very simplistic, science based stuff in Python and VB - I do tend to find with things like this there is a light bulb moment where everything clicks!

Just for completion, and possibly for other’s future reference.

I decided to set this up server side (holding the ingredients in an array, then appending to the API call).

I couldn’t get the checkboxes to trigger the API call so I went with Icon Buttons which seems to work perfectly (just change icon when they are selected). In Chrome, when I clicked the original checkbox, nothing seemed to happen in the developer box network thingy (technical speak :slight_smile: ) but works beautifully with an icon button.

Thank you for the comments and links, this software has enabled me to do something I never thought I would be able to!

1 Like

Great that it worked. I think you could have trigger the Save data interaction -> Xano API call but it would still need couple interactions:

  1. First add/remove new checkbox selection value to data slot
  2. Save Data - Xano Api call -> call the endpoint with the Data slot value in the endpoint parameter (see screen shot below from another use case)
1 Like