How to extract structure from AlloyUI form builder?

Question

I played with the AlloyUI form designer, but cannot find how to get the form data that I edited. I looked into the document code ... am I blind ?:-)

Thanks! Chris

Answer 1

Saving the generated form, which will be presented later, is something you should do yourself, so you can choose a structure that better suits your needs. The properties you are looking for are stored in the form fields.

A common idea would be to iterate through the fields array and extract the necessary information. For instance:

 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>'; 

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

Answer 2

Define the form

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

then create a 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 have a button, when I click on it, I make a call through ajax to save the form

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

and finally, 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 portlet

 private String saveFormBuilder(ResourceRequest resourceRequest) { String formXML = ParamUtil.getString(resourceRequest, "formXML"); _log.debug("*********************"); _log.debug("articleId: "+articleId); _log.debug("formXML: "+formXML); _log.debug("*********************"); ... ... ... }