Skip to main content

Customise Rendered Content

The CSA plugin contains a variety of web components that render the different parts of the CSA user interface. These web components are all created from a common base class ComponentBase which provides some features to allow the rendered content of the component to be customised.

Post-Render Customisation​

It is possible to define a function for a specific CSA component which the component will execute immediately after it has rendered to the browser.

These customisation functions are stored in the browser window object so that they are globally accessible. The key used to store these functions in the browser window object must follow the pattern:

customise{ClassName}

where {ClassName} is the class name of the CSA component.

For example, if we want to modify the rendered content of the AccountDetails component we would need to define a function and store this in the browser window object with the name customiseAccountDetails.

/**
 * Customise the account details component
 * @param element - HTML element of the AccountDetails component
 */
window["customiseAccountDetails"] = function (element) {
  // Access the component shadow DOM
  var shadowRoot = element.shadowRoot;

  // Set the heading colour
  var heading = shadowRoot.querySelector("h1");
  h1.style.color = #336699;
}

The function receives an HTML element as a parameter which is the root element of the associated web component. This provides access to the entire shadow DOM of the web component to make any customisations required.

Auto-Renderer Customisation​

For components which consume data from the Service Request Microservice (SRMS), it is possible to automatically generate a user interface for the data using the associated swagger specification. This is achieved using the UUX SRMS form renderer component: <uwc-srms-form-renderer>

The resulting UI will render all fields 1 per row in the order in which they are defined in the swagger specification. This may not be the desired presentation, but using the following HTML methods it is possible to inject additional markup/text (to add group headings, change the layout etc.) to get the desired result:

  • insertAdjacentElement
  • insertAdjacentHTML
  • insertAdjacentText

Here is an example of how you could use these functions to add a group heading before the following auto generated HTML:

<uwc-text-field type="text" label="First Name" value="" id="firstName" name="firstName"></uwc-text-field>
<uwc-text-field type="text" label="Last Name" value="" id="lastName" name="lastName"></uwc-text-field>

Default render

Using the insertAdjacentHTML method we can add a <uwc-text> component before the <uwc-text-field> component for capturing "First Name":

var firstName = document.querySelector("#firstName");
firstName.insertAdjacentHTML('beforebegin', '<uwc-text variant="h2">Customer Details</uwc-text>');

Custom render with added heading

This approach to customisation through direct DOM manipulation is suited to small changes to the HTML produced by the SRMS form renderer.

If you require a radically different user interface than the one produced by the SRMS form renderer then a custom component with a purpose built user interface is recommended.