Hjelpefunksjoner

Oversikt

Serverfunksjoner importeres fra @navikt/nav-dekoratoren-moduler/ssr.

Klientfunksjoner importeres fra @navikt/nav-dekoratoren-moduler.

addDecoratorUpdateListener + removeDecoratorUpdateListener

Hva: Lytter på ny deploy av dekoratøren i valgt miljø, og kaller callback med ny versionId.

Når er den nyttig: Når appen har streng cache av SSR-resultat (for eksempel HTML-fragmenter), men du vil samtidig vise nyeste Dekoratør uten manuell restart eller kort TTL.

import { addDecoratorUpdateListener } from "@navikt/nav-dekoratoren-moduler/ssr";

const flushHtmlCache = (versionId: string) => {
    console.log(`Ny dekoratørversjon: ${versionId}. Tømmer cache.`);
    myHtmlCache.clear();
};

addDecoratorUpdateListener({ env: "prod" }, flushHtmlCache);

Bruk removeDecoratorUpdateListener når du må rydde opp:

import { removeDecoratorUpdateListener } from "@navikt/nav-dekoratoren-moduler/ssr";

removeDecoratorUpdateListener({ env: "prod" }, flushHtmlCache);

getDecoratorVersionId

Hva: Henter gjeldende versjons-ID for dekoratøren i valgt miljø.

Når er den nyttig:

import { getDecoratorVersionId } from "@navikt/nav-dekoratoren-moduler/ssr";

const versionId = await getDecoratorVersionId({ env: "prod" });

buildCspHeader

Hva: Bygger CSP-header som kombinerer appens egne direktiver med direktiver dekoratøren krever.

Når er den nyttig: Når du vil unngå at CSP blir utdatert når Dekoratøren endrer nødvendige kilder.

import { buildCspHeader } from "@navikt/nav-dekoratoren-moduler/ssr";

const appDirectives = {
    "default-src": ["'self'"],
    "style-src": ["'self'", "my.css.cdn.com"],
};

const csp = await buildCspHeader(appDirectives, { env: "prod" });

getAnalyticsInstance

Hva: Oppretter logger for analytics-events via Dekoratøren.

Når er den nyttig: Når appen skal logge både standardiserte taksonomi-events og app-spesifikke events.

Teamene bør bruke samme origin som i dekoratørparameterne, slik at egne hendelser og automatiske sidevisninger kan filtreres sammen.

import { Events, getAnalyticsInstance } from "@navikt/nav-dekoratoren-moduler";

const logger = getAnalyticsInstance("minAppOrigin"); // må samsvare med appens origin-parameter.

logger(Events.SKJEMA_STARTET, {
    skjemaId: "1234",
    skjemanavn: "aap",
});

logger.custom("feedback åpnet", {
    komponent: "feedback-widget",
    steg: 2,
});

isValidEventName

Hva: Sjekker om et event-navn finnes i taksonomien.

Når er den nyttig: Når event-navn kommer dynamisk (for eksempel fra config eller ekstern input), og du trenger å velge mellom typed event og custom event.

import {
    getAnalyticsInstance,
    isValidEventName,
} from "@navikt/nav-dekoratoren-moduler";

const logger = getAnalyticsInstance("minAppOrigin");

if (isValidEventName(eventName)) {
    logger(eventName, eventData);
} else {
    logger.custom(eventName, eventData);
}

setBreadcrumbs

Hva: Oppdaterer brødsmulesti i dekoratøren på klienten.

Når er den nyttig: Når stien skal endres uten full side-reload.

import { setBreadcrumbs } from "@navikt/nav-dekoratoren-moduler";

setBreadcrumbs([
    { title: "Ditt Nav", url: "https://www.nav.no/person/dittnav" },
    {
        title: "Kontakt oss",
        url: "https://www.nav.no/person/kontakt-oss/nb/",
        handleInApp: true,
    },
]);

analyticsTitle kan brukes når title kan inneholde personopplysninger, men sett analyticsTitle til en generell tekst uten personopplysninger. Uten feltet logges tittelen som [redacted].

onBreadcrumbClick

Hva: Callback for breadcrumb-klikk når handleInApp: true.

Når er den nyttig: Når appen bruker client-side routing og ikke skal gjøre full navigering via url.

import { onBreadcrumbClick } from "@navikt/nav-dekoratoren-moduler";

onBreadcrumbClick((breadcrumb) => {
    router.push(breadcrumb.url);
});

setAvailableLanguages

Hva: Oppdaterer språklisten i dekoratørens språkvelger.

Når er den nyttig: Når tilgjengelige språk varierer mellom ruter/sider.

import { setAvailableLanguages } from "@navikt/nav-dekoratoren-moduler";

setAvailableLanguages([
    { locale: "nb", url: "https://www.nav.no/person/kontakt-oss/nb/" },
    {
        locale: "en",
        url: "https://www.nav.no/person/kontakt-oss/en/",
        handleInApp: true,
    },
]);

onLanguageSelect

Hva: Callback når bruker velger språk med handleInApp: true.

Når er den nyttig: Når språkbytte håndteres i appens router i stedet for direkte window.location.

import { onLanguageSelect } from "@navikt/nav-dekoratoren-moduler";

onLanguageSelect((language) => {
    router.push(language.url);
});

setParams / getParams

Hva:

Når er den nyttig: Når appen må skifte konfigurasjon ved runtime (f.eks. simple, chatbot, context, breadcrumbs) uten ny SSR-runde.

import { getParams, setParams } from "@navikt/nav-dekoratoren-moduler";

setParams({
    simple: true,
    chatbot: false,
});

const params = getParams();

openChatbot

Hva: Åpner Chatbot Frida og setter chatbotVisible=true.

Når er den nyttig: Når du vil trigge chatbot fra egen knapp/CTA i appen.

import { openChatbot } from "@navikt/nav-dekoratoren-moduler";

openChatbot();