Funkce Mřížkové rozvržení umožňuje uspořádat otázky do vícekolumnové mřížky ve skupině pomocí značky vzhledu gridformat<>. To je užitečné pro formuláře s hustým zadáváním dat, kde by více souvisejících polí mělo být zobrazeno vedle sebe místo svislého uspořádání.

Jak to funguje

Mřížkové rozvržení se aplikuje na dvou úrovních:

  1. Skupina — nastavte appearance: field-list grid(weight=N) pro definování počtu sloupců mřížky
  2. Každé pole ve skupině — nastavte appearance: gridformat<row=R col=C colspan=S/> pro umístění pole

Mřížka používá 12sloupcový systém ve stylu Bootstrap. weight=N definuje, kolik logických sloupců vaše mřížka má; každý sloupec zabírá 12/N sloupců Bootstrap.

Vzhled na úrovni skupiny

VzhledPopis
field-list grid(weight=2)2sloupcová mřížka (každý sloupec = 6 sloupců Bootstrap)
field-list grid(weight=3)3sloupcová mřížka (každý sloupec = 4 sloupce Bootstrap)
field-list grid(weight=4)4sloupcová mřížka (každý sloupec = 3 sloupce Bootstrap)
field-list grid(weight=6)6sloupcová mřížka (každý sloupec = 2 sloupce Bootstrap)

Syntaxe gridformat<> na úrovni pole 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
AtributPopis
rowČíslo řádku (začíná od 1)
colČíslo sloupce (začíná od 1, v rámci mřížky definované weight)
colspanPočet sloupců, přes které se pole rozkládá (výchozí 1)
backgroundcolorVolitelná CSS barva pozadí pole (např. #f0f0f0, lightblue)

Příklad: 2sloupcová sekce domácnostního průzkumu

typenamelabelappearance
begin_groupdemographicsDemografické údajefield-list grid(weight=2)
textfirst_nameJménogridformat<row=1 col=1/>
textlast_namePříjmenígridformat<row=1 col=2/>
integerageVěkgridformat<row=2 col=1/>
select_one gendergenderPohlavígridformat<row=2 col=2/>
textaddressCelá adresagridformat<row=3 col=1 colspan=2/>
end_group

Toto se zobrazí jako:

  [ Jméno             ] [ Příjmení           ]
[ Věk               ] [ Pohlaví            ]
[ Celá adresa (přes oba sloupce)           ]

Příklad: 3sloupcové zadávání dat o parcele

typenamelabelappearance
begin_groupplot_dataPodrobnosti parcelyfield-list grid(weight=3)
textplot_idID parcelygridformat<row=1 col=1/>
decimalarea_haPlocha (ha)gridformat<row=1 col=2/>
select_one crop_typecropTyp plodinygridformat<row=1 col=3/>
decimalyieldVýnos (kg)gridformat<row=2 col=1/>
decimalrevenuePříjmygridformat<row=2 col=2/>
textnotesPoznámkygridformat<row=2 col=3/>
end_group

Barvy pozadí

Použijte backgroundcolor pro vizuální odlišení sekcí:

typenamelabelappearance
notesection_aSekce Agridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/>

Osvědčené postupy

  1. Používejte mřížkové rozvržení pouze pro obrazovky s intenzivním zadáváním dat, kde pole vedle sebe skutečně snižují rolování.
  2. Zachovejte krátká pole colspan=1 (ID, kódy, krátké výběry) — široké popisky se špatně zkracují v úzkých sloupcích mřížky.
  3. Používejte colspan=N pro pole s dlouhými popisky nebo víceřádkovými textovými vstupy.
  4. Testujte na nejmenší velikosti obrazovky, kterou očekáváte u enumerátorů — 4sloupcová mřížka je stísněná na telefonu.
  5. Mřížkové rozvržení funguje nejlépe ve webových a tabletových formátech; na mobilních telefonech je 2sloupcové rozvržení obvykle maximální pohodlná šířka.

Omezení

  • gridformat<> funguje pouze uvnitř skupiny se vzhledem grid(weight=N) — na nejvyšší úrovni nemá žádný efekt.
  • Mřížkové rozvržení je rozšíření webového formuláře rtSurvey a nemusí se správně vykreslovat v jiných klientech kompatibilních s ODK.
  • Umístění řádků a sloupců není ověřeno při sestavení formuláře — překrývající se pole se oba zobrazí, ale mohou vypadat poškozena.
Byla tato stránka užitečná?