Ribbon customization : Adding functionality to Ribbon Button

SharePoint 2010 Ribbon customization : Add functionality to the button

pre-requisite
Ribbon Basics

Writing the script 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 script in an external js file
The same javascript function can be written in an external *.js file. To achieve this, right-click on the project and Add the layouts mapped folder. In the subfolder under the layouts folder, add a js file.

Next, modify the elements.xml as below

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.

Using Client Object Model to dispplay SharePoint Status bar
Lets modify the HelloWorld function to show the message in the status bar of SharePoint. Below 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 false;'>Close</a>.", true);

    SP.UI.Status.setStatusPriColor(this.statusID, "green");

}

function closeStatus() {

    SP.UI.Status.removeStatus(this.statusID);

}

Using Client Object Model to display 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 displayed.

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(false);

    this.statusID = SP.UI.Status.addStatus("Selection Information", "Item Count : "

+ itemCount.toString() + " List ID : " + listID.toString(), true);

    SP.UI.Status.setStatusPriColor(this.statusID, "blue");

}

Note: Make sure that you change the CommandAction attribute in the elements.xml with the new function
Why is the above code important ?
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