Funktionen Grid-layout giver dig mulighed for at arrangere spørgsmål i et flerspaltet grid inden for en gruppe ved hjælp af appearance-tagget gridformat<>. Dette er nyttigt til intensive dataindtastningsformularer, hvor flere relaterede felter bør vises side om side i stedet for stablet lodret.

Sådan fungerer det

Grid-layout anvendes på to niveauer:

  1. Gruppen — angiv appearance: field-list grid(weight=N) for at definere, hvor mange kolonner griddet har
  2. Hvert felt inde i gruppen — angiv appearance: gridformat<row=R col=C colspan=S/> for at placere feltet

Griddet bruger et 12-kolonners Bootstrap-lignende system. weight=N definerer, hvor mange logiske kolonner dit grid har; hver kolonne optager 12/N Bootstrap-kolonner.

Appearance på gruppeniveau

AppearanceBeskrivelse
field-list grid(weight=2)2-kolonne grid (hver kolonne = 6 Bootstrap-kol.)
field-list grid(weight=3)3-kolonne grid (hver kolonne = 4 Bootstrap-kol.)
field-list grid(weight=4)4-kolonne grid (hver kolonne = 3 Bootstrap-kol.)
field-list grid(weight=6)6-kolonne grid (hver kolonne = 2 Bootstrap-kol.)

gridformat<>-syntaks på feltniveau 

  gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=FARVE/>
AttributBeskrivelse
rowRækkenummer (1-baseret)
colKolonnenummer (1-baseret, inden for det grid defineret af weight)
colspanAntal kolonner, dette felt strækker sig over (standard 1)
backgroundcolorValgfri CSS-farve til feltbaggrunden (f.eks. #f0f0f0, lightblue)

Eksempel: 2-kolonne husholdningsundersøgelsessektion

typenamelabelappearance
begin_groupdemographicsDemografidatafield-list grid(weight=2)
textfirst_nameFornavngridformat<row=1 col=1/>
textlast_nameEfternavngridformat<row=1 col=2/>
integerageAldergridformat<row=2 col=1/>
select_one gendergenderKøngridformat<row=2 col=2/>
textaddressFuld adressegridformat<row=3 col=1 colspan=2/>
end_group

Dette gengives som:

  [ Fornavn           ] [ Efternavn          ]
[ Alder             ] [ Køn                ]
[ Fuld adresse (strækker sig over begge kolonner)   ]

Eksempel: 3-kolonne plotdataindtastning

typenamelabelappearance
begin_groupplot_dataPlotdetaljerfield-list grid(weight=3)
textplot_idPlot-IDgridformat<row=1 col=1/>
decimalarea_haAreal (ha)gridformat<row=1 col=2/>
select_one crop_typecropAfgrødetypegridformat<row=1 col=3/>
decimalyieldUdbytte (kg)gridformat<row=2 col=1/>
decimalrevenueOmsætninggridformat<row=2 col=2/>
textnotesNotergridformat<row=2 col=3/>
end_group

Baggrundsfarver

Brug backgroundcolor til visuelt at skelne sektioner:

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

Bedste praksis

  1. Brug grid-layout kun til dataindtastningsintensive skærme, hvor felter side om side rent faktisk reducerer scrolling.
  2. Hold colspan=1-felter korte (ID’er, koder, korte valg) — brede labels afskæres dårligt i smalle grid-kolonner.
  3. Brug colspan=N til felter med lange labels eller flerlinjetekstinputs.
  4. Test på den mindste skærmstørrelse, du forventer at interviewerne bruger — et 4-kolonne grid er trangt på en telefon.
  5. Grid-layout fungerer bedst på web- og tablet-formfaktorer; på mobiltelefoner er et 2-kolonne layout normalt den maksimale komfortable bredde.

Begrænsninger

  • gridformat<> fungerer kun inden for en gruppe med grid(weight=N) appearance — det har ingen effekt på øverste niveau.
  • Grid-layout er en rtSurvey-webformularudvidelse og gengives muligvis ikke korrekt i andre ODK-kompatible klienter.
  • Række- og kolonneplacering valideres ikke ved formularopbygningstidspunktet — overlappende felter gengives begge, men kan se ødelagte ud.
Var denne side nyttig?