В этой статье мы расскажем, как отобразить данные из Airtable на веб-сайте с помощью Softr и сохранить ответы пользователей обратно в Airtable.
Мы свяжем Softr с Airtable, чтобы создать на сайте список и страницу с детальной информацией, а также добавим функцию комментариев, чтобы сохранять ответы пользователей в таблицу 'Table - Comment' в Airtable.
Из-за ограничений функции предварительного просмотра Softr нам потребуется создать пользователя, войти в систему, перейти со страницы списка на страницу с детальной информацией, оставить комментарий и проверить ответ в Airtable, чтобы убедиться в успешной реализации функции.
Это содержание является продолжением нижеследующего.
На этот раз мы рассмотрим, как отобразить содержимое Airtable на сайте с помощью Softr.
Для тестирования мы немного изменим содержимое в Airtable.
Затем создадим сайт в Softr. Можно настроить страницы, предлагаемые по умолчанию. Я выбрал Home и List.
На странице списка, при выборе списка, справа отобразятся настройки, где в Source можно подключить Airtable.
После подключения вы увидите в предварительном просмотре информацию, введённую в Airtable. Отсутствующие данные будут отображаться как значения по умолчанию.
Теперь мы хотим перейти со страницы списка на страницу с деталями и получить ответы. И сохранить эти ответы обратно в Airtable.
В настройках справа переходим в Actions. И в Item Buttons меняем действие. Я выбрал Open detail pages.
В Select page мы решим создать новую страницу. И выберем подходящую Detail Page.
После создания страницы добавляем блок Comments.
Подключаем Airtable к созданному блоку Comments.
Перед этим мы не можем использовать существующую таблицу, поэтому переходим в Airtable и создаем новую таблицу. Я назвал её 'Table - Comment'.
Затем изменяем поля соответствующим образом. Я создал Email, Comment, Date, RecordId.
Если вы сделали всё это, вернитесь в Softr и подключите Airtable к блоку Comments, в Source.
Теперь проверим. Softr предоставляет функцию предварительного просмотра, но комментарии можно оставлять только авторизованным пользователям. Поэтому мы создадим пользователя.
Переходим, нажав на кнопку Users слева.
Можно связать информацию о пользователях с Airtable или другой службой, но здесь мы пропустим этот шаг, нажав Skip.
Создадим пользователя, нажав Add user(s) в правом верхнем углу.
Теперь вернемся на страницу Pages и перейдем на страницу списка.
И перейдем в режим предварительного просмотра, нажав кнопку Preview вверху.
В режиме предварительного просмотра можно переключиться в состояние авторизованного пользователя.
Авторизуемся под созданным пользователем, нажав на кнопку вверху.
Нажмем на кнопку в списке. При нажатии на кнопку вы перейдете на созданную ранее страницу с деталями.
Оставим комментарий.
Готово.
Теперь перейдем в Airtable и проверим, был ли оставлен ответ.