Share via

How do I hide the other parts on the Sharepoint List toolbar

Christopher Jack 101 Reputation points
2022-08-12T10:56:50.923+00:00

Hi,

I have managed to hide the 'NEW' button on the tope of the sharepoint list by using some code I found on the net. 

{  
  "commandBarProps" : {  
    "commands": [  
      {  
        "key": "new",  
        "hide": true  
      }     
    ]  
  }  
}

https://www.sharepointdiary.com/2022/03/hide-button-in-sharepoint-online-list-or-document-library.html

What are the keys for the other options on the toolbar?

TIA

Microsoft 365 and Office | SharePoint | Development
Microsoft 365 and Office | SharePoint | For business | Windows
Accepted answer
  1. Jing Sun_MSFT 956 Reputation points
    2022-08-17T07:23:46.92+00:00

    Hi @Christopher Jack ,
    Here is an official guidance of other keys on the tool bar for your reference
    Command bar customization syntax reference-key

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Rachel Gomez 166 Reputation points
    2022-08-17T07:30:31.183+00:00

    I was looking for some ways to hide SharePoint list view column headers today. Here are my findings:

    You can use CSS to hide column headers
    Use JavaScript/jQuery to Hide column headers
    You can edit the page in SharePoint designer and remove column headers
    Hide Column Headers of All List View using CSS in SharePoint 2010-2013-2016:
    Insert a CEWP just below your list view web part, and place this code in it.

    <style type="text/css">
    tr.ms-viewheadertr
    {
    display: none
    }
    </style>

    This will hide all list view web part headers.

    Hide Column Headers in List View Web Parts
    The headers of your web part should now be hidden. The above code hides the headers of every web part on the page. It’s helpful when the page contains a web part using boxed style list views.

    You can also hide specific web part’s header using this CSS:

    WebPartWPQxxxx .ms-viewheadertr
    {
    display: none
    }
    Where xxxx is the web part ID. Use IE Toolbar/Firebug to find it.

    jQuery to find and Hide specific Web Part Headers:

    <script language="javascript" src= type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
    $("table[summary='LIST NAME'] tr:eq(0)").hide();
    });
    </script>

    Don’t forget to change the LIST NAME in the above code!

    This may help you,
    Rachel Gomez

    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.