0

In SharePoint Online I am trying to hide the "See All" link that comes with the out-of-the-box List and Document Library web parts.

So I followed this tutorial, Build your first SharePoint Framework Extension and created HelloWorldApplicationCustomizer.ts

Now in that file in the OnInit() I do:

Dialog.alert(`alert 1`);

And that displays alert fine.

But if I add these two lines before the alert then the 'See all' doesn't get hidden and my alert doesn't display.

//let seeAllTag:HTMLElement = document.querySelector(`[aria-label="See all"]`)[0] as HTMLElement;
//seeAllTag.style.visibility = `hidden`;

Any ideas?

2
  • 1
    Which "two lines"? Did you forget to add the code to your question? Sep 23, 2021 at 15:23
  • Im an idiot! //let seeAllTag:HTMLElement = document.querySelector([aria-label="See all"])[0] as HTMLElement; //seeAllTag.style.visibility = hidden; Sep 23, 2021 at 18:57

1 Answer 1

0

Try using this code:

let seeAllTag: any = document.querySelector(`[aria-label="See all"]`);
if(seeAllTag) {
    seeAllTag.style.visibility = "hidden";
    //seeAllTag.style.display = "none";
}

OR;

let seeAllTag: any = document.querySelectorAll(`[aria-label="See all"]`);
if(seeAllTag.length) {
    seeAllTag[0].style.visibility = "hidden";
    //seeAllTag[0].style.display = "none";
}

Note: It will hide only one 'See all' link on the page for which aria-label matches exactly to "See all".


If you want to hide all links on the page for which aria-label starts with "See all", use this code:

let seeAllTag: any = document.querySelectorAll(`[aria-label^="See all"]`);
for(let index = 0; index < seeAllTag.length; index++) {
    let seeAllLink = seeAllTag[index];
    seeAllLink.style.visibility = "hidden";
    //seeAllLink.style.display = "none";
}

Update:

You no longer need to use the custom CSS to hide the "See all" link of list/library web parts on modern pages. Microsoft recently introduced a feature using which you can show/hide the "See all" link from web part settings.

Check this article for more information & steps: Show/Hide See all link from SharePoint list/library web parts

9
  • Hi Ganesh thanks again for your help. I get this error unfortunately Property 'style' does not exist on type 'Element'.ts(2339) Sep 24, 2021 at 8:35
  • 1
    Are you using exact code as I written or did you make any changes in it? Sep 24, 2021 at 8:50
  • Im using the exact code. Sep 24, 2021 at 10:24
  • ibb.co/WG9jr4P Sep 24, 2021 at 10:25
  • style gets underlined in VS Code to show the error thanks Sep 24, 2021 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.