Hey guys!
How do you convert or change a collection Field Type before insert?
For more context, I connected my collection to 123 Form Builder. I was able to set the field types, but with each new submission, I’m having to manually “convert” the new data into tags. I’m hoping to create a hook to do so automatically for each new form submission.
I’m new to coding. Is that possible and on which page would I write the code?
I attached a screenshot.
Thank you!
To use a tags field in your dataset, you need to be using the checkbox group as the user input.
User Input Element
Checkbox Group
Description
Checkbox Group allow visitors to make multiple selections.
A checkbox group has a label (text displayed on your page) and a value (data stored in your collection). The options selected (values) by a visitor are saved as a batch of text separated by commas.
Connects to
Tags Field
You can use tags on your page with the Selection Tags element.
https://support.wix.com/en/article/adding-and-setting-up-selection-tags
https://www.wix.com/corvid/reference/$w.SelectionTags.html
And as shown in this example here.
https://www.wix.com/corvid/example/filter-with-multiple-options
You can also have a look at these for more info with 123 Form Builder.
https://www.wix.com/corvid/forum/community-discussion/pushing-data-collected-using-123formbuilder-to-wixcode-db
How to submit data from 123Form to your database
https://www.123formbuilder.com/docs/how-to-integrate-forms-with-wix-code/
How to use the 123FormBuilder app for Wix
Hi GOS,
Thank you for your quick response!
Just to clarify, I had already followed the steps from the tutorials listed above. I was also using the checkbox group as the user input in the 1 2 3 Form Builder.
For more context, I was successful in copying the user input from the 123 Form Builder to my database collection. My first issue was that the input was saved directly to the “live” section and my “sandbox” remained empty. It was forcing me to set the field types using the “sandbox” (which again, was empty). I was able to sync the two and resolved that issue. The field types are correctly set.
Now, my current issue is that with each new submission, I’m having to manually “convert” the new data into tags. I’m hoping to create a hook to do so automatically for each new form submission. I was told if your field on the collection is tags, you just need to convert the submitted list to a string array, e.g. [“one”,“two”,“three”]. You would put this in the beforeInsert hook.
I’m very new to coding, so I’m not sure how to achieve that. Do you have any suggestions?
I attached a screenshot of the past issue I discussed (left) and the current issue (right).
Thank you!
Yes have got it now. I will take pics from my sample page for the Wix Blog using Selection Tags.
As shown in the link for Wix API Reference and Selection Tags and the value function, you will see how they are used in code.
https://www.wix.com/corvid/reference/$w.SelectionTags.html
https://www.wix.com/corvid/reference/$w.SelectionTags.html#value
You can see how it is set when you use Tags in your dataset field, although it is displayed as just the one word in the highlighted box.
So, if you had a selection of tags in the dataset you would see them all separately, however they would be like this in the dataset field if it was text and not tags.
["Wixblog","Summer"]
Note that you do not have a space after the comma separating each word.
Again, note that there is no space between the words, it should just be the comma only.
If you add a space after the comma, then when you change the field from text to tags, it won’t change it correctly and you would end up with this.
So to fix the above you would need to delete the space after the comma for it to change back to tags again.
If you are using array in code to set something like in the Selection Tags reference for value, you would actually need to put the space in after the comma.
To change the string you have got to an array for this then you just need to use .split() and you can find a good page here about it that will guide you through it.
https://www.dyn-web.com/javascript/strings/split.php
As you are adding this value straight to the dataset field, you might need to add it without the space after the comma for it to be shown as tags properly.
Hi
Thank you again for your quick response, that was very helpful!
Looking at the references you sent and a Wix article on beforeInsert, I came up with this:
Collection name: 123FormBuilder_5428346
“Moods" Field Key: MOODS
export function 123FormBuilder_5428346_beforeInsert(item, context) {
item.MOODS = toKeywords(item.MOODS);
return item;
}
function toKeywords {
var moods = item.MOODS;
var newMoods = moods.split(‘,’);
console.log( newMoods )
}
Does that look correct to you and on which page should I add the code (since it was imported from 1 2 3 Form Builder)? My apologies, I’m again very new to coding!
Link to Wix article: https://support.wix.com/en/article/corvid-tutorial-processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks
Hi GOS,
I’ve updated the code, but I seem to be getting an error “item is not defined”.
Am I doing something wrong? How do I get the value of the “MOODS” field?
Collection name: 123FormBuilder_5433546
“Moods" Field Key: MOODS
Here is the code:
const collectionName = ‘123FormBuilder_5433546’ ;
export function collectionName_beforeInsert(item, context) {
item.MOODS = toKeywords(item.MOODS);
return item;
}
function toKeywords() {
var moods = item.MOODS;
var newMoods = moods.split( ‘,’ );
console.log(newMoods)
return newMoods
}
Thank you!
Great post guys there isn’t much written in the WIX docs about the checkbox group. thank you @givemeawhisky