Page History

...

At runtime there are 2 levels of dynamically changing styling:

• Updating UI component properties through their scripting API 
• Conditional styling using the onRender event

Updating UI component properties through their scripting API 

Each UI component provides a scripting API and that API provides methods to alter the appearance of the UI component dynamically at runtime.

For a complete overview of the runtime API of all UI components see RuntimeForm for Form instances and the childnodes of elements for all the different Element types 

Conditional styling using the onRender event

The onRender event on Forms and Elements provides a way to conditionally change the appearance of the UI component.

The onRender event is available on Forms, Portals and Elements. This event allows changing display properties of supporting components just before they are shown or updated. As such it can be used for conditional formatting for example.

On Form and Portals the event is fired not only for the Form/Portal itself, but also for all the standard Servoy Elements on the Form/Portal, if the element does not have its own onRender event handler. The Form/Portal level onRender event will not fire for beans.

The onRender event handler is called with a parameter of type JSRenderEvent, that provides the following functions:

• getRecord(): the record of the rendered object
• getRecordIndex(): the index of the rendered object
• getRenderable(): the rendered object
  The returned object is of type Renderable. A Renderable object can be an instance of a RuntimeForm, RuntimePortal or any of the other RuntimeXxxx elements. 

...

Servoy StyleSheets > Object Properties > Runtime Scripting > onRender event

...

• 
  The Renderable class exposes all the properties that can be set in the onRender event and also utility functions to get the rendering element type and its dataprovider.
  The Renderable class is a generic class and some of the properties and methods are not applicable on the actual object being rendered. For example, if the object being rendered is an instance of RuntimeForm, the property toolTipText or the method getDataProviderID are irrelevant. When these are set/called anyway, they will fail silently 
• hasFocus(): whether or not the rendered object has the focus
• isRecordSelected(): whether or not the record of the rendering object is selected

Any updates made in the onRender event to the rendering object are persistent within the Client session until changed through the runtime API of the element or in a consecutive onRender event. This means that in the onRender logic, both states of a property need to be handled. This means that if the onRender is used to set the fgcolor of a field depending if the dataprovider's value is negative or not, the fgcolor needs to be explicitly set for both negative and positive numbers. When the same foreground property is also set in scripting and should overrule the onRender, the developer needs to take care of this inside the onRender logic

Example use: Making negative values in a column red and zero values orange

/*
 * Called before the form component is rendered.
 *
 * @param {JSRenderEvent} event the render event
 */
function onRender(event) {
/** @type {JSRecord<db:/udm/orders>}*/
var rec = event.getRecord()
if (rec.amt_tax == 0) {
    event.getRenderable().fgcolor = '#ff6600';
 } else if (rec.amt_tax < 0) {
    event.getRenderable().fgcolor = '#ff0000';
 } else {
    event.getRenderable().fgcolor = '#000000';
 }
}

 About performance: The onRender event will be fired often. It's therefor advised to keep the logic inside the onRender event handler method as optimized as possible, for quick execution. It's advised to refrain from calling any code outside the API of the JSRenderEvent or the Renderable class.