Creating form layout from a server

Webix JS
1

I have created a layout with rows, columns, tree and a form area.
I wish to be able to load different forms depending upon a tree onClick operation.
I am successfully loading the tree data from php and recreating this and getting the onClick operation.
I have seen the examples where a form is recreated with another form object already in javascript. I have seen examples where the form is retrieved from a server using ajax similar to my example

function setForm(formno){
          webix.ajax("form_config.php?form=" + formno, function(text){
           print (text);
            var m = $$('form');
            console.log(m);
            var c = webix.DataDriver.json.toObject(text);
            console.log(c);
            m.config.elements = c.elements;
            m.reconstruct();
});
}

The output from form_config.php is in json format .
the print statement shows the same json as in the php.
the console.log(m) shows the current form object
the console.log(c ) reports null.
I have tried different json layouts without success.
Should I be replacing the form element within the layout or the elements within the form.Any guidance as to the correct format, or if I am doing anything else wrong would be appreciated.

2

The mentioned approach will not work. The form elements (and any views as well) cannot be redefined this way.

Please check the article about dynamic layout rebuilding: Dynamic UI Modifications of Guides, Configuring Components Webix Docs.

Also, if JSON is valid, it can be set as a new configuration without any changes. Here’s a quick sample:

http://webix.com/snippet/ea20b22a

3

Thanks for the quick response.
I have changed my example around to this way.
The json is now recognised as an object, I did have an error in the file.
Now btnForm1 reloads the form with the elements defined with the page but btnForm2 still fails to load the json.
The remove and cler form options also do not appear to work.
The tree is working fine and I am loading a large dataset into it very quickly.

any further light on the subject would be gratefully received.

the json I send is

[
    
            { "view":"text", "label":"text box 1","value":"text input 1"},
            { "view":"text", "label":"text box 2","value":"text input 2"}
   
]

the test html file is

<html>
   <head>
    <link rel="stylesheet" href="/core4/js/webix/codebase/webix.css" type="text/css" charset="utf-8">
    <script src="/core4/js/webix/codebase/webix.js" type="text/javascript" charset="utf-8"></script>
       <title>CCLL membership</title>
   </head>
   <body>
       <div id='layout_div' style='width:1000px; height:1000px; margin:5px;top:0;left:0;'></div>
 
       
       
       <script type="text/javascript" charset="utf-8">

           webix.ui({
               container:"layout_div",
               id:"m_layout",
               height:1000,
               width:1000,
               rows:[
                   {
                            id:"m_menu", 
                            view:"menu",
                             data:[
                                {value:"test menu Item 1"},
                                {value:"Item2 has submenu",
                                    submenu:[
                                        {value:"sub1"},
                                        {value:"sub2"},
                                        {value:"sub3"}
                                      ]
                                   },
                                {value:"Item3"}
                                ]
                                  
                      },
                   {
                    id:"m_toolbar", 
                      view:"toolbar",
                        cols:[
                            {view:"button", id:"btnLoad", id:"btnLoad", value:"test toolbar",width:100,align:"left"},
                            {view:"button", id:"btnRemoveForm", id:"btnRemoveForm", value:"Remove Form",width:100,align:"left"},
                            {view:"button", id:"btnClearForm", id:"btnClearForm", value:"Clear Form",width:100,align:"left"},
                            {view:"button", id:"btnForm1", id:"btnForm1", value:"Form 1",width:100,align:"right"},
                            {view:"button", id:"btnForm2", id:"btnForm2", value:"Form 2",width:100,align:"right"},
                            {view:"button", id:"btnClearTree", id:"btnClearTree", value:"Clear Tree",width:100,align:"right"},
                            {view:"button", id:"btnLoadTree", id:"btnLoadTree", value:"Load Tree",width:100,align:"right"}
                           ]
                            
                                                           
                     }, 

                   {cols:[
                       {
                            id:"m_tree",
                            view:"tree",
                            width:250,
                            url:"./tree_test_data_small.json"
                       },
                       {
                            view:"resizer",
                            id:"m_resizer"
                   },
                       {   
                            id:"m_form",
                            view:"form",
                            width:600,
                            height:800,
                            elements:[
                                {view:"text", placeholder:"First Name"},
                                {view:"text", placeholder:"Last Name"},
                                {cols:[
                                {view:"button", value:"Cancel"},
                                {view:"button", value:"Sumbit", type:"form"}
                                ]}
                            ]                           
                        }
                   ]
                   }
               ]
           }).show();
           
           var obj1 = $$("btnForm1").attachEvent("onItemClick", function (id){
                     webix.ui([
                        {view:"datepicker", label:"Date"},
                        {view:"colorpicker", label:"Color"},
                        {view:"slider"}
                    ], $$('m_form'));
  

                });
             var obj2 = $$("btnForm2").attachEvent("onItemClick", function (id){
                setForm(2);
                });
            var obj3 = $$("btnLoadTree").attachEvent("onItemClick", function (id){
                 $$("m_tree").load("./tree_test_data.json");
                });
          var obj4 = $$("btnClearTree").attachEvent("onItemClick", function (id){
                 $$("m_tree").clearAll();
                });
          var obj4 = $$("btnClearForm").attachEvent("onItemClick", function (id){
                 $$("m_form").clearAll();
                });
         var obj5 = $$("btnRemoveForm").attachEvent("onItemClick", function (id){
                    $$('m_layout').removeView('m_form');
               });
               
               
               
               
               
function setForm(formno){
          webix.ajax("./form_test_layout.json", function(text){
          var c = webix.DataDriver.json.toObject(text);
          console.log(c);
          webix.ui(webix.DataDriver.json.toObject(text),$$('m_layout'),$$('m_form'));
});
}

$$('m_layout').attachEvent("onLoadError",function(text, xml, ajax, owner){
    alert ("Load Error");
    });
    
    
       </script>
   </body>
</html>
4

There’re several issues:

  1. The name property is required for the form elements, as all interactions are defined through it. Otherwise, the form is just a container.

  2. ui.form has the clear() method, not clearAll (it was made for the data components such as tree, datatable, etc.)

  3. As for the the elements replacement, $$(“form”) is the parent object. The following code will be enough:

webix.ui(webix.DataDriver.json.toObject(text), $$('m_form'));

I didn’t change the original JSON, so clear() method still won’t work for it.

http://webix.com/snippet/55a958c5

By the way, please consider the usage of the ui.multiview instead of layout rebuilding. Perhaps it will be handier, especially if forms are more complex.

5

Thank you for a quick and (obviously) correct response.
My testbed is working OK now and I can proceed with the real stuff.
I will investigate multiview in more detail.
Thanks again
Clive