Funktionen Rutnätslayout låter dig ordna frågor i ett flerfkolumns-rutnät inom en grupp med hjälp av utseendetaggen gridformat<>. Detta är användbart för täta datainmatningsformulär där flera relaterade fält bör visas sida vid sida istället för staplade vertikalt.

Hur det fungerar

Rutnätslayout tillämpas på två nivåer:

  1. Gruppen — sätt appearance: field-list grid(weight=N) för att definiera hur många kolumner rutnätet har
  2. Varje fält inuti gruppen — sätt appearance: gridformat<row=R col=C colspan=S/> för att positionera fältet

Rutnätet använder ett 12-kolumners Bootstrap-liknande system. weight=N definierar hur många logiska kolumner ditt rutnät har; varje kolumn upptar 12/N Bootstrap-kolumner.

Utseende på gruppnivå

UtseendeBeskrivning
field-list grid(weight=2)2-kolumners rutnät (varje kolumn = 6 Bootstrap-kolumner)
field-list grid(weight=3)3-kolumners rutnät (varje kolumn = 4 Bootstrap-kolumner)
field-list grid(weight=4)4-kolumners rutnät (varje kolumn = 3 Bootstrap-kolumner)
field-list grid(weight=6)6-kolumners rutnät (varje kolumn = 2 Bootstrap-kolumner)

gridformat<>-syntax på fältnivå 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
AttributBeskrivning
rowRadnummer (1-baserat)
colKolumnnummer (1-baserat, inom rutnätet definierat av weight)
colspanAntal kolumner det här fältet spänner (standard 1)
backgroundcolorValfri CSS-färg för fältbakgrunden (t.ex. #f0f0f0, lightblue)

Exempel: 2-kolumners hushållsundersökningssektion

typenamelabelappearance
begin_groupdemographicsDemografifield-list grid(weight=2)
textfirst_nameFörnamngridformat<row=1 col=1/>
textlast_nameEfternamngridformat<row=1 col=2/>
integerageÅldergridformat<row=2 col=1/>
select_one gendergenderKöngridformat<row=2 col=2/>
textaddressFullständig adressgridformat<row=3 col=1 colspan=2/>
end_group

Detta renderas som:

  [ Förnamn           ] [ Efternamn          ]
[ Ålder             ] [ Kön                ]
[ Fullständig adress (sträcker sig över båda kolumnerna)  ]

Exempel: 3-kolumners datainmatning för odlingsmark

typenamelabelappearance
begin_groupplot_dataParcellinformationfield-list grid(weight=3)
textplot_idParcel-IDgridformat<row=1 col=1/>
decimalarea_haYta (ha)gridformat<row=1 col=2/>
select_one crop_typecropGrödtypgridformat<row=1 col=3/>
decimalyieldSkörd (kg)gridformat<row=2 col=1/>
decimalrevenueIntäktgridformat<row=2 col=2/>
textnotesAnteckningargridformat<row=2 col=3/>
end_group

Bakgrundsfärger

Använd backgroundcolor för att visuellt urskilja sektioner:

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

Bästa praxis

  1. Använd rutnätslayout bara för datainmatningsintensiva skärmar där fält sida vid sida genuint minskar scrollning.
  2. Håll colspan=1-fält korta (ID:n, koder, korta val) — breda etiketter trunkeras dåligt i smala rutnätskolumner.
  3. Använd colspan=N för fält med långa etiketter eller flerradiga textinmatningar.
  4. Testa på den minsta skärmstorlek du förväntar dig att räknare ska använda — ett 4-kolumners rutnät är trångt på en telefon.
  5. Rutnätslayout fungerar bäst på webben och pekskärmsformfaktorer; på mobiltelefoner är vanligtvis en 2-kolumners layout den maximalt bekväma bredden.

Begränsningar

  • gridformat<> fungerar bara inuti en grupp med grid(weight=N)-utseende — det har ingen effekt på toppnivå.
  • Rutnätslayout är ett rtSurvey webbformulär-tillägg och kanske inte renderas korrekt i andra ODK-kompatibla klienter.
  • Rad- och kolumnpositionering valideras inte vid formulärbyggningstid — överlappande fält renderas båda men kan se trasiga ut.
Var den här sidan hjälpsam?