SOLVED

Modifying grouped list headers

Brass Contributor

I'm using a SharePoint list grouped view to show FAQ's, so the view is grouped by "Question" and users can expand the question to see the answer. I'm trying to find a way to hide the item counts - as explained on this page. I would also like to hide the column name (Question) form the grouped view header, as explained on this page.

 

I was happy to find these instructions, because it's exactly what I'm trying to do, but what does he mean by "remember to refer jquery library?"

14 Replies
that technique is using jQuery library, so you need to include that library to your pages: <script src"....jquery.js"... you can do that in some different ways, like customising a master page, but I suggest to use a Custom Action to inject the script.

Thank you for your response, but I'm a novice, and I'm not sure what you're saying. My plan was to add a CEWP to the page where I've added the list web part (or should I use a Script Editor web part?), is there something I should add to this code, as referenced in the link I posted? I do NOT want to modify the master page.

 

Use below script in CEWP, remember to refer jquery library.

 

$("table.ms-listviewtable td[class=’ms-gb’]").each(function() {

//Hide all Counts for Groups

$(this).find("span:last").remove();

});

I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.

Here is your grouped header HTML:

 

qNl1Ns9

 

 

 

 

 

 since that <span> has a display inline style, you can't overrule it with display:none

But one line of CSS can hide it:

 

``

    span[style*='lighter'] {
      color: transparent;
    }

``

 

Put it in a CEWP on the ListView page, between <style> tags

 

But coding solutions are great, they really are! 

 

Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag

 

![]()

 

But no need for jQuery, vanilla JavaScript can do that:

 

 

    var groupedAs=document.querySelectorAll("tbody[id^='titl'] a");
    //iterate Nodelist as Array
    [].forEach.call( groupedAs , function(A) {
        if(A.nextSibling){ // change this DOM element once when there is a label
            A.firstChild.nextSibling.remove(); // remove fieldname label
            var value=A.appendChild(A.nextSibling); // move label inside A tag
            value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon
            A.nextElementSibling.remove(); // remove counter after A
        } else {
            console.warn('ran code twice')
        }
    });

 

 

 

 

 

 

 

 

best response confirmed by Allison Rizak (Brass Contributor)
Solution

I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.

Here is your grouped header HTML:

 

qNl1Ns9

 

 

 

 

 

 since that <span> has a display inline style, you can't overrule it with display:none

But one line of CSS can hide it:

 

``

    span[style*='lighter'] {
      color: transparent;
    }

``

 

Put it in a CEWP on the ListView page, between <style> tags

 

But coding solutions are great, they really are! 

 

Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag

 

![]()

 

But no need for jQuery, vanilla JavaScript can do that:

 

 

    var groupedAs=document.querySelectorAll("tbody[id^='titl'] a");
    //iterate Nodelist as Array
    [].forEach.call( groupedAs , function(A) {
        if(A.nextSibling){ // change this DOM element once when there is a label
            A.firstChild.nextSibling.remove(); // remove fieldname label
            var value=A.appendChild(A.nextSibling); // move label inside A tag
            value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon
            A.nextElementSibling.remove(); // remove counter after A
        } else {
            console.warn('ran code twice')
        }
    });

 

 

 

 

 

 

 

 

If you just need it in one page, then just add a Script Editor WebPart with something like this:

 

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("table.ms-listviewtable td[class=’ms-gb’]").each(function() {
//Hide all Counts for Groups 
$(this).find("span:last").remove();
});
</script>

It's the same code from the article, but adding a reference to load jQuery library.

 

Keep in mind that you're adding a big library (jQuery) to solve a small problem that could be fixed with just JavaScript, without adding jQuery library. If you want, take a look to this page to find out how you could do the same functionality with just JavaScript&colon;

https://github.com/oneuijs/You-Dont-Need-jQuery

I copied your code and added it to the page, and nothing changed. I tried using a CEWP and a Script Editor web part, same result. As for your reference to this page - https://github.com/oneuijs/You-Dont-Need-jQuery - I have no idea what to do with that. Thanks anyway.

 

I got an email that there was another response from @Danny Engelman ... but I don't see it here?

No idea. I'm assuming the code in the article is working, but maybe is not. Are you in SharePoint On premises, or Online? if on prem, which version, 2016/2013?

SharePoint online

Hi Allison,

 

Just to add, please make sure the Javascript code is added in a CEWP web part which is placed below the List View web part. Because Javascript runs sequentially down the page and hasn't been called through a function, it might not take effect if it doesn't find the particular html element. 

 

Also if you end up using JQuery, to be safe, you could call the iterator function in $(document).ready() function to make sure all your page elements are initialized when the hide function is called.

 

Also, there are smarter CSS ways to achieve the same but considering that this is a OOB list view there might be some side effects if the CSS is not properly structured.

 

Thanks,

Asish

| I got an email that there was another response from @Danny Engelman ... but I don't see it here?

I posted an answer with no-Jquery code here ... but I don't see it anymore. I do get emails for every reply.

This forum sucks..

I've already done that, I added a CEWP below the list web part on the page, it just doesn't work. I guess I'll have to give up. Why does SharePoint have to be so difficult?

OK. This code is working for me, I've tested it on SP Online within a Script Editor WP:

 

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPostRender: function () { 
       $("table.ms-listviewtable td[class='ms-gb'] > span").each(function() {
           $(this).remove();
       }); 
    }     
});
</script>

 

Couple of things to bear in mind:

Let us know how it works, but it should.

Sorry, that didn't work either. I'm spending too much time on this, so I'm giving up. Thanks anyway!

I was able to apply the css to hide the item counters, worked great - thanks!

 

No idea what to do with the rest of what you said, but I'm happy with just hiding the numbers.

1 best response

Accepted Solutions
best response confirmed by Allison Rizak (Brass Contributor)
Solution

I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.

Here is your grouped header HTML:

 

qNl1Ns9

 

 

 

 

 

 since that <span> has a display inline style, you can't overrule it with display:none

But one line of CSS can hide it:

 

``

    span[style*='lighter'] {
      color: transparent;
    }

``

 

Put it in a CEWP on the ListView page, between <style> tags

 

But coding solutions are great, they really are! 

 

Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag

 

![]()

 

But no need for jQuery, vanilla JavaScript can do that:

 

 

    var groupedAs=document.querySelectorAll("tbody[id^='titl'] a");
    //iterate Nodelist as Array
    [].forEach.call( groupedAs , function(A) {
        if(A.nextSibling){ // change this DOM element once when there is a label
            A.firstChild.nextSibling.remove(); // remove fieldname label
            var value=A.appendChild(A.nextSibling); // move label inside A tag
            value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon
            A.nextElementSibling.remove(); // remove counter after A
        } else {
            console.warn('ran code twice')
        }
    });

 

 

 

 

 

 

 

 

View solution in original post