Saving form's view to local storage

Webix JS
#1

Good day webix team! Is there any method to save&load form’s view created by “.addView()” to local storage? Thank you in advance.

https://snippet.webix.com/n4cti4vb (string: 58, 64)

#2

Как должен выглядеть результат загрузки после сохранения?
Это форма с текстовыми полями, где label - значение первого поля, а введенный текст надо сравнивать с ранее введённым ответом?
В любом случае надо смотреть в сторону getChildViews()
https://docs.webix.com/api__link__ui.form_getchildviews.html

#3

@Roman Здравствуйте. Мне нужно собрать значения полей и образ формы и сохранить все параметры в json формате, если это возможно.
Вот пример, где форма создается в цикле относительно модели(2 строка).

https://snippet.webix.com/h3q2lg8v

#4

Добрый день, @arik .
Попробуйте использовать такой компонент как Datalayout, с помощью него можно создавать повторяющиеся формы.
Чтобы сохранить текущее состояние данных в локальном хранилище:

var state = JSON.stringify($$("datalayout").getValue());   
webix.storage.local.put("state-data", state);

Чтобы восстановить сохраненное состояние:

var state = webix.storage.local.get("state-data"); 
var data = JSON.parse(state);
$$("datalayout").clearAll();
data.forEach(function(item){$$("datalayout").add(item)})

Вот пример реализации:
https://snippet.webix.com/vdkoytlo

P.S. Если форма сложная внутри, то конфиг элементов можно хранить где-нибудь и использовать define()/reconstruct(), чтобы обновлять в форме элементы.

#5

В первом приближении как-то так:
https://snippet.webix.com/9yzjeumz
лучше использовать TreeCollection для ваших данных.
При клике в дереве показывается соответствующая форма для нового пункта.
Сделал добавление только опроса и вопросов. Добавление ответов сделаете по аналогии. Если понадобится изменение уже введенных данных лучше сделать тулбар с кнопками редактирования, удаления и создания новых пунктов в зависимости от выбранного в дереве.

По окончании редактирования функцией
formsData.data.serialize()
получаете нужный вам JSON

#6

Хотя TreeCollection можно выкинуть и работать чисто с tree, но это зависит от условий, что у вас там ещё навешано

#7

@annazankevich Большое Спасибо!

#8

@Roman Большое Спасибо!

#9

@annazankevich а возможно хранить конфиг элементов в локальном хранилище? Это я к тому что, возможно мне придется динамически добавлять лишние “text” в форму. Другими словами видоизменять форму.

Code Snippet (6 строка). Как сохранить обновленную форму.

#10

Если у вас задача составления тестов - кто-то один создаёт тест, а другие люди отвечают на вопросы из него, то вам нужен несколько другой подход

#11

В этом случае одна из реализаций
https://snippet.webix.com/1o9j4n4e
Слева - для ведущего опрос, справа - для респондентов. Понятно, что располагаться они должны на разных страницах.

#12

@Roman Здравствуйте. Спасибо за пример! К сожалению, в данном примере есть проблема с отображением новых созданных опросов из списка и я не могу выяснить причину :(. Консоль выдает следующую ошибку: (Cannot read property ‘$scope’ of undefined).

#13

Поправил.
https://snippet.webix.com/1cg3o5yc
Это только скелет, который вы должны развивать сами. Но надеюсь, что смысл вы уловили. В TreeCollection формируется дерево опросы->вопросы->варианты ответов. Данные из этой коллекции можно сохранить где хотите, например в файле на сервере (лучше в БД).
Загрузив данные в коллекцию её можно преобразовывать в тест.
Вы так это задумывали?
Пересылать на клиент вопросы вместе с правильными ответами так себе идея