HTML rendering and template variables

When customizing HTML templates, the Loginapp Design Kit adds variables that can be used when rendering the HTML.

HTML can be rendered in different ways as shown below:

Using plain HTML.
Using renderHtml without arguments.
Using renderHtml with arguments.

Using plain HTML

The simplest case, plain HTML is directly returned from a method, e.g.:

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
    headerHtml () { 
        return '<div class="custom-header"><div class="custom-header-logo"></div></div>'; 
    } 
}

Plain HTML typically is static content that does not require translations or any other variables.

Using renderHtml without arguments

By default, the Loginapp Design Kit provides variables that are always available when rendering HTML such as:

A translate function to translate i18n keys into human-readable text.
See: Internationalization and translation.
Language information using availableLanguages and determine which one is active (languageActive) as well as translate the language into a human-readable text (languageText).
See: Customization of the Loginapp UI layout using default HTML files.

These functions and values are always available even when providing your own arguments to the renderHtml method.

Using renderHtml with arguments

It is also possible to pass additional arguments to the renderHtml method:

Example

class MyCustomLayout extends iam.api.types.CustomLayout { 
    headerHtml() { 
        const username = 'John'; 
        const address = { street: 'Airlock Street', houseNumber: 17 }; 
        return this.renderHtml('<div>{{#translate}}custom.i18n.key.to.translate{{/translate}}, your address is {{address.street}} {{address.houseNumber}}</div>', 
               { 
                   name: username, 
                   address: address 
               }); 
    } 
}

The arguments can directly be used in the HTML as shown with the address, but can also be accessed as interpolation parameters in an i18n translation, e.g. with the following key:

Example

custom.i18n.key.to.translate = Hello {{name}}

renderHtml will automatically escape all variables to prevent injection attacks.

Using the translate method, with interpolation parameters inside the renderHtml method, may lead to escaped special characters (< > ' " & => < > ' " &) beeing displayed in the browser.

Risk

For security reasons we strongly recommend using the renderHtml method with templates (keys in curly brackets) rather than writing strings, variables etc. directly into the HTML.

// (This is bad)
'<div>' + variable + '</div>'

// (This is good)
renderHtml('<div>{{variable}}</div>', { variable });