How to aggregate data in several UI Component's and send to server (REST'fuly) ?

Hello and Greetings,
Problem: How get all the data present/selected in the elements and combine them in a single JSON object to be sent to the server via an REST’ful call.
Set-up information: I have created a simple page where I have different UI components: TextBoxes, Radio Buttons, List, Rich Select, Multiselect List, Checkboxes ( as given in http://docs.webix.com/desktop__controls.html )
Some of these elements are directly contained in views while some are embedded in the body of accordion.
Desired Action/Result: When I press the ‘Save’ button, all of the data contained in the various elements should be aggregated to a JSON object to be sent via a POST (REST’ful call).

e.g. of a ‘department’ object with the attributes that need to be sent to the server. Hence here, for example, the “area” value comes from a Textbox whereas value of “department_ranking” come from a Rich Select dropdown list. How do I collect all this data and put them into one JSON object ( like ‘shop’ below) to be sent as a POST to the server?
{
“department”:[
{“area” : “mathematical_computing”},
{"_id" : “01_computing"},
{“Applicable_industries” : [{
“Aerospace”: “true”,
“Marine”: “true”
}]
},
{“contact_person” : [{
“name” :“Jim”,
“contact_for”:“Lab Assistance”
}]
},
{“department_ranking":“b+”}
]
}

Any help or pointers would be greatly appreciated and helpful. Thanks in Advance!
-Tubu

The best way to implement this is to wrap the UI with all the controls into a Webix form, define names for the controls, and then use form’s getValues method to get the object with all the values.

Then you can do all the necessary modifications to create the needed data object. Note that Webix form supports complex data, which can simplify the task.

After that you can send the final object to server using webix.ajax.post().

You can read about Ajax operations here.

Check the snippet, please: http://webix.com/snippet/cb7561bd

Dear Helga,
I managed to get this far: http://webix.com/snippet/f2f6efd5
However when I try to wrap the entire elements into a single form I get lots of syntax errors and exceptions.
Would you be so kind to take a look and tell me where I am going wrong (at least syntatically) or else if the concept itself is not good.
Many thanks in advance.
Tubu

Dear Helga,
many thanks for your pointer. i was able now to wrap the UI in a form but I am not able to get all the elements in the form using getValues. http://webix.com/snippet/983d676f is the code snipped. Is there anything wrong I have still done? how can I debug where I am going wrong?
Thanking you again for all the kind help and support so far.

There should be one form that does not include other subforms. It can contain any layout elements like accordionitems, rows and cols, etc.

To include the control’s value into form values (acessed by getValues) you should provide name parameter for it.

Please check:http://webix.com/snippet/5503954f

Dear Helga,
Thanks for your help and super quick response (and to the entire Webix team as well). Based on your solution above I have a small question : I am still not able to get the values from the multiselect list as well as looking for an option to get the selected elements from a tree. Please be so kind to take a look at: http://webix.com/snippet/1a37c36e and suggest a path forward.

You need to derive selected elements separately as list.getSelectedId() and tree.getSelectedId().