Skip to content

Betinget synlighet

Med visibleIf kan du vise oppfølgingsspørsmål kun når det er relevant — såkalt progressiv disclosure. Det gir kortere surveyer og bedre svarprosent.

Grunnleggende bruk

Legg visibleIf på spørsmålet som skal skjules til en betingelse er oppfylt:

tsx
const survey = {
  type: "rating",
  questions: [
    {
      id: "rating",
      type: "rating",
      variant: "emoji",
      prompt: "Hvordan var opplevelsen din?",
      required: true,
    },
    {
      id: "feedback",
      type: "text",
      prompt: "Har du andre tilbakemeldinger?",
      maxLength: 1000,
      visibleIf: {
        field: "ANSWER",
        questionId: "rating",
        operator: "EXISTS",
      },
    },
  ],
};

Her vises tekstfeltet først etter at brukeren har valgt en emoji. Ingen ekstra kode — widgeten håndterer alt.

Operatorer

OperatorBeskrivelseEksempel
EXISTSSvaret eksisterer (ikke undefined)Vis fritekst etter rating er valgt
EQLik en verdiVis kun når bruker valgte «Nei»
NEQUlik en verdiVis når bruker ikke valgte «Ja»
GTStørre ennVis kun for rating > 3
LTMindre ennVis oppfølging for rating < 3
CONTAINSInneholder verdi (for multi-choice)Vis når «Annet» er blant valgene

Eksempler

Vis kun for lav score

tsx
{
  id: "complaint",
  type: "text",
  prompt: "Hva gikk galt?",
  visibleIf: {
    field: "ANSWER",
    questionId: "rating",
    operator: "LT",
    value: 3,
  },
}

Vis basert på et spesifikt valg

tsx
{
  id: "other-reason",
  type: "text",
  prompt: "Beskriv hva du prøvde å gjøre",
  visibleIf: {
    field: "ANSWER",
    questionId: "reason",
    operator: "EQ",
    value: "other",
  },
}

Vis når svaret ikke er «Ja»

tsx
{
  id: "blocker",
  type: "text",
  prompt: "Hva hindret deg?",
  visibleIf: {
    field: "ANSWER",
    questionId: "taskSuccess",
    operator: "NEQ",
    value: "yes",
  },
}

Condition-struktur

Alle visibleIf-betingelser følger samme form:

ts
interface LogicCondition {
  /** Hva sammenlignes — "ANSWER" eller "METADATA" */
  field?: "ANSWER" | "METADATA";

  /** Hvilket spørsmål svaret hentes fra (påkrevd for ANSWER med kryssreferanse) */
  questionId?: string;

  /** Sammenligningsoperator */
  operator: "EXISTS" | "EQ" | "NEQ" | "GT" | "LT" | "CONTAINS";

  /** Verdi å sammenligne med (ikke nødvendig for EXISTS) */
  value?: string | number | boolean;
}

Bruk questionId for kryss-referanser

questionId refererer til id-en til spørsmålet du vil sjekke svaret på. Uten questionId evalueres betingelsen mot det gjeldende spørsmålets svar.

Metadata-betingelser

Du kan også vise spørsmål basert på metadata (kontekst-verdier) i stedet for svar:

tsx
{
  id: "internal-feedback",
  type: "text",
  prompt: "Tilbakemelding for internt bruk",
  visibleIf: {
    field: "METADATA",
    key: "rolle",
    operator: "EQ",
    value: "veileder",
  },
}

Når trenger du noe mer?

visibleIf er perfekt for progressiv disclosure — vis/skjul oppfølgingsspørsmål basert på tidligere svar. Men noen ganger trenger du å faktisk endre flyten: hoppe til et annet spørsmål, skippe neste steg, eller avslutte surveyen tidlig.

Da bruker du logic i stedet. Se Avansert branching for full dokumentasjon.

Tommelfingerregel

  • Vis/skjul spørsmålvisibleIf
  • Endre rekkefølge / hoppe / avsluttelogic

Lumi Analytics — bygget på navikt/lumi (MIT-lisens)