Webbox
Webbox встраивает внешнюю веб-страницу внутри опроса в виде модального iframe, позволяя перечислителям просматривать справочники или взаимодействовать с внешними инструментами без выхода из формы.
Webbox встраивает внешнюю веб-страницу внутри опроса в виде модального всплывающего окна (iframe). Перечислитель нажимает кнопку в метке или поле note, страница открывается в полноэкранном наложении внутри формы, а при закрытии возвращается точно туда, где остановился. Это позволяет показывать справочные материалы, карты, панели мониторинга или пользовательские инструменты без открытия отдельной вкладки браузера.
Синтаксис
Вставьте HTML-тег <webbox> непосредственно в столбец label поля label или note:
<webbox src='https://example.com/reference' title='Справочник'>Открыть справочник</webbox>
| Атрибут | Описание |
|---|---|
src | URL для загрузки в iframe. Поддерживает как одиночные, так и двойные кавычки. |
title | Текст, отображаемый в заголовке модального окна. |
| (содержимое) | Метка кликабельной кнопки, отображаемой в поле опроса |
Базовый пример
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Полевое руководство'>Открыть полевое руководство</webbox> |
Отображается кнопка с надписью «Открыть полевое руководство». При нажатии открывается модальное окно с сайтом полевого руководства.
Встраивание карты
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Карта зоны опроса'>Посмотреть карту</webbox> |
Передача значений формы во встроенную страницу
Добавляйте значения полей формы к URL с помощью concat() в столбце calculation и ссылайтесь на результат в метке:
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Панель домохозяйства'>Открыть панель</webbox> |
Атрибут src в теге <webbox> поддерживает ссылки ${fieldname}, когда метка вычисляется из поля calculate. Создавайте полный URL в поле calculate и ссылайтесь на него.
Взаимодействие с повторениями: кнопки удаления
Webbox также поддерживает специальные теги действий для управления группами повторений внутри меток:
<delete-repeat-current>Удалить эту строку</delete-repeat-current>
<delete-repeat-last>Удалить последнюю строку</delete-repeat-last>
Они отображаются как кнопки, удаляющие экземпляры повторений при нажатии. Размещайте их в поле note внутри (или сразу после) группы повторений:
| type | name | label |
|---|---|---|
| begin_repeat | items | Элемент |
| text | item_name | Название элемента |
| note | delete_btn | <delete-repeat-current>Удалить этот элемент</delete-repeat-current> |
| end_repeat |
Обмен данными со встроенной страницей (postMessage)
iframe Webbox и родительская форма могут обмениваться данными с помощью browser API postMessage. Родитель отправляет сообщение init в iframe при его открытии. Встроенная страница может ответить:
delete-repeat-current— инициирует удаление текущего экземпляра повторенияdelete-repeat-last— инициирует удаление последнего экземпляра повторения
Это позволяет пользовательским веб-инструментам (например, инструментам рисования, интерактивным картам) запускать действия формы, когда пользователь подтверждает действие внутри iframe.
Лучшие практики
- Используйте webbox для справочных материалов (руководства, таблицы поиска, карты) — не для сбора данных, которые должны быть в форме.
- Убедитесь, что встроенный URL доступен из сети устройства — webbox требует подключения.
- Делайте встроенную страницу дружественной к мобильным — модальное окно имеет максимальную ширину 800 пикселей и 80% высоты области просмотра.
- Используйте описательный текст кнопки (например, «Посмотреть карту деревни»), а не общие метки («Нажмите здесь»).
- Информируйте перечислителей, что закрытие модального окна возвращает их к опросу — некоторые пользователи могут не знать, как закрыть наложение iframe.
Ограничения
- Webbox требует сетевого соединения для загрузки встроенного URL.
- Некоторые внешние сайты блокируют встраивание в iframe через
X-Frame-Optionsили заголовкиContent-Security-Policy— такие сайты нельзя использовать с webbox. - Модальное окно закрывается, когда перечислитель переходит к другому вопросу — любое несохранённое состояние в iframe теряется.
- Webbox является расширением веб-формы rtSurvey и может не работать в других ODK-совместимых клиентах.