Customization of the Loginapp UI layout using default HTML files

The Loginapp Design Kit allows replacing the Loginapp default appearance with custom HTML. This may be achieved in a simple, recommended way with separate plain default HTML files or by adding inline HTML in JavaScript.

  • Its a common use case to customize the generic layout of all Loginapp UI pages, in particular:
  • Header
  • Footer
  • Content Frame

For optimal performance, the Loginapp Design Kit inlines the HTML file's content at build time.

Adding new default HTML files

By placing new (separate) default HTML files into the templates folder, the Loginapp UI can be modified without further configuration.

This customization approach is limited to the predefined set of default HTML files, but it is possible to use only a subset of the default files and leave the others as defined by IAM. The disadvantage is that any future changes made by IAM will be automatically applied, with the risk that they may not match the expected appearance of your HTML subset.

Therefore we recommend defining all of the listed HTML files.

For a more flexible but complex approach, see Advanced customization options for the Loginapp REST API layout.

Path to the folder where the custom default HTML files have to be placed:

copy
$CUSTOM_DIRECTORY/src/assets/custom/templates/layout
  • Names of the default HTML files:
  • default-header.html
  • default-content.html
  • default-footer.html

To avoid problems with caching, it is recommended to use SASS whenever possible.