Nested forms

Webix JS
#1

Hi,

is it OK to have nested “forms”. I mean nested (view: “form”) ?

For example i have a multiview where each “cell” is a (view: “form”).
Inside one of those views i have a datatable.
Now i want to add a input field and a button above this datatable that would “add” a new row to datatable.

Is it OK if i create a new (view:“form”) inside of a parent (view:“form”)?

#2

It’s OK if the parent form is intended to act as a regular layout (container) for the nested one. In such case, get/setValues of the parent form won’t affect the inner form by default.

But if your use-case is more complex, could you please describe it a bit further?

#3

Hi! i’m looking for arround same thing:
for my “user” table, i need email, username and password, but for “user_datas”, need adress, technical_id.
I would made one form for twice but when i do .getValues(), i have {email:“foo”, username:“bar”, password:“foobar”, adress:“barfoo”, technical:“8”}.

I would like to have a getValues() result like :
{email:“foo”,
username:“bar”,
password:“foobar”,
userdatas:{
adress:“barfoo”,
technical:“8”
}
}

how to get nested values for server side treatments?
thanks

#4

@Guillaumem59
https://docs.webix.com/api__link__ui.form_complexdata_config.html

{
    view: "form",
    complexData: true,
    elements: [
        {name: "email"},
        {name: "username"},
        {name: "userdatas.address"},
        ...
    ]
}
#5

Oups ! Very nice thanks see this page but don’t look about “name:nestedparamkey.key” method.
Thanks a lot @integral my code looks better now :slight_smile:

but have an other issue:
when I send form.getvalues(), it seems like nested object is “Json.stringified”. I mean that params = {email:“foo”, username:“bar”, password:“foobar”, userdatas:{ adress:“barfoo”, technical:“8” } }

get changed when sended in ajax post to:
{email:“foo”, username:“bar”, password:“foobar”, userdatas:"{" adress":“barfoo”," technical":“8”}"}.

Is it possible to undo this Json transform in webix side or is it only possible in serveur side?

thanks :wink:

ps: i read https://docs.webix.com/helpers__ajax_operations.html, but don’t see something about this change.

#6

I don’t use ‘post’ proxy with complex data. I prefer custom proxy like that:

webix.proxy.api = {
            $proxy: true,
            load: function(view, callback, params) {
                var $this = this;
                params = (webix.extend(params || {}, $this.params || {}, true));
                webix.ajax().bind(view)
                    .headers({ "Content-Type": "application/json" })
                    .post($this.source, JSON.stringify(params), callback);
            }
};

and use as { url: “api->/path/to/source” }
for manual posting you can use this approach:
webix.ajax().headers({"Content-Type":"application/json"}).post('/path/to/source', JSON.stringify(data), callback);
but on the server side you will have to handle request body (not form data) and convert it to object using ‘json_decode’ or other platform dependent method.