To customize header, footer, and content frame, implement the following methods:
class MyCustomLayout extends iam.api.types.CustomLayout {
headerHtml() {
return ...;
}
contentHtml() {
return ...;
}
footerHtml() {
return ...;
}
}
When inheriting from CustomLayout
, no HTML is defined for header, footer, and content. Each method must therefore be implemented when specific HTML is required.
In contrast to header and footer, the contentHTML()
method needs to define where the actual content of the Loginapp UI should be rendered to. To do so, it is required to mark an HTML element using HTML ID iamContentTargetContainer
.
Example 1– contentHtml in separate file:
contentHtml() {
return this.fetchHtml('assets/custom/templates/my-custom-content.html');
}
The content of the separate HTML would follow :
<div class="iam-container iam-content-container">
<div class="iam-row">
<div id="iamContentTargetContainer" class="iam-col-12"></div>
</div>
</div>
- When using separate (non-inline) HTML:
- For optimal performance, the Loginapp Design Kit will then inline the file's content at build time. For this to work, the path of the file to be loaded has to be a plain string all in one line. Using variables or otherwise concatenating the file path will not work.
- In production mode, the build fails if a referenced file does not exist.
- In development mode, file deletions or renames are not properly detected and the UI may still show content that does no longer exists. A restart of the development mode helps in this case.
Example 2 – contentHtml as inline code:
contentHtml() {
return `<div class="iam-container iam-content-container">
<div class="iam-row">
<div id="iamContentTargetContainer" class="iam-col-12"></div>
</div>
</div>`;
}
Content HTML that lacks the marking HTML ID will lead to a broken and unpredictable layout. Conversely, any content within the marked element will be cleared.