When customizing HTML templates, the Loginapp REST UI SDK 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.:
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 REST UI SDK provides variables that are always available when rendering HTML such as:
- ●A translate function to translate i18n keys into human-readable text.
See: 17.3.2.4.4.5. Internationalization and translation with the Loginapp REST UI SDK. - ●Language information using availableLanguages and determine which one is active (languageActive) as well as translate the language into a human-readable text (languageText).
See: 17.3.2.4.3. Customization of the Loginapp REST 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:
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 (< > ' " & => < > ' " &) beeing displayed in the browser.