Search This Blog

Monday, March 28, 2011

Enable Button on Ribbon only when user selects any Item in Sharepoint 2010

http://www.directsharepoint.com/2011/03/enable-button-on-ribbon-only-when-user.html

If you want to have your ribbon button enabled only when user selects some item in the default view of your List/Library, you can do this by getting the client object modal objects of SharePoint.

SP.ListOperation.Selection.getSelectedItems() will give you the IDs of the selected items. Another important object is EnabledScript which actually enables/disables the button on returning true/false values.
In order to achieve this, create a button on ribbon and then attach an CommandUIHandler to the button which will call the javascript method where you can write your own logic for processing your selected item IDs.

I have created a Feature and written the below XML on the Elements.xml file.



<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="Ribbon.Library.Actions.AddButtonInRibbon"
    Location="CommandUI.Ribbon"
    RegistrationType="ContentType"
    RegistrationId="Your Content Type ID"
    Title="Custom.CustomUIActions.RibbonManifest">
    <CommandUIExtension>
      <!--Declare a  CommandUIDefinition and specify the location in ribbon where you want to place tour button-->
      <!--For More information on locations refer to file - \Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML-->
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location="Ribbon.Documents.Share.Controls._children">
          <Button Id="Ribbon.Documents.Share.NewRibbonButton"
            Command="CustomUIActions.PageComponent.Command.DoAction"
             Image16by16="/_layouts/images/docidlookup.png"
            Image32by32="/_layouts/images/rtrsendtoicon.png"
            LabelText="Click Here To Get Selected IDs"
            TemplateAlias="o1" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
     
      <!-- Define a handler-->
      <!-- "Enabled Script" will return true if Item is selected by user in List view, else will return false which
      will disable the Button-->
      <!-- fsObjType = "0" for Item, "1" for Folder-->
      <CommandUIHandlers>
        <CommandUIHandler
          Command="CustomUIActions.PageComponent.Command.DoAction"
          CommandAction="javascript:PerformCustomAction()"
          EnabledScript="javascript:function ItemSelected()
          {
            var items = SP.ListOperation.Selection.getSelectedItems();
            if(items.length>0)
            {
            if(items[0].fsObjType == '0')
              {
                return true;
              }
            }
          }
          ItemSelected();
          " />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>

  <!-- Create another custom action that will do processing for your selected items-->
  <!-- Register this script block in script link-->
  <!-- This will be an asynchronous operation, that’s why we are creating two delegates for  this - onSuccessMethod , onFailureMethod -->  <CustomAction Id="CustomUIActions.PageComponent.Command.DoAction"
    Location="ScriptLink"
    ScriptBlock="          
      function PerformCustomAction() {
        context = new SP.ClientContext.get_current(); 
        site = context.get_site();
        context.load(site, 'Url', 'ServerRelativeUrl');  
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod)); 
      }

      function onSuccessMethod(sender, args) { 
        var items = SP.ListOperation.Selection.getSelectedItems();
        var myItems = '';
        var k;
          for (k in items)
          {
            myItems += items[k].id + ';';
          }
        alert('Items selected by you:' + myItems);
      } 

      function onFailureMethod(sender, args) { 
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace()); 
      } 
    " />
 
</Elements>

3 comments:

  1. Thank you for sharing the code! Great post!

    ReplyDelete