Properly bind two forms to a combo

I have a combo of records, for example user details and a switch saying whether the user wants to be private or public. Due to design requirements, the switch must be placed outside the form. (I tried to do this using absolute layouts with negative coordinates but that didn’t work; so the question is specifically about using 2+ forms bound to the same combo.)

I’m using a DataCollection for the combo’s suggest, and I have two forms: one with the switch, and one with the user details. Both forms are bound to the combo’s list.

This snippet is self-explanatory and contains complete instructions for reproducing the unwanted behavior: the user details form doesn’t become aware of the changed value of the switch. When calling .save, the old value will overwrite the one selected by the user.

What am I doing wrong?

Note: I know that as a workaround, I can add in the elementsConfig.click() handler

$$('user-details-form').setValues({ [this.config.name]: this.getValue() }, true);

But the form is already bound to the DataCollection, so I don’t understand why that additional setValues() call would be needed.

Hi @dandv ,

The data binding from one source to several editable forms will lead to data collision: each form keeps the full set of values despite the number of inputs for representing certain fields.

As a general recommendation, it may be better to handle a complex use-case without data binding (which has quite strict and simple rules) using related events.
The logic will be more complex, however more transparent.

Still, it is possible to tune the updates in the needed way and maintain values of both forms.

I would suggest the following structure for the described scenario: https://snippet.webix.com/edou5l7y

There are several hints for updating the records:

• Bind forms to the original data source.
  The list within the suggest is not a reliable source, as data updates in binding are based on selection. The suggest is initially hidden and inactive, so the selection is set only by user action (click) and at the moment the popup is shown (if the value was set programmatically).

• Check if there is an item to update.
  Binding works even when no selection is set. If there is no item to update by form.save(), a new item will be added to the master component.
  DataCollection has a kind of virtual selection for data binding, which can be set manually (when an option is selected in the combo) and checked (before submitting the form).

• Prevent data collision.
  To save the changes from both forms and do not lose them, check whether the data was updated by a user in the 2nd form. Please note that you’ll need to restore them (including the “dirty” mark) manually after the 1st form was saved.