How to use model.myModel JSONArray in checklist values?

[dallaskruse]

What if I were to have a JSONArray field within FM and pass the checklist VALUES into BF. And then use the Model to pass the info back?My JSONArray that I’m trying to pull from and use in VALUES is model.form.responseValues[18]

{ "featured": false, 
"hint": "Select all that apply", 
"label_calc": "model.lang == 'English' ? model.form.textQuestionEnglish[18] : model.lang == 'Español' ? model.form.textQuestionSpanish[18] : 'select a language'", 
"listBox": true, 
"model": "form.textResponse[18]", 
"required": true, 
"styleClasses": "col-md-6", "type": "checklist", 
"validator": "required", 
"values": ["{{model.form.responseValues[18]}}"] }

How would I format the “values” line to pull in my JSON array from FM?

[dallaskruse]

The goal here is to only have to enter in checklist values in one place

[Andrew]

Solution for vueMultiSelect

A vueMultiSelect can take an array of values from the model by using values_calc.

Take this multiselect for example:

{
            "hint": "This multiselect takes an array from the model using values_calc.",
            "label": "My Multiselect",
            "model": "selectedOption",
            "placeholder": "Select an option",
            "required": true,
            "selectOptions": {
                "allowEmpty": false,
                "closeOnSelect": true,
                "key": "id",
                "label": "name",
                "multiple": false,
                "searchable": true
            },
            "styleClasses": "col-md-3",
            "type": "vueMultiSelect",
            "validator": "required",
            "values_calc": "model.arrayFromFM"
        }

My model is where I want the selected option to be stored. In the selectOptions, there is a key field, which is your unique identifier (i.e. id), and a label field, which is the label of the options to select. Finally, values_calc points to an array in your model and is where you can grab the array you sent from FM.

Here’s an example of an array in the data model:

"arrayFromFM": [{
        "name": "Andrew",
        "id": "5"
    }, {
        "name": "Dallas",
        "id": "6"
    }]

*Edit: I noticed you want them to be able to select multiple options. In that case, you can set the multiple field in selectOptions to true.

[Andrew]

Solution for checklist

Futhermore, if you wanted to use a checklist, then you can do a similar technique.

{
                "type": "checklist",
                "label": "My Checklist",
                "model": "selectedOption",
                "styleClasses": "col-md-3",
                "listBox": true,
                "values_calc": "model.arrayFromFM",
                "checklistOptions": {
                    "value": "id"
                }
            }

In checklistOptions, the value field is your unique identifier.

[dallaskruse]

I tried this:

{
                "featured": false,
                "hint": "Select all that apply",
                "label_calc": "model.lang == 'English' ? model.form.textQuestionEnglish[18] : model.lang == 'Español' ? model.form.textQuestionSpanish[18] : 'select a language'",
                "listBox": true,
                "model": "form.textResponse[18]",
                "required": true,
                "styleClasses": "col-md-6",
                "type": "checklist",
                "validator": "required",
                "values_calc": "model.form.responseValues[18]",
                "checklistOptions": {
                    "value": "id"
                }
            }

I look in my Dev Tools and see my Array is arriving properly: (snippet) [18] starts at “Ankle”

"form": {
        "formKey": 2,
        "responseValues": [null, "", "Driver, Passenger", "Front, Right Rear, Left Rear", "Yes, No", "Driver, Passenger", "Front, Right Side, Left Side, Rear", "Straight Ahead, Right, Left", "Driver, Passenger", "Yes, No", "Yes, No", "Yes, No", "Yes, No", "Yes, No", "", "", "", "", "Ankle, Arm, Abdomen, Back, Buttocks, Chest, Ear, Elbow, Finger, Foot, Groin, Head, Hip, Jaw, Knee, Leg, Neck, Nose, Pelvis, Ribcage, Sacrum, Scrotum, Shoulder, Sternum, Tailbone, Tibia, Wrist", "", 

But what shows up in the checklist are options that are separated by each character and not each word (photo)

[Andrew]

Your values_calc is looking for an array, and technically you did give it one (a string is an array of characters). If you want to separate your values into an array, you’d need to run script that goes through the string and splits them into separate array values.

You can use a lodash function called _.split() to do this. _.split() takes 3 parameters, but only the first two are important: _.split(string, separator, limit)

In your case, you would do something like:

model.splitArray = _.split(model.responseValues[18], ',')

This splits the string with a comma as a separator.

In your values_calc, you would point it to your new array model.splitArray.

*Edit: You can actually do this without an onFormLoad, by putting the _split() directly into your values_calc:
"values_calc": "_.split(model.responseValues[18],',')"

[dallaskruse]

This is all crazy new to me … but it’s great to learn!

I’m guessing I can’t just put

"values_calc": "_.split(model.responseValues[18],',')",

into my checklist block?

I tried it and the result is:

I need to, somewhere, instatiate the lodash function?

[Andrew]

Your data model is structured a bit differently, it would be
"values_calc": "_.split(model.form.responseValues[18],',')"
since your array is nested inside of the form object.

[dallaskruse]

I should’ve noticed that. Apologies. THAT WORKED