Saving dynamically created form' s schema

Question

I need to dynamically create forms. These forms can be edited, and the new form template(in json) should be persisted after that. Here is the code I use to create dynamic forms:

dhtmlx.image_path='./codebase/imgs/';

            var main_layout = new dhtmlXLayoutObject(document.body, '1C');

            var a = main_layout.cells('a');
            var str = [
                { type:"button" , name:"form_button_1", value:"Add"  },
                { type:"fieldset" , name:"form_fieldset_1", label:"Fieldset", list:[
                { type:"input" , name:"form_input_1", label:"Input", labelWidth:100  },
                { type:"input" , name:"form_input_2", label:"Input", labelWidth:100  }
                ]  },
                { type:"fieldset" , name:"form_fieldset_2", label:"Fieldset2", list:[
                { type:"input" , name:"form_input_3", label:"Input", labelWidth:100  },
                { type:"input" , name:"form_input_4", label:"Input", labelWidth:100  }
                ]  },
                { type:"fieldset" , name:"form_fieldset_3", label:"Fieldset3", list:[
                { type:"input" , name:"form_input_5", label:"Input", labelWidth:100  },
                { type:"input" , name:"form_input_6", label:"Input", labelWidth:100  }
                ]  },
                { type:"button" , name:"form_button_2", value:"Remove"  },
                { type:"button" , name:"form_button_3", value:"Save"  },
                { type:"button" , name:"form_button_4", value:"Save JQ"  }
            ];

            var form_1 = a.attachForm(str);

            var toolbar_1 = a.attachToolbar();
            toolbar_1.setIconsPath('./codebase/imgs/');
            toolbar_1.loadXML('./data/toolbar.xml', function(){});

            var k = 4;
            form_1.attachEvent('onButtonClick', function(name, command){
                if (name == "form_button_1") {
                    var itemData = { type:"fieldset" , name:"form_fieldset_" + k, label:"Fieldset" + k, list:[
                        { type:"input" , name:"form_input_" + k + "_1", label:"Input", labelWidth:100  },
                        { type:"input" , name:"form_input_" + k + "_2", label:"Input", labelWidth:100  }
                        ]  };
                    form_1.addItem("form_1", itemData, k++);
                }
                else if (name == "form_button_2") {
                    k--;
                    form_1.removeItem("form_fieldset_" + k);
                }
                else if (name == "form_button_3") {
                    var itemsList = form_1.getItemsList();
                    var i=0;
                    for (i=0;i<itemsList.length;i++) {
                        var theItem = "" + itemsList[i];
                        var itemValue = form_1.getItemValue(theItem);
                        alert(form_1.getItemType(theItem + ": " ));

                    }
                }
                else if (name == "form_button_4") {
                    // HERE I NEED THE STRING THAT CAN BE USED TO CREATE THIS FORM LATER
                }
            });

When I press form_button_4 I should get a json array like str above, so that I can use this array in order to create the same form later. How can I do this? I tried almost all functions here but I couldn' t get any proper string.

Do you know any other simpler way to achieve this? May be a different library than dhtmlx?

Thanks in advance

score 1 · Answer 1 · answered Mar 16 '14 at 23:52

I looked through the documentation, and although it does not look like DHTMLX provides the ability to get a form's configuration back out after it has been created, there is something you can do to get exactly what you want. Normally, you would have to reverse engineer their code (painful), which would mean that any version changes to their code cause your code to break.

However, here is a simpler way. All you have to do is keep track of your changes. Here's how.

When you start out, you have the variable str that holds your form's configuration in an array.

    var str = [
        { type:"button" , name:"form_button_1", value:"Add"  },
        { type:"fieldset" , name:"form_fieldset_1", label:"Fieldset", list:[
        { type:"input" , name:"form_input_1", label:"Input", labelWidth:100  },
        { type:"input" , name:"form_input_2", label:"Input", labelWidth:100  }
        ]  },
        { type:"fieldset" , name:"form_fieldset_2", label:"Fieldset2", list:[
        { type:"input" , name:"form_input_3", label:"Input", labelWidth:100  },
        { type:"input" , name:"form_input_4", label:"Input", labelWidth:100  }
        ]  },
        { type:"fieldset" , name:"form_fieldset_3", label:"Fieldset3", list:[
        { type:"input" , name:"form_input_5", label:"Input", labelWidth:100  },
        { type:"input" , name:"form_input_6", label:"Input", labelWidth:100  }
        ]  },
        { type:"button" , name:"form_button_2", value:"Remove"  },
        { type:"button" , name:"form_button_3", value:"Save"  },
        { type:"button" , name:"form_button_4", value:"Save JQ"  }
    ];

When you add a fieldset, also add the configuration of the new fieldset to the existing configuration.

str.splice(k, 0, itemData);
k++;

When you remove a fieldset, also remove the configuration of the old fieldset from the existing configuration.

k--;
str.splice(k, 1);

Then, when you want to get the configuration out as a string:

var string = JSON.stringify(str);

I had a little fun with this and mocked up a working example in raw javascript at http://jsfiddle.net/bbankes/jvPbm/

score 0 · Answer 2 · answered Mar 14 '14 at 04:14

For some simple forms, I created elements on the fly using clone() and $('') and inserted them into the form. When submitting, I used $('').html() then mime encoded it and saved it.

It's a very crude way of doing things but worked well for the the task at the time.

Demo: http://jsfiddle.net/LPYuu/1/

<form>
  <input class="textbox-clone">  
  <input type="submit" value="submit">
</form>


<div onclick="$('#form-code').val(  escape( $('form').first().html() )  )">1. get form code</div>         


<div onclick="$('form').first().html('')">2. clear form</div>           

<div onclick="$('form').first().html(  unescape( $('#form-code').val() )   )">3. retrive form from textbox code</div>           


<textarea id="form-code">    
</textarea>

Saving dynamically created form' s schema

2 Answers2