Sist endret: 10. nov. 2024

Link

Knapp eller lenke for å sende brukeren til en ekstern side.

Link-komponenten kan brukes for å sende brukeren til en ekstern side. Den kan rendres som enten en knapp eller en lenke.

Konfigurasjon

Link-komponenten kan konfigureres med følgende egenskaper:

EgenskapTypeBeskrivelse
textResourceBindings.titlestringTittelen på knappen eller lenken.
textResourceBindings.targetstringURL-en som skal åpnes.
openInNewTabbooleanOm URL-en skal åpnes i et nytt vindu eller ikke.
stylestringStilen til knappen. Kan være en av følgende: primary, secondary , link.

Eksempel

{
  "id": "some-id",
  "type": "Link",
  "textResourceBindings": {
    "title": "Bekreft i altinn.no",
    "target": "https://altinn.no/bekreft"
  },
  "openInNewTab": false,
  "style": "primary"
}

Dynamisk URL

I noen tilfeller kan det være nødvendig å ha mer informasjon i query parametere som for eksempel instans id slik at du kan sende brukeren tilbake til instansen fra din eksterne side. Dette kan gjøres ved å bruke et uttrykk i target-egenskapen. Se følgende eksempel:

{
  "id": "some-id",
  "type": "Link",
  "textResourceBindings": {
    "title": "Bekreft i altinn.no",
    "target": [
      "concat",
      "https://altinn.no/bekreft?instanceId=",
      ["instanceContext", "instanceId"]
    ]
  },
  "openInNewTab": false,
  "style": "primary"
}

Miljøkonfigurasjon

Dersom din eksterne tjeneste har ulike kjøretidsmiljøer, og du ønsker å sende brukeren til det korrekte miljøet avhengig av miljøet appen kjører i, kan du konfigurere dette i appsettings.[miljø].json filene i appen din. I det følgende eksempelet konfigurerer jeg to ulike URLer avhengig av om appen kjører i staging- eller produksjonsmiljøet.

appsettings.Staging.json:

{
  "FrontEndSettings": {
    "redirectUrl": "https://tt02.altinn.no/bekreft?instanceId="
  }
}

appsettings.Production.json:

{
  "FrontEndSettings": {
    "redirectUrl": "https://altinn.no/bekreft?instanceId="
  }
}

layout.json:

{
  "id": "some-id",
  "type": "Link",
  "textResourceBindings": {
    "title": "Bekreft i altinn.no",
    "target": [
      "concat",
      ["frontendSettings", "redirectUrl"],
      ["instanceContext", "instanceId"]
    ]
  },
  "openInNewTab": false,
  "style": "primary"
}