Display the Files Ribbon Tab When Checking a Document (SharePoint)

May 28, 2014

I was asked to display the Files ribbon tab when checking a document in SharePoint in a document library list view, meaning: when a user checks the checkbox next to a document, automatically pop out the file-related operations.
My first question was: “is doesn’t work this way already!?”

SharePoint Files Ribbon Tab

SharePoint Document Library Checkbox

Anyway, I got to work and a check list:

  1. Figure out how to popup ribbon groups
  2. Figure out how to get the list type
  3. Do what the client asked me to do – show the ribbon on click

Popup Ribbon Tabs

Some research let me to figuring out there are 2 methods available to accomplish the task, and there’s a proper way to get it to work. Read this: Select custom ribbon tab – jQuery.

if (typeof (_ribbonStartInit) == "function") {
    try {
        _ribbonStartInit("Ribbon.Document", false, null);
    } catch (e) { }
    SelectRibbonTab("Ribbon.Document", true);
}

Get List Type

To get the list type, you need to check the SP.List.baseType property. You can accomplish this by using the client context. If the list’s base type is 1, it’s a document library.

You can see my previous post for another example with list items: SharePoint Ribbon Button to Check-out, modify a value and Check-in.

Combine Everything

// show "File" ribbon tab when a document is selected

var currenRibbontList = null;
var currentListBaseType = null;

$(function () {
    // attach the click event to the file checkbox and the "select all" checkbox
    $(".ms-selectall-iconouter, .s4-itm-imgCbx").click(function () {
        showRibbon();
    });

});

function showRibbon() {
    // if already got the base type, use it
    if (currentListBaseType == 1) {
        console.log("showing ribbon");
if (typeof (_ribbonStartInit) == "function") {
    try {
        _ribbonStartInit("Ribbon.Document", false, null);
    } catch (e) { }
    SelectRibbonTab("Ribbon.Document", true);
}
    } else if (currentListBaseType == null) {
        // if no base type, load it using JSOM
        try {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                var clientContext = SP.ClientContext.get_current();
                var listId = SP.ListOperation.Selection.getSelectedList();
                currenRibbontList = clientContext.get_web().get_lists().getById(listId);
                // load list metadata to get the base type
                clientContext.load(currenRibbontList);
                clientContext.executeQueryAsync(Function.createDelegate(this, showRibbonOnSucceeded), Function.createDelegate(this, showRibbonShowRibbonOnFailed));
            });
        }
        catch (e) {
            if (console && console.log) {
                console.log(e.message);
            }
        }

    }
}

function showRibbonOnSucceeded() {
    // get the base type
    currentListBaseType = currenRibbontList && currenRibbontList.get_baseType();
    // show the ribbon on the window's thread (doesn't work without the timeout)
    setTimeout(showRibbon, 100);
}

function showRibbonShowRibbonOnFailed() {
    if (console && console.log) {
        console.log("Error loading list");
    }
}
Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*