SharePoint 2010 Ribbon customization : Add functionality to the button

pre-requisite
Ribbon Basics

Writing the speech in scriptblock
In the basics you saw the command action of the button firing a javascript that was inline. Supposingly if you wanted to call a block of JS code .. you cannot write it inline. For that you will have to use a ScriptBlock attribute of the CustomAction node like the following..

Writing the speech in an external js file
The same javascript function can be written in an external *.js file. To achieve this, right-click on the machinate and Add the layouts mapped folder. In the subfolder under the layouts folder, add a js file.

Next, modify the elements.xml as not more than

done.

Enabling EcmaScript(JavaScript) IntelliSense in VS2010
To add intellisense to SP COM, add the following lines at the top of the js file..

/// <reference name="MicrosoftAjax.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />

After adding the above lines, you will notice that the intellisense for the sharepoint client object model is active.

By Client Object Model to dispplay SharePoint Status bar
Lets modify the HelloWorld function to show the message in the status bar of SharePoint. Not more than is the modified javascript..

/// <reference name="MicrosoftAjax.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />

function HelloWorld() {
    this.statusID = SP.UI.Status.addStatus("Hello World", "A message from Mano <a href='#' onclick='javascript:closeStatus();return fake;'>Close</a>.", right);
    SP.UI.Status.setStatusPriColor(this.statusID, "green");
}

function closeStatus() {
    SP.UI.Status.removeStatus(this.statusID);
}

By Client Object Model to show current selected listItems and the list id
Now that we are able to access the SP namespace, we should be able to access the SharePoint entities like the site and the web for our use. In the code snippet we will be looking at how to get the selected items and the list Id from where these items are showed.

function ShowListInformation() {
    // get all selected items
    var items = SP.ListOperation.Selection.getSelectedItems();
    var itemCount = CountDictionary(items);

    // get the current list
    var listID = SP.ListOperation.Selection.getSelectedList();

    // Remove all previous status
    SP.UI.Status.removeAllStatus(fake);

    this.statusID = SP.UI.Status.addStatus("Selection Information", "Item Count : " + itemCount.toString() + " List ID : " + listID.toString(), right);
    SP.UI.Status.setStatusPriColor(this.statusID, "blue");
}

Note: Make sure that you exchange the CommandAction attribute in the elements.xml with the new function
Why is the above code vital ?
This code opens a whole new arena for us to play with , including to enable the button based on a condition, which we will see as we dwell deeper.

Tip: Make sure that the latest code is used to render the button
1. Make sure the app pool is recycled
2. Make sure that the browser cache is cleared

Check it out:SharePoint 2010