Часто возникает вопрос: «Как создать форму с зависимыми раскрывающимися элементами?». Другими словами, как может быть несколько раскрывающихся списков на странице, где варианты второго или третьего раскрывающегося списка зависят от содержимого первого (например, выбор города после выбора страны). Мы собираемся создать приложение, которое будет делать это, а затем отображать изображение города, выбранного во втором раскрывающемся списке.
Посмотреть приложение можно здесь: https://bubble.is/site/countrycity/
А редактировать приложение можно здесь: https://bubble.is/page?id=countrycity
Вот как это выглядит
Для этого мы хотим, чтобы варианты раскрывающихся меню были динамическими, а их параметры брались из нашей базы данных приложения.
Первое, что нам нужно сделать, это определить различные варианты, которые мы хотим предложить. Другими словами, разные страны и города. Мы делаем это на странице «администратора», где мы сможем создавать некоторые «вещи» и определять отношения между ними. Давайте сначала создадим новую страницу с именем «admin».
Хорошо, давайте углубимся в логику нашей структуры данных. В нашем примере страны / города мы хотим создать два типа вещей. Один - «Страна», другой - «Город». Начнем с формы страны. В простом случае у страны есть название. Итак, давайте добавим форму ввода. Мы также хотим добавить кнопку сохранения.
Рабочий процесс здесь довольно прост: когда пользователь нажимает «Сохранить», мы создаем новую «страну» с этим именем. Мы определяем тип «Страна» в процессе построения рабочего процесса.
А теперь давайте построим вторую форму города. Давайте вставим элемент ввода для названия города и ввод изображения для изображения. Поскольку мы хотим, чтобы город был привязан к стране, давайте вставим раскрывающийся список, в котором мы выберем соответствующую страну. Нам также нужна кнопка «Сохранить этот город».
Параметры этого раскрывающегося списка должны быть динамическими, так как это будет список уже созданных стран. Для этого выберите «Динамический выбор» в качестве «Стиль выбора», а затем выберите «Страна» в качестве типа выбора. Что касается самого списка, давайте просто хотим найти все страны, которые были созданы. Для заголовка мы можем выбрать название текущего параметра. Вот как это выглядит.
Хороший. Теперь давайте построим рабочий процесс, который спасет город, когда пользователи нажимают кнопку «Сохранить».
Здесь мы хотим использовать действие «Создать новую вещь». Мы собираемся создать «город». Город будет определяться «названием» и «изображением», поэтому давайте создадим оба поля. Поля имени и изображения довольно просты; это текст и изображение. Для поля страны типом должно быть «Страна» (это то, что мы только что создали).
Поэтому, когда мы создаем новый город, мы сохраняем страну, выбранную в раскрывающемся списке.
Хорошо, у нас все хорошо со структурой данных и формами отправки. Теперь мы можем перейти на страницу, ориентированную на клиента, где люди могут выбрать страну и город (и увидеть их изображение). Давайте добавим два раскрывающихся элемента на нашу главную страницу и изображение под ними.
В первом раскрывающемся списке изменим местозаполнитель на «Выберите страну» и сделаем выбор динамичным (так как он поступает из сохраненных стран). Мы отображаем все отправленные страны, поэтому у нас нет ограничений на поиск.
Перейдем ко второму раскрывающемуся списку. Мы хотим, чтобы список параметров был динамическим и отображал только города, расположенные в стране, выбранной в первом раскрывающемся списке. Давайте откроем палитру поиска.
Мы хотим искать города, и мы хотим добавить ограничение на страну. Это должно быть значение раскрывающейся страны.
Хорошо, нам просто нужно определить, какое изображение мы хотим показать в нашем элементе изображения, и все готово. Мы дважды щелкаем по изображению и смотрим на поле «Динамическое изображение». Когда мы нажимаем «Вставить динамические данные», я могу выбрать содержание раскрывающегося списка «Город», а затем получить изображение.
Готово! За несколько минут мы создали довольно продвинутую структуру данных с адаптивным содержанием. В такое приложение можно добавить множество функций. Голосование за фотографии, поиск отелей, их бронирование и т. Д. =)
