Vise tjenesteeiers logo

[hanneline]

Describe the solution you'd like

There is a need for app owners to have their organization logo in the app front end, such that the end users more easily could identify that this is an app which is made available from this organization.

Acceptance criterias

• [x] When enabling the use of appOwner logo it should default to the one specified in altinn-orgs.json on CDN for easy re-use accross apps
• [x] The url of the logo should be configurable (any url or limited to CDN or the app?) to allow support for service owners that is responsible for multiple organizations and to support logos that have another language.
• [x] The alt text of the logo should reflect the language selected eg. "The Directorate of Education logo"
• [x] Document guidelines in the documentation for logo format and size and how to add it
• [x] If a custom logo is provided, the Altinn logo should be visible in the footer.
• [ ] If a custom logo is provided and the appOwner text resource is provided the appOwner text should be displayed to the right of the logo and not above the appName (as it does today) as shown in the design
• [ ] If a custom logo isn't specified the Altinn logo and placement of the appOwner text should be as it is today.

Implementation details

• Consider re-using the appOwner text resource for the alt text and compute the default alt text.

Screenshot and Figma link

https://www.figma.com/file/Pvti3aRcOwH0k5Z7DrLznk/Arbeidsomr%C3%A5de%3A-Altinn-Studio-APPS?type=design&node-id=1977%3A34329&mode=design&t=3X2MS1UhZYl54gdf-1

Possible solutions

• Upload logo in Altinn Studio
• Configure URL in Altinn Studio
• Display logo configured in altinn-orgs.json

[altinnadmin]

Updating logo and other org-metadata across apps needs to be possible. An easy solution to this is using Altinn CDN.

https://altinncdn.no/orgs/altinn-orgs.json

[jerschio]

Jeg jobber med å utvikle et skjema for søknad om Europeisk helsetrygdkort. Jeg har tilpasset index.cshtml med litt kode for å kunne vise Helfo sin logo til høyre i skjema. Samt skjule logoen som ser ut som en blokk til venstre i skjemaet.

Jeg kommer således rundt problemet, men det hadde vært ønskelig med et lettere og mer robust system for å kunne ta i bruk egen logo.

Dette samsvar ganske bra med denne saken, men:

1. Helsedirektoratet lager skjemaet for Helfo, det er i dette tilfellet mismatch mellom tjenesteeier og logoen man ønsker å vise. Helsedirektoratet vil i fremtiden ha skjemaer hvor det er ønskelig med Helsedirektoratet sin logo og skjemaer hvor det er ønskelig med Helfo sin logo.

2. Ønskelig logo fungerer ikke på blå bakgrunn. Offisiell logo for Helfo går helt i ett med den blå bakgrunnen som benyttes i skjemaet. Jeg har inntrykk av at https://altinncdn.no/orgs/altinn-orgs.json kun kan inneholde 1 logo. Jeg vil tro at man her typisk legger offisiell logo.

3. Det hadde vært ønskelig å kunne styre hvorvidt høyhus logoen til venstre vises eller ikke.

4. Det hadde vært ønskelig å kunne styre hvorvidt egen logo vises:

   • høyrejuster
   • venstrejustert
   • sentrert

[altinnadmin]

Hei @jerschio!

1. Tanken bak det at vi har egne mapper pr. org i altinncdn er at den enkelte org skal kunne laste opp statisk ressurser som man ønsker å kunne gjenbruke på tvers av sine apps. Så ikke noe i veien for at du lager en PR med f.eks. "helfo-logo.png" i denne folderen: https://github.com/Altinn/altinn-cdn/tree/master/orgs/hdir. Alternativt en ny issue der du laster opp ønsket fil.

2. Det er null problem å oppdatere "offisiell" logo på cdn. Enten ved at du oppretter en pull request med endringen eller oppretter en issue der du laster opp ønsket logo, så kan vi legge den inn for deg.

3. og 4. Når det gjelder disse så kan det helt sikkert fikses med litt CSS i index.cshtml. Men oppfatter at du kanskje ønsker noe litt mer robust. En ting å tenke på her er at det fra brukernes perspektiv er fordelaktig med en konsistent plassering av logo, og bruk av grafiske elementer, på tvers av apper som benytter det samme designet. Jeg regner med at @Febakke kanskje har noen synspunkter og innspill på dette :)

[lvbachmann]

Related to Altinn/app-frontend-react#168

[ZuperNova]

Vise tjenesteeiers logo - Løsningsforslag

Utdanningsdirektoratet ser også behov for å kunne laste opp og ta i bruk tjenesteeier sin logo. Foreløpig har vi implementert metoden nevt over, men som det også nevnes så er ikke denne metoden særlig robust. Utdanningsdirektoratet ønsker seg derfor en mer robust løsning og presenterer her et løsningsforslag.

