What is inside the input list?


Let's talk about how you can get more advantage of the 'inputList':

VSComponents.add({
    title: "", // String [required] - the title of the component that will be listed in the VS Builder's UI.     
    form: { // Object [required] - the form that will be generated when selecting a component.
        inputList: [ // Array - a list of inputs, textareas, slects of what will consist your form
            {
                type: "", // String - the input type, possible values: text | textarea | select | checkbox
                tooltip: "", // String - some information on what this input is for.
                label: "", // String - visible text prepended to the input.
                placeholder: "", // String - input's placeholder.
                important: null, // Boolean - please don't confuse this with required, if important set as true, VS Builder will make sure that at least one input with important set true is not empty.
                dataName: "", // String - using this string will be generated a variable that will be used later in the template or CSS properties. Important: don't use white spaces.

                // If 'type' is set to 'text' you have some additional options by setting the 'dataType'. It's not required to set some 'dataType', it just sets some more data validation and makes some visual changes.
                // Available values for dataType: spinner | color | image | date | multiple
                dataType: "", // String

                // If 'dataType' is set to 'spinner', then the input expects a number and it will validate the data.
                // Now the input turned into a number spinner and you can change it's value by pressing the 'keyUp' and the 'keyDown'. 
                dataMin: null, // Integer [required] - min number value
                dataMax: null, // Integer [required] - max number value
                dataUnits: "", // String - addition units will be added to the number before being the template rendered. For example: 'px', 'em'. You can leave this empty and you'll get the pure number entered by the client.

                // If 'dataType' is set to 'color' you don't have any additional options, but the input turns into an color picker.

                // If 'dataType' is set to 'image', then the input expects an image title with it's extenssion. For exemple 'myimg.jpg'. The following extenssions will pass the validation: jpeg | jpg | png | gif | tiff.
                path: "", // String - the path that will pe prepended to the file name. If the client writes: 'myimg.jpg' and 'path' is set to 'images/' then in the template you'll get as value: 'images/myimg.jpg'. If you leave 'path' empty, you'll get the pure value written by the client.

                // If 'dataType' is set to 'color' you don't have any additional options, but the input turns into an date picker.

                // If 'dataType' is set to 'multiple', then the data written in the input will be converted to an array. The default separator is ';', but you can still change it by setting the 'splitBy' preperty.
                splitBy: "", // String - it could be any character you want.


                // If 'type' is set to 'textarea', you  don't have any addition options. VS Builder will just generate a multiline input instead of a single line input.

                // If 'type' is set to 'select', you have to specify it's options
                options: [ // Array - list of options in the dropdown
                    { // Object
                        text: "", // String - the text witch will be rendered in the VS Builder's UI
                        value: "" // String - the value witch will be returned in your template
                    }
                ]

                // If 'type' is set to 'checkbox', you'll have to specify what it have to return if it was checked and if it wasn't. You can still leave those empty and it will return just a true / false value.
                ifChecked: "", // String
                ifNotChecked: "" // String

            }
        ],
    },
    template: [
        '<p></p>'
    ].join("")
});

Last update:
2014-11-22 12:25
Author:
Vlad Sargu
Revision:
1.0
Average rating:0 (0 Votes)