Post Processing of HTML

The LumisPortal provides a client-side API to centralize the post-processing of HTML.

The basic usage of this API is:

• A JavaScript function fn⁽¹⁾ is registered in the API through a call LumisPortal.HtmlProcessor.register(fn);
• A component that modifies the HTML of the page notifies the API via LumisPortal.HtmlProcessor.process(element)⁽²⁾;
• The API invokes each registered function, in the order they were registered, passing the parameter element, meaning that in the case of the function fn, it would invoke fn(element);

Motivation and Example

Imagine we have a situation where a service's interface needs to change a part of the generated HTML, injecting, for example, a button (represented by the image lumis/portal/client/images/Edit.gif).

A solution could be to make, in the interface's XSL, a JavaScript that injects the desired HTML on the document's ready event, as shown in the example below:

This solution works, as shown in the images below:

By navigating to the second page, we would have:

The operation seems correct. Now, we will enable the client-side rendering of the interface instance, as shown below:

After this, when rendering the page again, we would have:

Notice that the icon is gone. This happens because the interface is not injected during the page rendering and when the script that injects the icon runs, the HTML of the interface is still not ready.

To solve this problem, we could modify the XSL to inject the icon through the HTML post-processing API, as shown below:

Rendering the page again, we see:

The problem was fixed, as LumisPortal automatically invokes the HTML post-processing API when rendering a service instance.

Now suppose, for example, that the list interface updates its information (adding a new element, for example) through an AJAX call. To illustrate this scenario, we will alter the XSL to include a button that adds a new element to the HTML, as shown below:

When rendering the page again and clicking the button, we would have the following effect:

Note that the icon was not introduced into the item added by the javascript. In this situation, the code responsible for adding the new element must be responsible for invoking the API, as demonstrated below:

Note that now the button click does, after the HTML injection, an invocation LumisPortal.HtmlProcessor.process(element);. Thus, rendering the page again and clicking the button, we would have the following effect:

Notice that now the new element was processed correctly and had its icon injected.

In general, any javascript code that alters the DOM and wishes to be compatible with functionalities that use this HTML post-processing should invoke LumisPortal.HtmlProcessor.process(element); passing the included/modified element.

Similarly, any javascript code that alters the DOM generically (such as including the icon, for example), to be compatible with client-side rendering or other HTML modifications using this API, should do so by registering a function in the HTML post-processing API, calling LumisPortal.HtmlProcessor.register(function(element){ /* function code */ });.