Metoden i dag

Laster opp ønsket logo til CDN. I index.cshtml legges det til et script som erstatter altinn-logo med egen. Som man sikkert legger merke til kan kodesnutten by på ulike problemer. Scriptet vil ikke lenger fungere som forventet hvis..:

• Altinn-logoen ikke lenger har Id = 'logo'
• Det tar lengere enn 30 sekunder før altinn-logo rendres
• Altinn-CDN får ny url

<script>
    var timeout = 100;
    var retries = 30000 / timeout; // Prøver i 30 sekunder for de som har treigt nett (slow 3G)
    function replaceLogo(retriesLeft) {
    var element = document.getElementById("logo");
    if (element) {
        element.setAttribute("src", "https://altinncdn.no/orgs/udir/udir.png");
        element.style.display = "inline";
        element.className = "";
        element.style.maxHeight = "53px"; // Størrelsen på dagens logo som ligger i cdn
    } else if (retriesLeft >= 0) {
        setTimeout(() => replaceLogo(retriesLeft - 1), timeout);
        }
    }
    setTimeout(() => replaceLogo(retries), timeout);
</script>

Forslag til løsning

Vi har kommet frem til en løsning som vi mener kan løse problematikken på en mer robust måte. Ved å legge til et ekstra felt i layout-sets.json kan man enkelt fortelle frontend til å ta i bruk tjenesteeiers logo. Som man kan se under er det introdusert et nytt felt kalt customLogo.

layout-sets.json

{
  "sets": [
    ...
  ],
  "uiSettings": {
    ...
    "customLogo": true
  }
}

Videre kan man utvide tekstressursfilene til å inneholde ekstra informasjon relatert til logoen. Disse feltene er ment til å variere på alt text og logo bassert på språk.

resource.nb.json

{
    "language": "nb",
    "resources": [
        {
            "id": "logo.altText",
            "value": "Utdanningsdirektoratet logo"
        },
        {
            "id": "logo.url",
            "value": "https://altinncdn.no/orgs/udir/udir.nb.png"
        },
        ...
}

resource.en.json

{
    "language": "en",
    "resources": [
        {
            "id": "logo.altText",
            "value": "The Directorate of Education logo"
        },
        {
            "id": "logo.url",
            "value": "https://altinncdn.no/orgs/udir/udir.en.png"
        },
        ...
}

Tjenesteeiers ansvar og guidelines

Noe å tenke på relatert til denne løsningen er at den ikke tar hensyn til design - noe som vi ser har dukket opp som et argument. Ansvaret ved opplasting av korrekt dimensjonert logo mener vi ligger hos tjenesteeier. For å opprettholde et mer konsistent design på logoer kan det være en idee å opprette en guideline. Denne guiden kan man så oppfordre tjenesteeiere til å følge.

EDIT

{
    "id": "logo.url",
    "value": "udir.en.png"
}

[ivarne]

Seems like the obvious solution (apart from the possibility of making it automatic on if a suitable logo is found in CDN).

I'm curious why you want to put the setting in layout-sets.json. I'd much more expect it to be per layoutset in Settings.json, or globally for the app in applicationmetadata.json

[ZuperNova]

The automatic behaviour you are mentioning is a nice feature, but this brings up alot of complex handling and should maybe be treated as a seperate case.

I belive the applicationmetadata.json is not accessable from frontend at the moment. Of course this could also be taken into account when implementing this new feature so that it does.

The Settings.json is probably a nice place to add it aswell. Having it both in layout-settings.json and Settings.json will give the user a more flexible way of showing a custom logo. So if one were to set "customLogo": true in layout-settings.json the custom logo will be visible in every layoutset. If you only define it in one of the layouts (Settings.json) this layout will show the custom logo, but the rest will show the altinn logo. This is similar to how the languageSelector and closebutton works.

[bjosttveit]

I do believe applicationmetadata.json is in fact available to the frontend. Is there any need to change the logo depending on the layout-set? I would personally prefer having it only in applicationmetadata.json.

[ZuperNova]

I do believe applicationmetadata.json is in fact available to the frontend. Is there any need to change the logo depending on the layout-set? I would personally prefer having it only in applicationmetadata.json.

As discussed above, the only reason to changed the logo depending on the layout-set is to give it a more flexible way of showing/hiding the custom logo. On second thought this might be more confusing for the end-user. Putting this in the applicationmetadata.json would solve this, as it would act like a global config.

[ZuperNova]

@bjosttveit is there a status update on this one?