The templates are the most important and at the same time the most interesting part of VS Builder. They permit you to create large blocks of code in seconds. Take a look at the code below to see how templates work. If you want to learn more about templates and theirs possibilities take a look at the underscore's template system.
VSComponents.add({ title: "Logo", form: { align: true, // Returns a select with the 'dataName' set to 'align'. Depending on what option will be set in the select, you'll get 'l-al', 'l-ac' or 'l-ar' (witch stands for layour align left, layout align center and layout align right). So you can use them as classes in your template. // Describe the list of inputs and don't forget to set to all of them a 'dataName', because that's how you can access them from the template. inputList: [ { type: "text", tooltip: "Write the url for the logo image", label: "Image logo", dataName: "image", dataType: "image", important: true, path: "img/logos/" }, { type: "text", tooltip: "Write a URL to the logo on click action, ex:'index.html'", label: "Url address for logo", dataName: "url" } ] }, // Now within your template you can use already created inputs. All you have to do is to scope them with '<%= dataName %>'. // If your input has a 'dataType' set to 'multiple', you can loop through values using the underscore's each function like in the example below. // <% _.each(dataName, function(item){ %> // <p><%= item %></p> // <% }) %> template: [ "<section>", "<div class='logo-wrapper <%= align %> '>", "<h3 class='logo'>", "<a href='<%= url %>'>", "<img src='<%= image %>' alt='logo'>", "</a>", "</h3>", "</div>", "</section>" ].join('') });