Customizing loading markup for asynchronous web content rendering | HCL Digital Experience
To adjust the loading markup to the user experience, you can customize it. For example, you can use a company-specific loading icon or text.
About this task
To do so, use the following instructions.
Procedure
- Create an HCL Web Content Manager HTML
component in a Web Content Manager library.
The body of this newly created Web Content Manager HTML component serves as the custom loader markup and is delivered by the Web Content Viewer portlet.
- To notify the portlet to use a custom markup rather than
the default content, set the page parameter
wcm.custom.asynchronous.rendering.loader
. As the value, specify the path to the HTML component. All Web Content Viewer portlets on that page then use the custom markup from the HTML component. - To address the configured web content, create the JSRĀ 286
compliant Resource URL. To do so, use the
PortletResourceURL
rendering plug-in.This resource URL triggers theserveResource
method of the Web Content Viewer portlet and returns the rendered web content. - Use this markup to update the HTML document object model.
The
PortletResourceURL
supports the attributes that you can use with resource URLs, such as the resource identifierid
orcacheability
. For the custom asynchronous web content rendering scenario, you do not need to define any attributes. As more than one instance of this custom loading markup on a page is possible, use thenamespace
attribute of the portlet rendering plug-in to create unique identifiers.
Example
The following content is an example of a custom loader
markup:
<div>
<a href="[Plugin:PortletResourceURL]" id="[Plugin:Portlet key="namespace"]customAsyncRenderingHook"></a>
<div style="width: 100%; text-align: center; padding-top: 5em;">
<span>Loading web content...</span>
</div>
</div>
<script type="text/javascript">
(function() {
var hook = document.getElementById("[Plugin:Portlet key="namespace"]customAsyncRenderingHook");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState==this.DONE) {
if (xhr.status==200) {
hook.parentNode.innerHTML = xhr.responseText;
} else if (xhr.status==0) {
// implement timeout handling here ...
} else {
// implement error handling here
}
}
};
xhr.open("GET", hook.href);
xhr.timeout = 5000;
xhr.ontimeout = function() { console.error('Asynchronous rendering timed out.'); };
xhr.send();
}());
</script>