When customizing HTML templates, the Loginapp REST UI SDK adds variables that can be used when rendering the HTML.

Using plain HTML

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.

Using renderHtml without arguments

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:

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