javascript - 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

フォームを定義する

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

次にフォームを作成します

<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();
          }
        );

次に、ボタンをクリックすると ajax 経由で呼び出してフォームを保存するボタンがあります

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

そして最後に saveFieldsForm() 関数

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

                                }           
                        }
                });    
                }); 


}

ポートレットで

private String saveFormBuilder(ResourceRequest resourceRequest) {

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

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


    }