AlloyUI Form Builder trying to access the elements created dynamically

Question

I have built a dynamic form using AlloyUI form builder. I want to capture the elements which ever I drag and drop in the bounding box. I came across something like this:

function saveFieldsForm(){
var formXML = '';

myFormBuilder.get('fields').each(
function(item, index, collection) {
    var dataType = item.get('dataType'),
        indexType = item.get('indexType'),
        label = item.get('label'),
        multiple = item.get('multiple'),
        name = item.get('name'),
        options = item.get('options'),
        readOnly = item.get('readOnly'),
        repeatable = item.get('repeatable'),
        required = item.get('required'),
        showLabel = item.get('showLabel'),
        type = item.get('type'),
        tip = item.get('tip'),
        predefinedValue= item.get('predefinedValue'),
        width = item.get('width');

    var fieldXML = '<field>';
    fieldXML += '<type>' + type + '</type>';
    fieldXML += '<name>' + name + '</name>';
    fieldXML += '<required>' + required + '</required>';
    fieldXML += '<tip>' + tip + '</required>';
    fieldXML += '<predefinedValue>' + predefinedValue + '</predefinedValue>';        
    fieldXML += '</field>';
    alert("fieldXML: "+ fieldXML);
    formXML += fieldXML;
});

formXML += '</root>';
 alert("formXML: "+ formXML);

 AUI().use('aui-io-request',
            function(A) {           

        A.io.request(
            '<%=ajaxURL%>',{
                data: {                         

                    formXML : formXML,

                },
                dataType: 'json',
                on: {                                                                                            
                        success: function(data) {   
                            alert("Your form has been saved!")

                        },

                        error: function(jqXHR, textStatus, errorThrown) {

                            alert("Error, the content has not been saved! Please try again...");    
                            console.log(textStatus, errorThrown);                       

                            }           
                    }
            });    
            }); 

}

In the above code I understand that the drag and dropped field are being captured but i don't understand the item, index and collection fields inside the function in the very second line of code. What are these values and from where are these getting populated? Please help!!!

Answer 1

The myFormBuilder.get('fields') returns an Alloy UI ArrayList which is where you get the each function. The parameters for the callback come from "within" the ArrayList .

I recently used the form-builder and captured my form in a very similar manner. However, I saved mine as JSON .

var formDefinition = [];

var parser = function(fields, container){
  fields.each(function(item, index) {
    var surveyElement = {};
    var properties = item.getProperties();

    properties.forEach(function(property) {
      var attr = property.attributeName;
      surveyElement[attr] =  item.get(attr); 
    })
    surveyElement.name = item.get('name');

    var children = item.getAttrs()['fields']
    if(children && children.size() > 0){
      surveyElement.children = [];
      parser(children, surveyElement.children);
    }

    container.push(surveyElement);
  });
 }

parser(formBuilder.get('fields'), formDefinition);
var json = JSON.stringify(formDefinition)

• item is the "current" item being provided by the each function.
• index is the position of that item at its depth within its bounding element

I did not use the collection parameter, so I had to investigate. It appears the collection represents all of the elements at the same depth of item within a specific bounding element. In other words, if item is nested within some other element, then the collection is scoped only to that parent .

Example

• Text Box
  • Checkbox 1
  • Checkbox 2
• Radio Buttons
  • Checkbox 3

Imagine each has provided Text Box . That will be item , with index of 0, and collection will be an ArrayList with two elements (I'll use javascript syntax for simplicity) [{formElement: Text Box},{formElement: Radio Buttons}] . Next, each provides Checkbox 1 . The index will again be 0 since this is the first element at this "depth" and since it is within Text Box the collection will only contain Checkbox 1 and Checkbox 2 . The each then provides Checkbox 2 , index is now 1 with collection being unchanged.

each will continue until it has traversed all of the form elements.