Change vlookup headers class on table refresh

Forums vLooup for SharePoint Change vlookup headers class on table refresh

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Alexander Bautz 4 months ago.

  • Author
    Posts
  • #16357

    Arkadiusz Dyrka
    Participant

    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

  • #16411

    Alexander Bautz
    Keymaster

    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

  • #16420

    Arkadiusz Dyrka
    Participant

    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

  • #16424

    Alexander Bautz
    Keymaster

    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

You must be logged in to reply to this topic.