When an Interact client is ready to create a page, it calls the Page Renderer object to create it. In response, the Page Renderer object calls sub renderers (e.g., PageHeader renderer, Footer renderer, and so on) that create sub elements for the page DOM. When an Extension is registered for a renderer’s Extension point, it will be called with the appropriate context and the DOM element that was created in the base renderer. The Extension then has all the information it needs to modify or ignore the element of the previous renderer. Alternatively, the Extension can create a completely new DOM element using the context passed by the framework.

The following diagram shows the architecture for how an Extension uses the PageHeader renderer point to modify the original DOM element. Note that the Extensions are called in a specific order, which is the order in which they are organized in the Application's settings. (For details, click here.)

Using Extensions to Modify the Client 

Typically, Extensions are used in one of the following ways:

  • Registering a specific renderer that interjects the creation process of the DOM (as shown in the example above). This technique allows you to make system-wide modifications even before the page is fully rendered. However, a disadvantage of this method is that the DOM is not fully stable and can continue changing as the process continues.
  • Registering the loaded event after the DOM is created. At this point, the DOM is stable, enabling you to select elements more accurately. You can manipulate the entire DOM structure by adding and removing DOM elements to/from the page according to the data context that is passed with each page. This method is recommended, for example, when you want to modify a specific Flow element using a unique reference name.

When you create a new Extension, the default code on the New Extension page prompts you to use one of these techniques to write the Extension. For more details, see Working with Extensions.