How to Push Webflow form checkboxes to Xano (table reference list)?

James Cowen

Hi

Super new to Xano.
( I thought Airtable and Zapier was cool but Xano is mind blowing!)

I've got a webflow form pushing to Xano for an Awards Entry Form. Basic fields are working as per Prakash's webhook/json data video tutorial.

But I have no idea how to go about getting checkboxes from Webflow to Xano (table ref)

Here's my webflow form payload:[webflow_projectForm_payload.jpg]I want to map award_1, award_2, award_3 etc to the award_id table reference of my project DB. (Table ref is currently type integer, structure list).
A user can enter multiple awards for the one project.
[xano_project_tableRef.jpg]This is my data mapping in the Xano Post API for the project DB.
Just the awards_id array not working as I have no clue how to turn checkbox booleans into a list of integers? I will have 24 awards too, so looking for an efficient way for adding them all (hopefully not manually) ?
[xano_dataMapping.jpg]
Appreciate any pointers. Please me specific and clear. I'm very new to this.
Thanks in advance. Happy to join the Xano community 😀
-Cheers
James

David Richardson

Not sure if this is what you are looking for but in one of my Webflow forms I have about 50 checkbox submissions.  They are in the "data" payload like yours.  I set up a loop function to iterate over the lot and test for "true".  Note that these are elements of an 'object': name : value pairs.  

If you have set up the fields in your table to match the name(s) of the name value pairs  of the "data" object [award_1, award_2, ....] matching the "data" object name to the table field name "should" be rather straightforward.  In fact I think Xano does this automatically where spelling matches exactly.

When you set up checkbox fields in your table be sure to set them up as Boolean.  That field type is under "Other" under field types.

Generally speaking I've found it useful to set up Webflow form element names with an identical class name (so I can locate it easily in the Webflow Navigator panel on the left).  Where appropriate I might also set the form element ID to the name name,  And when you set up the form element in Webflow the "name" is the "name in the "data" payload.  

In Webflow, when you enter the name in the element box (the element 'wheel' icon) you will find that the name shows up in the name field in the wheel panel (right side of the Webflow screen) and the id field all at the same time. That is where you will also find the form settings panel and the field settings.  I discovered this can get a bit janky because id names *must* be unique on a page.  As a result Webflow will add "-2" or "-3' to an id name to avoid duplicate names.  If you set up a [label : input field] and copy and paste those multiple times in a form "to save yourself time" you are creating a situation you will have to resolve entering field names and id names manually anyway.  UGH!

There are other things Webflow does to change the form of classes and id names - changing camelCase to camelcase or removing spaces inserting a hyphen.  Using underscores in id and class names (where needed or desired) from the start helps preserve readability of your code and avoid undesired Webflow alterations.  

Maintain congruence in Webflow form fields for id and class names and Xano table field names.  That will generally make your life easier.

Chris Coleman

 Great advice, David. Thank you for sharing!

James Cowen

 Thanks very much for all your detailed information David.

I am more familiar with Webflow, and yes been caught out copying and pasting form fields before. Nice the Audit panel now tells you if you have non-unique IDs.

As for the Xano looping. I think I understand all that. Don't suppose you have a screenshot of your loop so I can see the setup or syntax?

Thanks again for your help

James Cowen

I still don't get how to convert

"award_1": "true", (checkbox)
into
awards_id: [integer] (table reference array)

David Richardson

James

The information from Webflow is passed to Xano via an API POST request.  Webflow passes it as a JSON object.  Prakash notes the value of www.webhooks.site to examine what the data packet looks like.  The data your are probably interested in from your form submission is typically "data" as JSON basically a string that can take a myriad of forms.  I've been hung up understanding how it access the JSON packet.  The information on the web oversimplifies what it is and presents JSON in all its complexity.  OOF!

I see you are attempting to interpret your Webflow checkbox as a Xano integer.  That is "logical" but you should use congruent data TYPES!  Boolean should map to boolean - NOT integer.

What comes into Xano from Webflow is JSON and you need to access the name value pairs. You see that in your question above.  

The input part of the API you are building needs a name to contain the JSON.  THAT name should be 'data' because that is what Webflow named it.  They should be the same.  So adding the '+' sign on inputs brings up a panel to select what form your input is - JSON.  It is listed under "Other" - the 8th item down on the list.

Selecting JSON the next panel asks for a name - type 'data' and then click 'save' at the bottom of the panel.

That will close the panel. 

Then in function stack you will want to click THAT '+' sign to select an operation of function.  Since you want to interact with your table adding data select database requests and then in the next panel choose a 'statement'  -  probably add a record.  Then you will be asked which table to add a record.  Select your table.

IF (a big IF) your names in Webflow match the names in your table fields, you can 'map' the input to the table fields.  This requires you use 'dot' notation.  Your data object is 'data' and comprises a number of name value pairs:  "Title": "Star Trek".  to access the VALUE of 'Title' (Star Trek) use 'data.Title'.  So 'your_variable_name' = data.Title; assigns 'Star Trek' to 'your_variable_name' or put another way 'your_table_field_name' (hopefully "Title") = data.Title  

If the naming conventions are as I suggested where names are congruent, your job will be much easier.  If you are a poor speller (like me) just copy and paste the names to avoid problems.

When your table field is Boolean and your Webflow form field is a checkbox (also boolean) and 'data.boolean_field' names are the same and same type (boolean) it's pretty straight forward there too to map the field to the data input. 

Just starting out as a noobie, you're not going to break anything making a mistake.  Mistakes are a learning experience.  Back up, start from scratch.  It's all good.  Michael U. notes there are a lot of videos but making mistakes and exploring how the mistake was made is how we learn.  Hope that helps and if I got anything wrong of course add your comments.