One of the features which is extensively used with SharePoint 2010 is Ribbons controls. In this post we would be creating a custom ribbon and open up a application page when ribbon is clicked using client object model using javascript

//// Creating Ribbon XML

   Id="CustomRibbonButton" /// Represent Unique Id of custom action
   Location="CommandUI.Ribbon.ListView" // Represent Location where Ribbon will be visible( I have kept it at List View, for other options you can try out ""
   RegistrationId="0x01003E510038825141608FE2D66FF6804EDD" // Guid of Element specified in Registration type, make sure it is all capital letters, i have seen issues with lowercase letters"
   Rights="EditListItems" // Represent security rights i.e. users who has edit list items will only see this ribbon
   RegistrationType="ContentType"> // Type for which ribbon is attached for e.g. list,content type
    <CommandUIExtension> // Tag for user Interface
      <CommandUIDefinitions> // Represent commands for user interface
         Location="Ribbon.ListItem.Actions.Controls._children"> // Location of RIbbon Tab{ For this example it is under actions tab of list item}
           Command="ShowAlert" // The command to execute When Button is clicked
           LabelText="Sample Ribbon"// The label to be shown under ribbon
           Image32by32="/_layouts/images/menupersonalize.gif"//The image to shown as ribbon icon
           TemplateAlias="o2" //The TemplateAlias attribute is used to size and position controls within a group when a template is applied to the group. This is used when we have created Group tab and sections for showing ribbons
           Sequence="501" /> // Represent order of placement among other ribbons
      <CommandUIHandlers> // Represent Commands
          Command="ShowAlert" // Name should match Command attribute of Button
          CommandAction ="javascript:CustomCommandAction('{SiteUrl}', 'mybutton');" // Javascript function to execute when command(click event of button in this case as defined in button control)
          EnabledScript="javascript:EnableOnSingleItemSelection();" > // Javascript function to execute to enable/disable the ribbon

// Custom Action to Specify the JS File
    ScriptSrc ="/_layouts/SampleFolder/js/CustomRibbon.js"/>


Javascript functions in CustomRibbon.js

var listItem;
var buttonpressed;
var siteURL;

function EnableOnSingleItemSelection() {
    var items = SP.ListOperation.Selection.getSelectedItems();
    var itemsCount = CountDictionary(items);
    return (itemsCount == 1)

function CustomCommandAction(siteurl, buttonpressed) {
this.buttonpressed = buttonpressed;  
this.currentSiteUrl = siteurl;
var ctx = SP.ClientContext.get_current();// get client context
    var web = context.get_web();
    var selectedItems = SP.ListOperation.Selection.getSelectedItems(); // Get selected List items
     var listItm = selectedItems[0]; // this will only return ID of list item, to get list object server call has to be mad
      this.listItem = sdlist.getItemById(;
        this.spContext.load(this.listItem);// Load listitem in spcontext to fetch all properties of listitem
        this.spContext.load(this.spContext.get_site());// To fetch site properties
        this.spContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

/// spContext.executeQueryAsync make asyncronous call to server and return the requested objects, two delegates are attached to handle success(onQuerySucceeded) and faliure(onQueryFailed) operations

function onQuerySucceeded(sender, args) {

    var title = this.listItem.get_item('Title');    // get the selected item title
    var options = SP.UI.$create_DialogOptions();
    var siteguid = spContext.get_site().get_id(); // get current site guid
    var itemid = this.listItem.get_item('ID'); // get the selected item id
    var appUrl;  
    appUrl = this.currentSiteUrl + "/_layouts/SampleFolder/SamplePage.aspx?title=" + title + "&siteguid=" + siteguid;// To redirect to SamplePage.aspx with query string parameter as selected item title and current siteguid

    options.url = appUrl;
    options.height = 600;
    options.width = 800;  
    options.dialogReturnValueCallback=Function.createDelegate(null, DialogClosedCallback);
    SP.UI.ModalDialog.showModalDialog(options); // To Open Page in Model Dialogue
function DialogClosedCallback() {SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);} // To refresh the parent  page after model dialogue closes

function onQueryFailed(sender, args) {
    alert('failed ' + args.toString());