HTML rendering and HTML template variables in the Loginapp Design Kit

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.

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

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.

• 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 with the Loginapp Design Kit.
• 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.

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

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:

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 (< > ' " & => &lt; &gt; &#39; &quot; &amp;) beeing displayed in the browser.

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 });