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.

The data in ui_config_overrides.json will be merged with the default values.

Properties

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

Default

{
  "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"
}

Logo Configuration

All logos are configured as follows:

{
  "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):

{
  "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.

{
  "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.

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