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.

    5시간 36분 전
    중재자

모든 응답

  • 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

    5시간 49분 전
  • 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.

    5시간 36분 전
    중재자