Using the onRenderLabel

Classic Servoy
1

I am trying to use the onRenderLabel to replace my onRender function but I am unsure about how to set up a styleclassexpression for the component. I have a relatively simple onRender but I am not sure of how to convert this over to the onrenderlabel. My goal is for the label render as blue for approved, orange for posted, green for received, and so. For the ngclient would I be able to replace my label with the onRenderLabel and map this to a styleclass css?

Thank you in advance!

My onRender is as follows:

function onRenderStatus( event )
{
    // Get the Status element to render.
    
    var element = event.getRenderable()
    
    
    // Get the selected Order record associated with the rendered element.
    
    /** @type {JSRecord<db:/arm_data/orders>} */
    
    var ORDER = event.getRecord()
    
    //plugins.ngclientutils.
    // Set the Status element background color.
    
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'APPROVED' )
    {
        element.bgcolor = '#60c0ff'
    }
        
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'PENDING' )
    {
        element.bgcolor = '#ff0000'
    }
        
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'WEB' )
    {
        element.bgcolor = '#ff00ff'
    }
        
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'TRANSREQ' )
    {
        element.bgcolor = '#18E7E7'
    }

    if ( ORDER && element.getName() == 'fld_order_status' && ( ORDER.order_status == 'RECEIVED' || ORDER.order_status == 'TRANSFER' ) )
    {
        element.bgcolor = '#80ff80'
    }
        
        
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'POSTED' )
    {
        element.bgcolor = '#FFA580'
    }
        
    if ( ORDER && element.getName() == 'fld_order_status' && ORDER.order_status == 'OPEN' )
    {
        element.bgcolor = '#FF8080'
    }
}