# UI Configuration Overrides

This is how overrides of `ui_config` should be done in all frontend apps/auth.

## Configure the ui\_config\_overrides.json

Use overlay to provide the custom file and place the file in \<overlay\_dir>/assets/ui\_config\_overrides.json.&#x20;

The data in ui\_config\_overrides.json will be merged with the default values.

{% tabs %}
{% tab title="Properties" %}

<table><thead><tr><th width="348">Name</th><th width="405">Description</th><th width="173">Default value</th></tr></thead><tbody><tr><td><code>logos</code></td><td>An object containing logos for <code>app_logo</code> (top bar of apps like forms and portal), and <code>access_header</code> and <code>access_footer</code> for Access authentication apps </td><td><code>"assets/fortified_logo_green.svg"</code></td></tr><tr><td><code>logos.app_logo/logos.access_header/logos.access_footer</code></td><td>Logo objects. All logos are configured in the same way. Properties below are for all logos (<code>app_logo</code>, <code>access_header</code> and <code>access_footer</code>).<br>Can be configured as <code>false</code> to disable the logo.<br>Example: <code>{ "logos": { "access_header": false } [...]}</code> <br>See next section for more information about logos.</td><td></td></tr><tr><td><code>logos.app_logo.src</code></td><td>The src of the bottom vendor logo. If <code>undefined</code> or empty string <code>""</code> no logo will be shown</td><td></td></tr><tr><td><code>logos.app_logo.width</code></td><td>The width of the logo. Use css values like "40px"</td><td><code>"auto"</code></td></tr><tr><td><code>logos.app_logo.height</code></td><td>The height of the logo. Use css values like "40px"</td><td><code>"100%"</code></td></tr><tr><td><code>logos.app_logo.link</code></td><td>Link object. Can be configured as <code>false</code> to disable</td><td></td></tr><tr><td><code>logos.app_logo.link.url</code></td><td></td><td></td></tr><tr><td><code>logos.app_logo.link.text</code></td><td>If <code>undefined</code> or empty string <code>""</code> no link text will be shown</td><td>""</td></tr><tr><td><code>supportedLanguages</code></td><td>List of supported languages. If a language is specified here it is assumed to be available under the folder <code>assets/locales/&#x3C;code>.json</code><br>See more in section below</td><td><pre class="language-json"><code class="lang-json">[
    {
      "code": "en",
      "name": "English"
    },
    {
      "code": "sv",
      "name": "Svenska"
    }
]
</code></pre></td></tr><tr><td><code>title</code></td><td>Browser tab title</td><td><code>"Fortified ID"</code></td></tr><tr><td><code>localesMergePath</code></td><td>Path for merging locale files. If omitted or empty string <code>""</code> is used no locale merging will be done.<br><strong>Important: must end with /</strong></td><td><code>""</code></td></tr><tr><td><code>fallbackLanguage</code></td><td>Default/fallback language if user has not saved a language in cookies</td><td><code>"sv"</code></td></tr></tbody></table>
{% endtab %}

{% tab title="Default" %}

```json
{
  "variables": {},
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "40px"
    },
    "access_header": {
      "src": "assets/logo.svg",
      "link": false
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "80px",
      "link": {
        "url": "https://fortifiedid.se"
      }
    }
  },
  "supportedLanguages": [
    {
      "code": "en",
      "name": "English"
    },
    {
      "code": "sv",
      "name": "Svenska"
    }
  ],
  "title": "Fortified ID",
  "localesMergePath": "",
  "fallbackLanguage": "sv"
}
```

{% endtab %}
{% endtabs %}

## Logo Configuration

All logos are configured as follows:

```json
{
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "height": "40px"
    },
    "access_header": {
      "src": "assets/fortified_logo_green-teal.svg",
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "height": "40px",
      "link": {
        "url": "https://fortifiedid.se",
        "text": "FortifiedID"
      }
    }
  }
}
```

All logos can be made into links.

For example, BankID has the following default configuration, where it has BankID's logo at the top (with some negative margins because it has so much whitespace in it and we have our own margins otherwise):

```json
{
  "logos": {
    "access_header": {
      "src": "assets/svg/logo_bankid.svg",
      "link": false, //or omit 
      "width": "14rem",
      "margin": "-2.5rem auto -0.5rem auto"
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "size": "40px",
      "link": {
        "text": "",
        "url": "https://fortifiedid.se"
      }
    }
  },
  // ... remaining configuration with title etc.
}
```

## Advanced Configuration

If you want or need to have the same overrides file for several apps, you can also configure more advanced for all `apps` (password\_reset, forms, portal, enrollment), all `access` (bidomd selector etc) and all `infoendpoint` by scoping as below. You can also make configuration for a specific app/auth/infoendpoint.

```json
{
  "logos": {
    "access_header": { ... },
    "access_footer": { ... }
  },
  "title": "Acme", // all get this title, even pwd_reset for example
  "access": {
    "title": "Acme IdP", // all Access get this
    "logos": {
      "access_header": { ... } // more specific. all Access auth apps will get a designated header logo
    }
  },
  "bidomd": {
    "logos": {
        "access_header": "default" // most specific, will become the Bankid logo which is default 
    },
    "title": "Acme BankID" // bidomd gets this title
  },
  "selector": {
     "logos": {
         "access_header": false // most specific, turn off the upper logo only on the selector
     }
  }
  // ... remaining configuration with title etc.
}
```

## Variables in Config

If variables are defined in the `variables` object, all instances of the variable will be replaced in the output to the browser. Note: since search and replace are used for variables, use caution when naming the variables. Use for example `__VARIABLE_NAME__` as naming convention to avoid unexpected bugs.

```json
{
  "variables": {
    "__NAME__": "Acme"
  },
  "title": "__NAME__ title" // becomes "Acme title" in the browser
}
```