La función Diseño de cuadrícula le permite organizar preguntas en una cuadrícula de múltiples columnas dentro de un grupo, usando la etiqueta de apariencia gridformat<>. Esto es útil para formularios de entrada de datos densos donde múltiples campos relacionados deben aparecer uno al lado del otro en lugar de apilados verticalmente.

Cómo funciona

El diseño de cuadrícula se aplica en dos niveles:

  1. El grupo — establezca appearance: field-list grid(weight=N) para definir cuántas columnas tiene la cuadrícula
  2. Cada campo dentro del grupo — establezca appearance: gridformat<row=R col=C colspan=S/> para posicionar el campo

La cuadrícula utiliza un sistema de 12 columnas estilo Bootstrap. weight=N define cuántas columnas lógicas tiene su cuadrícula; cada columna ocupa 12/N columnas Bootstrap.

Apariencia a nivel de grupo

AparienciaDescripción
field-list grid(weight=2)Cuadrícula de 2 columnas (cada columna = 6 columnas Bootstrap)
field-list grid(weight=3)Cuadrícula de 3 columnas (cada columna = 4 columnas Bootstrap)
field-list grid(weight=4)Cuadrícula de 4 columnas (cada columna = 3 columnas Bootstrap)
field-list grid(weight=6)Cuadrícula de 6 columnas (cada columna = 2 columnas Bootstrap)

Sintaxis de gridformat<> a nivel de campo 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
AtributoDescripción
rowNúmero de fila (basado en 1)
colNúmero de columna (basado en 1, dentro de la cuadrícula definida por weight)
colspanNúmero de columnas que abarca este campo (predeterminado 1)
backgroundcolorColor CSS opcional para el fondo del campo (p. ej., #f0f0f0, lightblue)

Ejemplo: Sección de encuesta de hogar de 2 columnas

typenamelabelappearance
begin_groupdemographicsDatos demográficosfield-list grid(weight=2)
textfirst_nameNombregridformat<row=1 col=1/>
textlast_nameApellidogridformat<row=1 col=2/>
integerageEdadgridformat<row=2 col=1/>
select_one gendergenderGénerogridformat<row=2 col=2/>
textaddressDirección completagridformat<row=3 col=1 colspan=2/>
end_group

Esto se renderiza como:

  [ Nombre              ] [ Apellido             ]
[ Edad                ] [ Género               ]
[ Dirección completa (abarca ambas columnas)   ]

Ejemplo: Entrada de datos de parcela de 3 columnas

typenamelabelappearance
begin_groupplot_dataDetalles de la parcelafield-list grid(weight=3)
textplot_idID de parcelagridformat<row=1 col=1/>
decimalarea_haÁrea (ha)gridformat<row=1 col=2/>
select_one crop_typecropTipo de cultivogridformat<row=1 col=3/>
decimalyieldRendimiento (kg)gridformat<row=2 col=1/>
decimalrevenueIngresosgridformat<row=2 col=2/>
textnotesNotasgridformat<row=2 col=3/>
end_group

Colores de fondo

Use backgroundcolor para distinguir visualmente las secciones:

typenamelabelappearance
notesection_aSección Agridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

Mejores prácticas

  1. Use el diseño de cuadrícula solo para pantallas de entrada de datos intensiva donde los campos lado a lado reduzcan genuinamente el desplazamiento.
  2. Mantenga los campos colspan=1 cortos (IDs, códigos, selecciones breves); las etiquetas largas se truncan mal en columnas de cuadrícula estrechas.
  3. Use colspan=N para campos con etiquetas largas o entradas de texto de varias líneas.
  4. Pruebe en el tamaño de pantalla más pequeño que espera que usen los encuestadores; una cuadrícula de 4 columnas es estrecha en un teléfono.
  5. El diseño de cuadrícula funciona mejor en factores de forma web y tableta; en teléfonos móviles, un diseño de 2 columnas suele ser el máximo cómodo.

Limitaciones

  • gridformat<> solo funciona dentro de un grupo con apariencia grid(weight=N); no tiene efecto en el nivel superior.
  • El diseño de cuadrícula es una extensión de formulario web de rtSurvey y puede no renderizarse correctamente en otros clientes compatibles con ODK.
  • El posicionamiento de filas y columnas no se valida en el momento de construcción del formulario; los campos superpuestos se renderizarán ambos pero pueden verse mal.
¿Fue útil esta página?