Highlight content of display object

[JensL]

Hi there,

i'm making use of a display object on a dashboard page. The display objects queries values from the database - results like "fine" or "danger".

Is there any way to highlight the text within the display object in reference to the content? Like, if the word is "danger" set color to red and font to bold?
I think the event is, when the browse form loads….

No clue how to achieve this. Thx in advance, guys

By the way: NuBuilder is a pretty cool tool, using it more and more...

[kev1n]

Hi,

You can achieve that by adding some JavaScript to your form's Custom Code field.
(If you don't know how/where to do that, check out this video)

Code: Select all

if (nuFormType() !== 'browse') {
    obj = $('#replace_with_your_object_id');
    var bgColor = '';
    if (obj.val() == 'danger') {
        bgColor = 'red';
    } else
    if (obj.val() == 'fine') {
        bgColor = 'green';
    }
    if (bgColor != '') {
        obj.css('background-color', bgColor);
    }
}

You can easily add other conditions and styles, like font-weight etc: https://www.w3schools.com/cssref/pr_font_weight.asp

Also check out https://htmlcolorcodes.com/ for nicer colors.

[JensL]

Thx for the fast replay, i will give it a try in the evening...

[kev1n]

Here's a more elegant version that is easier to extend:

changecolor.gif

// bg: background color, fg: foreground color, weight: font feight

Code: Select all

var colorConditions = { 
    'danger':  {'bg': 'red', 'fg': 'white', 'weight': 'bold'},
    'fine':    {'bg': 'green', 'fg': 'white', 'weight': 'normal'},
    'other':   {'bg': 'black', 'fg': 'white', 'weight': 'normal'}
};

function setConditionalColors(id, conditions) {
    obj = $('#' + id);
    for (cond in conditions) {
        if (obj.val() === cond) {
            obj.css('background-color', conditions[cond]['bg']);
            obj.css('color', conditions[cond]['fg']);
            obj.css('font-weight', conditions[cond]['weight']);
            break;
        }
    }
}

setConditionalColors('objId ', colorConditions);  // replace objId with your object id

[JensL]

Thx dude, works pretty well!

[kev1n]

You're welcome !