gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

When Creating A Form Builder, How do I make the checkbox multiple select to be true as default? #769

Open JenuelDev opened 2 years ago

JenuelDev commented 2 years ago

When Creating A Form Builder, How do I make the checkbox multiple select to be true as default? image

ZaLiTHkA commented 2 years ago

you're likely to get a better answer than this if you post your current schema/options objects... however, since you talk about "checkbox multiple select", I'm going to hazard a guess and say you're trying to do something like "checkbox" input example 7.

basically, if you have an "array" of "strings" in the schema, with the fields set as "checkbox" in the options, you need to have the associated data entry as an array of the string values relating to the items that are "checked".

edit: might be easier to explain with comments in example 7's code snippet..

$("#field7").alpaca({
    "schema": {
        "type": "object",
        "properties": {
            "checkboxArrayEnum": {
                "type": "array", // <--- this makes the control show an array of items
                "items": {
                    "type": "string", // <--- this tells each item that it's value is a string
                    "enum": ["option1", "option2", "option3"]
                }
            }
        },
        "required": ["checkboxArrayEnum"]
    },
    "options": {
        "fields": {
            "checkboxArrayEnum": {
                "label": "Checkbox Array Enum",
                "type": "checkbox", // <--- this makes each item in the array render as a checkbox
                "optionLabels": ["Option #1", "Option #2", "Option #3"]
            }
        }
    },
    "data": {
        "checkboxArrayEnum": ["option1", "option3"] // <--- this causes `option1` and `option3` to show as "checked" in the rendered form
    }
});

does that help at all? 🤔