Page 1 of 1
Highlight content of display object
Posted: Thu May 07, 2020 1:01 pm
by 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...
Re: Highlight content of display object
Posted: Thu May 07, 2020 1:20 pm
by 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.
Re: Highlight content of display object
Posted: Thu May 07, 2020 2:11 pm
by JensL
Thx for the fast replay, i will give it a try in the evening...
Re: Highlight content of display object
Posted: Thu May 07, 2020 2:16 pm
by 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
Re: Highlight content of display object
Posted: Thu May 07, 2020 8:40 pm
by JensL
Thx dude, works pretty well!
Re: Highlight content of display object
Posted: Thu May 07, 2020 8:45 pm
by kev1n
You're welcome !