By 1,219 total views, 3 views today
In this “How to hide add new item in SharePoint list” article, we will learn how to hide add a new item button in SharePoint list or document library. And also, we will learn the below:
- How to work with SharePoint command bar props
- How to hide the Integrate option in SharePoint online list using JSON
- How to hide the Automate option in SharePoint online list using JSON
- How to hide the Export dropdown menu option in SharePoint online list using JSON
- How to hide the copy link option in SharePoint online list using JSON
- How to hide the share link option in SharePoint online list using JSON
- How to hide the delete button SharePoint online list using JSON
- How to hide the edit button SharePoint online list using JSON
- How to hide the “Edit in grid view” button in the SharePoint Online list using JSON
- How to hide the upload document button in the SharePoint Online document library using JSON
- How to hide the new item button
- How to work with the SharePoint list hide command bar
How to hide add new item in SharePoint list using JSON
We can hide the add a new item button in the SharePoint Online list using the below JSON formatting:
{
"commandBarProps":
{
"commands":
[
{
"key": "new",
"hide": true
}
]
}
}
Just add the above JSON, to your list view and see “+ New” button is not shown anymore.
Let’s see before adding the new JSON code, the “+ New” button is shown in the list.
Now, let’s add the above JSON formatting code for the list view, then this “+ New” button will be hidden.
Format current view using JSON coding – SharePoint command bar props
Select your view from the view selection dropdown list. Here we have selected “All Items” view.
Click on the “Format current view” link menu.
Format view choose the layout in the SharePoint Online list – SharePoint command bar props
Then keep the layout as “List”, this is the default value, other value in choose layout would be “Gallery”.
Here there will be two radio buttons:
- Alternating row styles
- Conditional formatting
Don’t select any of them.
Click on the Advanced mode link.
We will see the below default JSON code:
Replace the default code with the below custom JSON:
{
"commandBarProps":
{
"commands":
[
{
"key": "new",
"hide": true
}
]
}
}
Click on the Save button.
Now, let’s verify that the add “+ New” button is hidden, and not shown anymore.
Notes:
- Now, we cannot see the add “+ New” item button anymore, however, we could see the “Edit in grid view” button – which means still user can add and edit list items using the “Edit in grid view” button. To avoid this, disable the “Edit in grid view” button referring to this article – How to disable and enable edit in grid view SharePoint list?
- Using this same JSON we can hide the “+ New” button in the SharePoint Online document library as well, but this will not hide the “Upload” document button. To hide the “+ New” item and “Upload” document button, we need to customize the JSON code, please refer to the below section on how to hide the upload document button in the SharePoint Online document library.
Notes:
- Hiding the add new item button using the JSON formatting will only work at the view level which means, if you have ten views, you need to write this JSON list formatting code in ten views – at least this limitation is applicable in today’s date, many users have raised their concerns about this, Microsoft might implement this at the list level in future – having this feature implemented in list level rather than in each individual level will be a great advantage to SharePoint business users, developers.
In classic SharePoint many other ways also, we could hide the add “+ New” item button, for example, using CSS and Javascript coding we could achieve the same.
Hide the new item button using CSS selector in SharePoint online
To Hide the “New Item” button using CSS in Classic SharePoint, we need to follow the below steps:
- Open the list
- Edit the page.
- Add Script Editor web part.
- Copy and paste the below code and click on the OK button.
<style type="text/css">
#Hero-WPQ2
{
display:none;
}
</style>
In SharePoint hide new item button using javascript
Use the below Javascript code to hide the new item button in classic SharePoint:
First, we need to add the script editor web part on the list page, then need to add the below code to it:
<script type="text/javascript">
var elem = document.getElementById("Ribbon.ListItem.New.NewListItem-Large");
elem.style.display = "none";
</script>
How to hide the upload document button in the SharePoint Online document library.
Below are the two default buttons in the SharePoint Online document library – these buttons will be there for each view.
- + New
- Upload
Using the below JSON we can hide the upload document button as well as the “+ New” button in the SharePoint Online document library.
{
"commandBarProps":
{
"commands":
[
{
"key": "new",
"hide": true
},
{
"key": "upload",
"hide": true
}
]
}
}
Now, let’s apply the above JSON, we cannot those upload buttons anymore.
Hide Upload document buttons in SharePoint Online document library using JSON
Once we apply the above JSON to the list view, we cannot see the “+ New” and “Upload” buttons anymore.
Now, do you want to restrict more? If you notice, still we could see the “Edit in grid view” button, using this, users can add and update items/documents.
Now we will learn how to hide the “Edit in grid view” button.
How to hide the “Edit in grid view” button in the SharePoint Online list at the view level using JSON?
We know we can hide the “Edit in grid view” button at the list level which means this button will not be available across all views in the SharePoint Online list/document library.
Now, using the JSON formatting code, we can hide the “Edit in grid view” button for the particular view, for this use the below JSON for that view where you want to hide the “Edit in grid view” button:
{
"commandBarProps":
{
"commands":
[
{
"key": "new",
"hide": true
},
{
"key": "upload",
"hide": true
},
{
"key": "editInGridView",
"hide": true
}
]
}
}
Notes:
- We can’t see the “+ New”, “Upload”, and “Edit in grid view” buttons anymore, after applying the JSON code.
Here few things to remember:
- Show hide attributes in SharePoint Online works based on the “Key” and “hide” properties.
Key hide properties for the ” + New”, “Upload” and “Edit in grid view” are as below:
Hide the ” + New” button:
</pre>
{ "commandBarProps": { "commands": [ { "key": "new", "hide": true } ] } }
<pre>
Hide the ” Upload ” button:
</pre>
{ "commandBarProps": { "commands": [ { "key": "upload", "hide": true } ] } }
<pre>
Hide the ” Edit in grid view” button:
</pre>
{ "commandBarProps": { "commands": [ { "key": "editInGridView", "hide": true } ] } }
<pre>
Notes:
- Likewise, we can add as many key hide properties as we want to hide in the SharePoint list view using JSON properties, and the JSON should be written inside the “commands” section. the syntax is below:
SharePoint command bar props JSON Syntax in SharePoint Online:
{
"commandBarProps":
{
"commands":
[
{
//The key hide property section 1
"key": "keyproperty",
"hide": true/false
},
{
//The key hide property section 2
"key": "keyproperty",
"hide": true/false
},
{
//The key hide property section 3
"key": "keyproperty",
"hide": true/false
},
{
//And so on.....
}
]
}
}
Well, we can do a lot more using the using JSON formatting “commandBarProps”. Now let’s hide the Edit and Delete button from a list or document library view.
How to hide the edit button SharePoint online list using JSON formatting?
Let’s say we want to hide the below edit button from the SharePoint Online list item.
For each selected list item, we can see the above “Edit” button.
Now, let’s apply the below JSON formatting code, the edit button will be hidden from the list.
{
"commandBarProps":
{
"commands":
[
{
"key": "edit",
"hide": true
},
{
"key": "editInGridView",
"hide": true
}
]
}
}
After applying the above JSON, we can not see the Edit and Edit and grid view buttons anymore.
How to hide the delete button SharePoint online list using JSON formatting?
Use the below JSON to hide the delete button in the SharePoint Online list item.
{
"commandBarProps":
{
"commands":
[
{
"key": "delete",
"hide": true
}
]
}
}
Hide delete button in SharePoint Online list item using JSONAfter applying the above JSON, we can not see the delete button anymore, though we select an item.
How to hide the share link option in SharePoint online list using JSON formatting?
Use the below JSON to hide the share link option in the SharePoint Online list item.
{
"commandBarProps":
{
"commands":
[
{
"key": "share",
"hide": true
}
]
}
}
After applying the above JSON, we can not see the share link option anymore, though we select an item.
How to hide the copy link option in SharePoint online list using JSON formatting?
Use the below JSON to hide the share link option in the SharePoint Online list item.
{
"commandBarProps":
{
"commands":
[
{
"key": "copyLink",
"hide": true
}
]
}
}
After applying the above JSON, we can not see the copy link option anymore, though we select an item.
How to hide the Export dropdown menu option in SharePoint online list using JSON formatting?
Use the below JSON to hide the Export dropdown menu option in the SharePoint Online list:
{
"commandBarProps":
{
"commands":
[
{
"key": "export",
"hide": true
}
]
}
}
After applying the above JSON, we can not see the export dropdown list option anymore in the list.
How to hide the Automate option in SharePoint online list using JSON formatting?
Use the below JSON to hide the Automate link option in the SharePoint Online list:
{
"commandBarProps":
{
"commands":
[
{
"key": "automate",
"hide": true
}
]
}
}
Hide Automate option in SharePoint Online list using JSONAfter applying the above JSON, we can not see the Automate option anymore in the list.
How to hide the Integrate option in SharePoint online list using JSON formatting?
Use the below JSON to hide the Integrate dropdown link menu option in the SharePoint Online list:
{
"commandBarProps":
{
"commands":
[
{
"key": "integrate",
"hide": true
}
]
}
}
After applying the above JSON, we can not see the Integrate dropdown menu list option anymore in the list.
With all these JSON updates, we could see that the list ribbon menu is empty, still, we could do a lot more.
Consolidated JSON – Hide add New Item, Edit, Edit in grid view, delete, Share, Copy link, Export, Automate
Below is the complete JSON code to hide the New, Edit, Edit in grid view, delete, Share, Copy link, Export, Automate button in SharePoint Online list view:
{
"commandBarProps":
{
"commands":
[
{
"key": "new",
"hide": true
},
{
"key": "edit",
"hide": true
},
{
"key": "editInGridView",
"hide": true
},
{
"key": "delete",
"hide": true
},
{
"key": "share",
"hide": true
},
{
"key": "copyLink",
"hide": true
},
{
"key": "export",
"hide": true
},
{
"key": "automate",
"hide": true
}
]
}
}
SharePoint list hide command bar: Valid keys include in SharePoint command bar props – available key (javascript):
Below are the Valid keys included as of now:
- ‘new’
- ‘newFolder’
- ‘newWordDocument’
- ‘newExcelWorkbook’
- ‘newPowerPointPresentation’
- ‘newOneNoteNotebook’
- ‘newFormsForExcel’
- ‘newVisioDrawing’
- ‘upload’
- ‘uploadFile’
- ‘uploadFolder’
- ‘open’
- ‘share’
- ‘copyLink’
- ‘download’
- ‘rename’
- ‘copyTo’
- ‘moveTo’
- ‘delete’
- ‘edit’
- ‘comment’
- ‘editNewMenu’
- ‘powerBI’
- ‘powerBIVisualizeList’
- ‘automate’
- ‘automateCreateRule’
- ‘automateManageRules’
- ‘powerAutomate’
- ‘powerAutomateCreateFlow’
- ‘powerAutomateSeeFlows’
- ‘powerAutomateConfigureFlows’
- ‘aiBuilderCreate’
- ‘aiBuilderGoto’
- ‘aiBuilder’
- ‘alertMe’
- ‘newLink’
- ‘integrate’
- ‘manageAlert’
- ‘powerApps’
- ‘powerAppsCreateApp’
- ‘powerAppsSeeAllApps’
- ‘powerAppsCustomizeForms’
- ‘viewDocumentUnderstandingModels’
- ‘versionHistory’
- ‘openInImmersiveReader’
- ‘classifyAndExtract’
- ‘checkOut’
- ‘checkIn’
- ‘undoCheckOut’
- ‘properties’
- ‘pinItem’
- ‘exportExcel’
- ‘exportCSV’
- ‘export’
- ‘editInGridView’
- ‘exitGridView’
- ‘sync’
- ‘uploadTemplate’
- ‘addTemplate’
- ‘openInOfficeOnline’
- ‘openInOfficeClient’
- ‘addShortcut’
- ‘pinToQuickAccess’
- ‘unpinFromQuickAccess’
Notes:
- Keys are case sensitive, so exactly type the same key as is mentioned over here.
- We can use these keys to hide the SharePoint command bar props, just use the above demo as a reference and implement it as per your requirement.
Summary: What we have learned here (SharePoint list hide command bar)?
Thus, in this article, we have learned the below with respect to hiding the SharePoint command bar props (SharePoint list hide command bar):
- How to work with SharePoint command bar props
- How to hide the Integrate option in SharePoint online list using JSON
- How to hide the Automate option in SharePoint online list using JSON
- How to hide the Export dropdown menu option in SharePoint online list using JSON
- How to hide the copy link option in SharePoint online list using JSON
- How to hide the share link option in SharePoint online list using JSON
- How to hide the delete button SharePoint online list using JSON
- How to hide the edit button SharePoint online list using JSON
- How to hide the “Edit in grid view” button in the SharePoint Online list using JSON
- How to hide the upload document button in the SharePoint Online document library using JSON
- How to hide the new item button
- How to work with the SharePoint list hide command bar
See Also: SharePoint online JSON list formatting
You may also like the below SharePoint online JSON list formatting articles:
- SharePoint Online conditional row formatting based on a LOOKUP column value using JSON
- Customize the list form using JSON in SharePoint Online step by step
- Security breach in SharePoint online conditionally show or hide columns
- Conditionally show or hide columns in a SharePoint list
- Use column formatting to customize SharePoint
About Post Author
