Using custom CSS to change background colour of selected tab depending on child values

HCL Leap Leap Forum
,
1

@Christopher Dawes

The goal is to change the background colour of each register tab depending on field values located under each tab.

For example: Tab 1 and Tab 2 have empty field values and therefore should have a red background. The remaining tabs are complete and should have a green background.

I don't believe I can add a bespoke CSS class to a specific tab.

Can anyone please advise

Best regards
Stephen

Community-Pasted-Attachment-1684156534379.png556×141 2.93 KB

2

That would be a great feature! I was able to get something working like this (though this may not be the final solution):

If you place an HTML item, you can dynamically add a style to the page, with something like this:

var st1 = ".lfMn .customTab .lfFormFieldTab:nth-child(1) { background-color: red !important; }";
var st2 = ".lfMn .customTab .lfFormFieldTab:nth-child(2) { background-color: red !important; }";
var st3 = ".lfMn .customTab .lfFormFieldTab:nth-child(3) { background-color: red !important; }";

var st = “”;

var opts = BO.F_SelectMany1.getValue();

if(opts.indexOf(“1”) !== -1) {

st += st1;

}

if(opts.indexOf(“2”) !== -1) {

st += st2;

}

if(opts.indexOf(“3”) !== -1) {

st += st3;

}


page.F_HTMLArea1.setContent(“<style>” + st + “</style>”);


Community-Pasted-Attachment-1684434809139.png355×259 3.71 KB

So you could then hide this multi-select and use javascript to toggle the value when the tab is complete.

To determine if a tab is valid, you would have to have a javascript function that was called in the onChange event of all the fields in the tab to check if the tab is complete and valid. Unfortunately we do not have a built-in method of determining if all the fields on a tab are valid.