What is a subform?


They work exactly the same as simple forms do. By the way there are some differences. The main difference is that the values from the subForm inputs could not be used inside the css templates. And the second difference is that the subForm will create sub components and you will be able to loop through them within your template. Let's make our previous component more advanced using a subForm.

VSComponents.add({
    title: "Text with list",
    form: {
        inputList: [
            {
                type: "textarea",
                tooltip: "Enter your text",
                label: "Text",
                dataName: "text",
                important: true
            },
            {
                type: "text",
                tooltip: "Pick a color for the text",
                label: "Text color",
                dataName: "textColor",
                dataType: "color"
            }
        ]
    },

    subForm: {
        buttonText: "Add list item", // String - the text written on the submit button.
        inputList:[ // Array - usual list of inputs like in simple form. 
            {
                type: "textarea",
                tooltip: "Enter the list item text",
                label: "List item text",
                dataName: "title", // String - if one of inputs has 'dataName' set to 'title', it's value will be displayed in the drag-n-drop list above the submit button. And you'll be be able to sort your sub itmes. Otherwise all the items will be untitled and it will be difficult to understand what stands behind this item.
                important: true
            }
        ]
    },

    template: [
        "<section>",
            "<div class='text'><%= text %></div>",
            "<ul>",
                "<% _.each(subItems, function(item){ %>", // Do an each loop through the subItems and reach theirs data with the dot notation, where 'title' is the 'dataName' of the input.
                    "<li class='lists-item'><%= item.title %></li>",
                "<% }) %>",
            "</ul>",
        "</section>",
    ].join(''),

    css: [
        {
            selector: ".text",
            properties  : [
                {
                    name    : "color",
                    value   : "textColor"
                }
            ] 
        }
    ]
});

Last update:
2014-11-22 12:40
Author:
Vlad Sargu
Revision:
1.0
Average rating: 5 (1 Vote)