Hide/ Remove Ribbon Tabs When Item Is Selected

This blog helps you to hide/remove Ribbon tabs when an item is selected.

Introduction

In this blog, we will explore SharePoint ToggleItemRowSelection2 Function, which reads the ID of the selected element.

By reloading the pageusing SP.UI.ModalDialog.RefreshPage, it triggers a POST. 

ToggleItemRowSelection2 

The function comes from SharePoint core.js.

The parameters are given below.

• ctxCur - The current SharePoint context of the page.
• tr - The DOM object of the selected TableRow.
• fselect - A bool value, which indicates whether the item is selected or deselected.
• fUpdateRibbon - Bool indicates whether the Command UI (Ribbon) should be updated or not.

Scenario

Ribbon shows certain tabs like 'Edit', 'View', 'Items', 'List' etc. The code is given below, where we have a requirement, where on the item selection; Item tab is hidden from SharePoint list view ribbon. We don’t want to hide the entire ribbon.

Before

Solution

Here the steps are given below.

Step 1

Navigate to your SharePoint 2013 site.

Step 2

From this page, select the Site Actions | Edit page.

Edit the page, go to the Insert tab in the Ribbon and click Web Part option. In the Web Parts picker area, go to Media and Content category, select the Script Editor Web Part and press the Add button.

Step 3

Once the Web part is inserted into the page, you will see an "EDIT SNIPPET" link; which needs to be clicked. You can insert HTML and/ or JavaScript, as  shown below.

Code

<script type="text/javascript">

$(document).ready(function () {

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(ShowItemsMenuWhenItemsSelected);


});

function ShowItemsMenuWhenItemsSelected() {

       var oldToggleItemRowSelection2 = ToggleItemRowSelection2;
    ToggleItemRowSelection2 = function (ctxCur, tr, fSelect, a, b) {
        oldToggleItemRowSelection2(ctxCur, tr, fSelect, a, b)

        if (ctxCur.CurrentSelectedItems > 0) {
         setInterval(function() {
    $('li[id*="Ribbon.ListItem-title"]').hide();
  }, 1000);

        }
        else {

            SelectRibbonTab("Ribbon.Read", true);
        }

    }

}

    </script>

 

List item selection to hide “Item” tab in ribbon on the list.