How to extract structure from AlloyUI form builder?

Question

I have been playing around with AlloyUI form builder but I can't find how to get the data of the form I have been editing. I looked in the doc, the code... am I blind ? :-)

Thanks! Chris

Answer 1

Persisting the generated form to be represented later is something you must do on your own, so you can decide the structure that better suits your needs. The properties you're looking for are stored in the fields of the form.

A rough idea could be to iterate through the fields array and extract the information you want. For example:

var formXML = '<root>';

formBuilder.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'),
            width = item.get('width');

        var fieldXML = '<field>';
        fieldXML += '<type>' + dataType + '</type>';
        fieldXML += '<name>' + name + '</name>';
        fieldXML += '<required>' + required + '</required>';
        fieldXML += '</field>';
    }
}

formXML += '</root>';

Then, you can save that xml and use it later to replicate the form you edited from other parts of your site.

Answer 2

Define the form

<div id="myFormBuilder"></div>

then build the form

<script>
AUI().use(
        'aui-form-builder',
          function(A) {
            window.myFormBuilder= new A.FormBuilder(
              {
                availableFields: [
                  {
                    iconClass: 'aui-form-builder-field-icon-text',
                    id: 'uniqueTextField',
                    label: 'Text',             
                    type: 'text',               
                    width: 75
                    hiddenAttributes: ['showLabel','readOnly','required'],
                  },
                  {
                    hiddenAttributes: ['showLabel','readOnly','required'],
                    iconClass: 'aui-form-builder-field-icon-textarea',
                    label: 'Rich editor',
                    type: 'textarea'
                  }  

                ],
                boundingBox: '#myFormBuilder',
                fields: [
                  { name: 'change me',
                    label: 'Text',             
                    predefinedValue: 'chicago',
                    type: 'text'
                  }
                ]
              }
            ).render();
          }
        );

then, I´ve a button that when i click on it I make a call via ajax to save the form

<aui:button id="saveFieldsForm" onClick="saveFieldsForm()" name="saveFieldsForm" value="saveFieldsForm" />

and finally the saveFieldsForm() function

function saveFieldsForm(){  
    var formXML = '<root>';

    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 portlet

private String saveFormBuilder(ResourceRequest resourceRequest) {

        String formXML = ParamUtil.getString(resourceRequest, "formXML");

        _log.debug("*********************");
        _log.debug("articleId: "+articleId);        
        _log.debug("formXML: "+formXML);
        _log.debug("*********************");
        ...
            ...
            ...


    }