Webbox
Webbox incrusta una página web externa dentro de la encuesta como un iframe modal, permitiendo a los encuestadores ver referencias o interactuar con herramientas externas sin salir del formulario.
Webbox incrusta una página web externa dentro de la encuesta como una ventana emergente modal (iframe). El encuestador toca un botón en el texto de la etiqueta o nota, la página se abre en una superposición a pantalla completa dentro del formulario, y cuando la cierra regresa exactamente donde estaba. Esto le permite mostrar material de referencia, mapas, paneles o herramientas personalizadas sin abrir una pestaña del navegador separada.
Sintaxis
Inserte una etiqueta HTML <webbox> directamente en una columna label o note:
<webbox src='https://example.com/reference' title='Guía de referencia'>Abrir guía de referencia</webbox>
| Atributo | Descripción |
|---|---|
src | La URL a cargar en el iframe. Admite comillas simples y dobles. |
title | Texto que se muestra en la barra de encabezado del modal. Admite texto plano. |
| (contenido) | La etiqueta del botón en la que se puede hacer clic y que se muestra en el campo de la encuesta |
Ejemplo básico
| type | name | label |
|---|---|---|
| note | ref_guide | <webbox src='https://docs.example.com/field-guide' title='Guía de Campo'>📖 Abrir guía de campo</webbox> |
Esto renderiza un botón etiquetado “📖 Abrir guía de campo”. Cuando se toca, se abre un modal que muestra el sitio web de la guía de campo.
Incrustación de un mapa
| type | name | label |
|---|---|---|
| note | area_map | <webbox src='https://maps.example.com/survey-area' title='Mapa del área de encuesta'>🗺 Ver mapa</webbox> |
Pasar valores del formulario a la página incrustada
Agregue valores de campos del formulario a la URL usando concat() en la columna calculation y referencie el resultado en la etiqueta:
| type | name | label | calculation |
|---|---|---|---|
| calculate | webbox_url | concat('https://dashboard.example.com/household?id=', ${household_id}) | |
| note | hh_dash | <webbox src='${webbox_url}' title='Panel del hogar'>Abrir panel</webbox> |
El atributo src en la etiqueta <webbox> admite referencias ${fieldname} cuando la etiqueta se calcula desde un campo calculate. Construya la URL completa en un campo calculate y referenciarla.
Interacción en repetición: botones de eliminación
Webbox también admite etiquetas de acción especiales para gestionar grupos de repetición dentro de etiquetas:
<delete-repeat-current>Eliminar esta fila</delete-repeat-current>
<delete-repeat-last>Eliminar última fila</delete-repeat-last>
Estos se renderizan como botones que eliminan instancias de repetición cuando se tocan. Colóquelos en un campo note dentro (o justo después) del grupo de repetición:
| type | name | label |
|---|---|---|
| begin_repeat | items | Elemento |
| text | item_name | Nombre del elemento |
| note | delete_btn | <delete-repeat-current>✕ Eliminar este elemento</delete-repeat-current> |
| end_repeat |
Comunicación con la página incrustada (postMessage)
El iframe webbox y el formulario padre pueden comunicarse usando la API postMessage del navegador. El padre envía un mensaje init al iframe cuando se abre. La página incrustada puede responder con:
delete-repeat-current— activa la eliminación de la instancia de repetición actualdelete-repeat-last— activa la eliminación de la última instancia de repetición
Esto permite que las herramientas web personalizadas (p. ej., herramientas de dibujo, mapas interactivos) activen acciones del formulario cuando el usuario confirma una acción dentro del iframe.
Mejores prácticas
- Use webbox para material de referencia (directrices, tablas de búsqueda, mapas), no para recopilar datos que deberían estar en el formulario.
- Asegúrese de que la URL incrustada sea accesible desde la red del dispositivo; webbox requiere conectividad.
- Mantenga la página incrustada optimizada para móviles; el modal tiene un máximo de 800px de ancho y el 80% de la altura del viewport.
- Use texto de botón descriptivo (p. ej., “Ver mapa del pueblo”) en lugar de etiquetas genéricas (“Haga clic aquí”).
- Informe a los encuestadores que cerrar el modal los devuelve a la encuesta; algunos usuarios pueden no saber cómo cerrar una superposición de iframe.
Limitaciones
- Webbox requiere conectividad de red para cargar la URL incrustada.
- Algunos sitios externos bloquean la incrustación en iframes mediante encabezados
X-Frame-OptionsoContent-Security-Policy; estos sitios no se pueden usar con webbox. - El modal se cierra cuando el encuestador navega fuera de la pregunta; cualquier estado no guardado en el iframe se pierde.
- Webbox es una extensión de formulario web de rtSurvey y puede no funcionar en otros clientes compatibles con ODK.