Change vlookup headers class on table refresh

[Arkadiusz Dyrka]

Hello Alexander,

I have a Sharepoint site where I’m using vlookup to show some tasks on the form (launching in dialog).
User changed site theme to gray color, which caused that field labels have also grey background.
When using vlookup functionality, all columns have transparent background which I would like to override to make them the same as others.
MS uses “ms-formlabel” class to style headers so I created custom js function with name “startHeadersOverride” that is triggered when form is ready

function startHeadersOverride(){
    myjob = setInterval(overrideVlookupHeadersClass, 1000);
}
function overrideVlookupHeadersClass(){

    var vLookupTable = document.getElementsByClassName("vLookupTable");
    if(vLookupTable.length!=0){
        var vLookupHeaders = vLookupTable[0].getElementsByClassName("childTableHeader");
        for (i=vLookupHeaders.length-1;i>-1;i--){
            vLookupHeaders[i].className="ms-formlabel";
        }
        clearInterval(myjob);
    }
}

It works fine when form openes which you can see on first attachment.
The problem is when I edit any vlookup item and save/cancel it, I’m back to my original form and vlookup table is refreshed, which leaves me with original header class again (see attachment #2).

So my question: is there any way to capture and override/add my code to vlookup refresh? or any idea how to change header class for vlookup?
I would like to avoid defining whole set of attributes for class .childTableHeaderRow of vlookup table just in case user will change theme again i future and that would require to replace custom css again.
Also having JS with another setInterval method and 1s interval to check if table exist and if it has correct class is not a desired solution for this.

Best Regards
Arek

Attachments:

1. 

   form-with-correct-vlookup-headers.png
   

2. 

   form-with-missing-header-class.png
   

[Alexander Bautz]

Hi,
Sorry for not replying earlier – I had a little backlog after easter. This is most likely better addressed with CSS – add this to the Custom CSS in DFFS:

.childTableHeaderRow td{
    background-color:#c6c6c6;
    padding:3px!important;
}

Add other styles to make it look like you want – you may need to use the !important flag to ensure it sticks.

Alexander

[Arkadiusz Dyrka]

HelLo Alexander,

yeah, I suspecrted such answer.
I tried to avoid overriding this class with set of my own attributes just in case user would like to change theme again in the future but I guess there’s no other way.

In any case, thanks for checking it for me.

Best Regards
Arek

[Alexander Bautz]

This is a setting in each form (in the Custom CSS in DFFS Backend) and is not affecting other lists with DFFS / vLookup. If you like you can also target it to only one vLookup like this:

#dffs_NameOfYourField .childTableHeaderRow td{
    background-color:#c6c6c6;
    padding:3px!important;
}

Alexander

[Author]

Posts