none
How we can remove the "New item button form SharePoint - 2013 ribbon"

    질문

  • Hi All,

    How we can remove the "New item button form SharePoint - 2013 ribbon" and I have tried below JavaScript function but not working.

    *************** JavaScript ********************************

    $(document).ready(function () {     
         ExecuteOrDelayUntilScriptLoaded(init_NewHideButton, "sp.ribbon.js");    
     });

     function init_NewHideButton() {
         setInterval(function () {
             HideNewIconRibbomButton();
         }, 10);
     }

     function HideNewIconRibbomButton() {

         $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').hide(); //Edit BUtton
         var cc = new SP.ClientContext.get_current();
         var web = cc.get_web();
         var listId = SP.ListOperation.Selection.getSelectedList();
         var selectedItems = SP.ListOperation.Selection.getSelectedItems();
         if (selectedItems.length == 1) {
             var flag = CheckCreatedAuthor(listId, selectedItems[0].id, _spPageContextInfo.userId);
             if (flag) $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').show(); //Delete Edit Button
         }
         else {
             $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').hide();

         }
     }

    <script type="text/javascript">
    var elem = document.getElementById("Ribbon.ListItem.New-LargeLarge");
    elem.style.display = "none";
    </script>

    Thanks & Regards

    Deepak Chauhan 


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 14일 목요일 오전 6:59

답변

  • Hi,

    To solve this issue, we can add the CSS style into list view using SharePoint designer.

    Open list view using SharePoint designer and find the "PlaceHolderMain", then add the CSS style in this control below.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • 답변으로 표시됨 DeepakChauhan 2018년 6월 18일 월요일 오전 6:34
    2018년 6월 18일 월요일 오전 6:05
    중재자
  • Hi Dennis,

    we were trying to remove the delete button through css but via css list behavior is changing and after that we have tried to call the css file via JavaScript function but we are not sure why css is not calling.

    Finally I have decided to hide this "New Item" button through Jquery using below code and add the below JavaScript function in the JS Link property.

    $(window).load(function(){
    var Newitemlink = $(".ms-cui-tt-span")[1]
    $(Newitemlink).click(function(){
    setInterval(function(){  
    $("span[id='Ribbon.ListItem.New.NewListItem-Large']").css("display","none");
    },200);
        });
    });

    Now it's working fine Thank you Dennis for your responses.


    Thanks & Regards

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    • 답변으로 표시됨 DeepakChauhan 2018년 6월 21일 목요일 오전 9:58
    2018년 6월 21일 목요일 오전 9:58
  • Hi Dennis,

    I have tried with below JavaScript Code and now it's fine.

    Thank You Dennis !!!

    //SP.SOD.executeOrDelayUntilScriptLoaded function calluntill all SharePoint conrol not loaded on page.
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        HideNew_View_Edit_Buttons();
    },
    "sp.ribbon.js");


    //This function will hide New_View_Edit_Buttons buttons from filing list ribbon.
    function HideNew_View_Edit_Buttons() {
        setInterval(function () {       
            $("span[id='Ribbon.ListItem.New.NewListItem-Large']").css("display", "none");
            $('a[id*="Ribbon.ListItem.Manage.ViewProperties-Large"]').hide();
            $('a[id*="Ribbon.ListItem.Manage.EditProperties-Large"]').hide();
        });
    }


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    • 답변으로 표시됨 DeepakChauhan 2018년 7월 24일 화요일 오전 6:21
    2018년 7월 23일 월요일 오전 5:31

