Melvyn Parr:
Hi All, is there any way of having a checklist in the same format as radio buttons… i.e. a long list rather than a list in a scrolling window?
Melvyn Parr:
now my head hurts lol
Andrew Dam:
Is there a part you’re stuck on?
Melvyn Parr:
all of it… tbh
Andrew Dam:
Let’s start from the beginning. In your Data Model, we need a field containing your array of values.
Melvyn Parr:
Andrew Dam:
I believe you may be in the wrong tab there. Are you in the Data Model tab or the Page Builder?
Melvyn Parr:
been a long day
Andrew Dam:
No worries, now we can create an HTML field in your page builder. You can grab one from the Snippet Library:
Melvyn Parr:
done ty
Andrew Dam:
Lastly, you can refer to the v-for loop from earlier. https://files.slack.com/files-pri/TBA1FH8N5-F03CUGD4NV8/image.png
Melvyn Parr:
it pulls through all the data rather than just whats selected?
Andrew Dam:
It currently doesn’t update the model when selected. You can add an action on click that updates the model.
For example, on @click, we can run a namedAction sending it the answer that was clicked:
@click="namedAction('updateAnswers', {answer: disability})"
Andrew Dam:
Note: This is only necessary when working with checkboxes, I’ve ran into issues with using v-model to bind.
Andrew Dam:
In your Page Info tab, you can create a named action that runs a function like so:
Andrew Dam:
My function runs a script that grabs the passed answer, and either pushes it to the answers array or if unselecting, splices it from the array.
var answer = action.options.answer
var index = _.findIndex(model.answers, function(element) { return element == answer; });
if (index === -1){
model.answers.push(answer)
}
else{
model.answers.splice(index, 1)
}
Melvyn Parr:
hi, can u share the text for the page info tab so i can copy it?
Andrew Dam:
I edited my previous message with the contents of the function, you can copy that.
Andrew Dam:
If you need the whole named action:
"updateAnswers": [
{
"action": "function",
"function": "var answer = action.options.answer\n\nvar index = _.findIndex(model.answers, function(element) { return element == answer; });\n\nif (index === -1){\n model.answers.push(answer)\n}\nelse{\n model.answers.splice(index, 1)\n}"
}
]
Melvyn Parr:
that goes into page info?
Andrew Dam:
Correct, under the namedActions. Can see that in the image I linked a little bit earlier.
Melvyn Parr:
yeah… i wanted that text to save typing it all lol
Andrew Dam:
The only part of the Page Info that’s needed is the named action.
Melvyn Parr:
line?
Melvyn Parr:
apologies… i have been working since 6am and its now 19:30… been a long day and my brain is fried
Andrew Dam:
Do you currently have a named action object in your Page Info?
Melvyn Parr:
Andrew Dam:
Great, on line 7 you have a namedActions object. You can paste the named action code I pasted earlier under that line.
"updateAnswers": [
{
"action": "function",
"function": "var answer = action.options.answer\n\nvar index = _.findIndex(model.answers, function(element) { return element == answer; });\n\nif (index === -1){\n model.answers.push(answer)\n}\nelse{\n model.answers.splice(index, 1)\n}"
}
]
Melvyn Parr:
like that?
Andrew Dam:
That looks right
Melvyn Parr:
cool… what next?
Andrew Dam:
Assuming all the steps were done, the checklist should now update the answers array.
Melvyn Parr:
where does this go
Melvyn Parr:
var answer = action.options.answer
var index = _.findIndex(model.answers, function(element) { return element == answer; });
if (index === -1){
model.answers.push(answer)
}
else{
model.answers.splice(index, 1)
}
Andrew Dam:
That is actually already inside the function that is line 10 in your image.
Melvyn Parr:
oh yeah…lol… just relaised
Melvyn Parr:
i must have missed something
Andrew Dam:
Looks like the answers array (line 6) is being updated correctly, was there a different desired result?
Melvyn Parr:
i just want to see what will be imported into FM… will that do that?
Melvyn Parr:
im so andrew i see line 6 now
Melvyn Parr:
sorry
Andrew Dam:
No problem, does this solve your issue?
Melvyn Parr:
so what $$ do i use when pulling into FM?
Andrew Dam:
All data passed from BF to FM is in the $$BF_Model
Melvyn Parr:
yep. but the
Andrew Dam:
It would be the name of the answers array, which I believe is currently answers.
Melvyn Parr:
ok cool… thank you Andrew… appreciate your help AGAIN
Andrew Dam:
Glad I could help! I’ll archive this thread on the forum for future travelers.
Melvyn Parr:
one last question… how do i make this required.?
Andrew Dam:
You can run a custom validation routine for HTML fields. First, give the HTML field "required": true, "validator": "calc", and a custom error message such as "errorMsg": "Please select an option.". Then, have a calc for the validator to check if the answers array has an answer: "validator_calc": "model.answers.length > 0".
Altogether, it will look close to:
{
"html": "<div v-for=\"disability in model.disabilities\">\n <input type=\"checkbox\" @click=\"namedAction('updateAnswers', {answer: disability})\">\n <label>{{disability}}</label>\n</div>",
"required": true,
"styleClasses": "",
"type": "html",
"validator": "calc",
"validator_calc": "model.answers.length > 0",
"errorMsg": "Please select an option."
}
Melvyn Parr:
oh ok… so its in the html element… thanks