모든 응답

  • Hi Deepak,

    The problem are the dots in the ID, that when passed as is they'll be taken as classes and not part of the ID.

    In CSS to indicate these kind of IDs we need to include a backslah before the dot. For jQuery or Javascript you'll need to do something like this: Ribbon\\.ListItem\\.New\\.NewListItem-Large.

    One question: if the goal is to hide the New button why not using a CSS instruction to do it? Adding the the following line to the CSS of the page will suffice to hide it:

    span#Ribbon\.Documents\.New\.NewDocument-Large {
        display: none;
    }

    Hope it helps.

    Cheers,

    Vitor



    2018년 6월 14일 목요일 오전 8:37
  • Ok, I've read again your question and I understand now you're doing a conditional hiding of the button, therefore try the approach mentioned before the CSS block.

    Cheers.

    2018년 6월 14일 목요일 오전 8:43
  • Hi Vitor,

    Thank you for response.

    I have tried above css but still not working below function is working for view item and edit item so I have replace the ID[Ribbon.ListItem.New.NewListItem-Large] in case of new item but still is not working.

    $(document).ready(function () {     
         ExecuteOrDelayUntilScriptLoaded(init_NewHideButton, "sp.ribbon.js");    
     });

     function init_NewHideButton() {
         setInterval(function () {
             HideNewIconRibbomButton();
         }, 10);
     }

     function HideNewIconRibbomButton() {

         $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').hide(); //Edit BUtton
         var cc = new SP.ClientContext.get_current();
         var web = cc.get_web();
         var listId = SP.ListOperation.Selection.getSelectedList();
         var selectedItems = SP.ListOperation.Selection.getSelectedItems();
         if (selectedItems.length == 1) {
             var flag = CheckCreatedAuthor(listId, selectedItems[0].id, _spPageContextInfo.userId);
             if (flag) $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').show(); //Delete Edit Button
         }
         else {
             $('a[id*="Ribbon.ListItem.New.NewListItem-Large"]').hide();

         }
     }


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 14일 목요일 오전 9:14
  • Hi,

    try replacing the lines where you have the hide and show methods with this:

    $('#Ribbon\\.ListItem\\.New\\.NewListItem-Large').hide();

    $('#Ribbon\\.ListItem\\.New\\.NewListItem-Large').show();

    Example:  if (flag) $('#Ribbon\\.ListItem\\.New\\.NewListItem-Large').show();

    The CSS is practically the same:

    #Ribbon\.ListItem\.New\.NewListItem-Large { display:none; }

    #Ribbon\.ListItem\.New\.NewListItem-Large { display:inline-block; }

    Both solutions are working for me. Let me know if it worked.

    Cheers.


    2018년 6월 14일 목요일 오전 9:49
  • Hi,

    Below css working fine but top left ribbon style is changing only BROWSE tab showing but when I am selecting list items then ITEMS and LIST tab showing otherwise only BROWSE tab showing after applying below css

    ----CSS---

    #Ribbon\.ListItem\.New\.NewListItem-Large { display:none; }

    Can you please let me know about this issue.

    Thanks & Regards

    Deepak Chauhan 


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 14일 목요일 오전 10:54
  • Hi,

    It can happen, but it's related with the SharePoint behavior. Are you using the list page (AllItems.aspx) or are you using the list in another page? In this last case you normally need to select an item in the list to see the ITEMS and LIST tabs or else it will show only the BROWSE tab.

    Cheers

    2018년 6월 14일 목요일 오전 11:23
  • Hi Deepak,

    We can use the CSS below to hide the "New Item" in the ribbon from the list view page. Add the CSS style into script editor web part into the list view page.

    <style>
    span[id='Ribbon.ListItem.New.NewListItem-Large']{
    	display:none;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 6월 15일 금요일 오전 6:55
    중재자
  • Hi Dennis,

    Thank you for your response !!


    When we are adding the above css in CEWP so this css is hiding the ITEMS and LIST tab ideally this should be visible.These option(ITEMS and LIST) only showing on click of list items .

    Can you please share with me any other alternate to resolve this issue.


    Thanks

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 18일 월요일 오전 5:52
  • Hi,

    To solve this issue, we can add the CSS style into list view using SharePoint designer.

    Open list view using SharePoint designer and find the "PlaceHolderMain", then add the CSS style in this control below.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • 답변으로 표시됨 DeepakChauhan 2018년 6월 18일 월요일 오전 6:34
    2018년 6월 18일 월요일 오전 6:05
    중재자
  • Hi Dennis,

    we don't have permission to open the SharePoint designer so we can't add the above css on view aspx page so can you please help me to find out the another alternate.

    Looking for a solution.

    Thanks you !!

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 19일 화요일 오전 10:08
  • Hi,

    If you can't using SharePoint designer, we can also use JSLINK to achieve it.

    1. Save the style below as a CSS file "HideNewItem.css".

    span[id='Ribbon.ListItem.New.NewListItem-Large']{
    	display:none;
    }

    2. Upload the HideNewItem.css file into Site Assets library.

    3. Save the code below as a JS file "HideNewItem.js". My site url is "/sites/team/..", you need modify it in the code below.

    (function () {
    	(window.jQuery || document.write('<link href="/sites/team/SiteAssets/HideNewItem.css" rel="stylesheet"\/>'));
    })();
    

    4. Upload the HideNewItem.js file into Site Assets library.

    5. Edit the list view page, and edit list view web part. Then add the URL below in the JS Link property.

    ~site/SiteAssets/HideNewItem.js

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 6월 20일 수요일 오전 1:59
    중재자
  • Hi Dennis,

    Thank you for co-operation !!

    I have upload the "HideNewItem.js" JS file and "HideNewItem.css"CSS file in SiteAssets library and add the URL in the JS Link property in list view page but it's not working.

    Can you please look at this issue.

    Thanks & Regards

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 20일 수요일 오전 7:18
  • Hi,

    Did you modify the URL in the code below?

    (function () {
    	(window.jQuery || document.write('<link href="/sites/team/SiteAssets/HideNewItem.css" rel="stylesheet"\/>'));
    })();

    My site url is http://sp2013/sites/team, please modify it.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 6월 20일 수요일 오전 7:31
    중재자
  • Hi,

    Yes, I have modify the URL according to my  SharePoint site but it's not working.

    Thanks & Regards

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 6월 20일 수요일 오전 9:01
  • Hi,

    Click Ctrl+F5 to refresh the page to check if it works.

    And using IE F12 developer tools to debug the code to check if the js code loaded.

    Or provide your js code and site url for further research.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 6월 20일 수요일 오전 9:16
    중재자
  • Hi Dennis,

    we were trying to remove the delete button through css but via css list behavior is changing and after that we have tried to call the css file via JavaScript function but we are not sure why css is not calling.

    Finally I have decided to hide this "New Item" button through Jquery using below code and add the below JavaScript function in the JS Link property.

    $(window).load(function(){
    var Newitemlink = $(".ms-cui-tt-span")[1]
    $(Newitemlink).click(function(){
    setInterval(function(){  
    $("span[id='Ribbon.ListItem.New.NewListItem-Large']").css("display","none");
    },200);
        });
    });

    Now it's working fine Thank you Dennis for your responses.


    Thanks & Regards

    Deepak Chauhan


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    • 답변으로 표시됨 DeepakChauhan 2018년 6월 21일 목요일 오전 9:58
    2018년 6월 21일 목요일 오전 9:58
  • Hi Deepak,

    Glad to hear that you solve this issue, thanks for your sharing.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 6월 21일 목요일 오전 10:04
    중재자
  • Hi Dennis,

    Above function working fine when we click on "ITEMS" tab and it's falling when we click on list's items can you please let me know how we can hide the new button on click of list item selection.

    Looking for a solution.

    Thanks & Regards

    Deepak Chauhan 


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    2018년 7월 16일 월요일 오후 12:27
  • Hi,

    Please try to use the code below.

    $(window).load(function(){
    	setInterval(function(){  
    		$("span[id='Ribbon.ListItem.New.NewListItem-Large']").css("display","none");
    	},200);
    });

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    2018년 7월 17일 화요일 오전 7:25
    중재자
  • Hi Dennis,

    I have tried with below JavaScript Code and now it's fine.

    Thank You Dennis !!!

    //SP.SOD.executeOrDelayUntilScriptLoaded function calluntill all SharePoint conrol not loaded on page.
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        HideNew_View_Edit_Buttons();
    },
    "sp.ribbon.js");


    //This function will hide New_View_Edit_Buttons buttons from filing list ribbon.
    function HideNew_View_Edit_Buttons() {
        setInterval(function () {       
            $("span[id='Ribbon.ListItem.New.NewListItem-Large']").css("display", "none");
            $('a[id*="Ribbon.ListItem.Manage.ViewProperties-Large"]').hide();
            $('a[id*="Ribbon.ListItem.Manage.EditProperties-Large"]').hide();
        });
    }


    SharePoint 2010 & 2013 and Office-365 Branding and Front End Customization, UI Design

    • 답변으로 표시됨 DeepakChauhan 2018년 7월 24일 화요일 오전 6:21
    2018년 7월 23일 월요일 오전 5:31