Cómo añadir un boton personalizado a la ribbon en Sharepoint 2010

En este post os voy a explicar de la manera mas fácil que se, cómo añadir un botón a una ribbon de sharepoint.

Dejadme que os haga una previa explicación de cómo lo hice yo. Primero de todo lo hice con un Proyecto Sharepoint 2010 de tipo Sandboxed Solution, este tipo de soluciones son un poco más complicadas ya que tienen muchas restricciones. Decir también que es aconsejable trabajar con el Visual Estudio 2010.

Aquí una referencia de las capacidades y limitaciones de una Sandbox Solution:  http://msdn.microsoft.com/en-us/library/ee231562.aspx

Primero de todo vamos a crear un Empty Sharepoint Project, y cuando hagamos click a Ok nos aparecerá esta pantalla, aquí es donde le tenemos que decir que deploye como una Sandboxed solution.

Una vez tengamos el proyecto creado, añadiremos un Empty Element que sera el elemento que contenga el código del botón. 

Ahora empezaremos a picar código ;).

Abrimos el elemento que hayamos creado, recomendable re-nombrarlo, y nos damos cuenta que es XML. Yo lo he re-nombrado CustomButton.xml.

En este primer paso solo os explicare a añadir el botón en un grupo de la ribbon existente. Para saber en que grupo hay dos truquillos:

1. Podemos mirar en el XML de nuestro sharepoint donde están ya definidos todos los botones de la ribbon: {SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.XML. A mi me fue realmente útil.
2. Tambien podemos ir al Sharepoint 2010 designer, y en una lista que hayamos creado por defecto le podemos añadir un botón (Action)  y mirar donde nos lo localiza.

Ahora si, una vez hemos abierto el CustomButton.xml, le insertamos este código que añadira un boton que se vera en la ribbon de cuando tenemos un elemento seleccionado de una lista.

 <
CustomAction Id="Ribbon.ListItem.Custom1"  
          Location="CommandUI.Ribbon.ListView"  //Este atributo hace referencia a la ribbon donde se añadira el botón, hay varias                      ribbons.
          RegistrationId="100"  //Le podemos asignar el botón para que se vea solo en un content type o en una lista.
          RegistrationType="List"  
          Rights="ApproveItems">  //Permisos que se le asignaran al botón.
   <CommandUIExtension>  
    <CommandUIDefinitions>  
     <CommandUIDefinition Location="Ribbon.ListItem.Workflow.Controls._children"> //Le indicamos en que grupo de la ribbon se vera.  
      <Button Id="Ribbon.ListItem.Workflow.Approve"  
          Command="ApproveItems"  //Referencia al CommandUIHandler.
          Image16by16="SiteAssets/Approve16.png"  
          Image32by32="SiteAssets/Approve32.png"  
          TemplateAlias="o2"  
          LabelText="Approve"  
          Alt="Approve"  
          ToolTipTitle="Approve Displayer"  
          ToolTipDescription="Approve items."  
          Sequence="10"  
          CommandType="General"/>  
     </CommandUIDefinition>  
    </CommandUIDefinitions>  
    <CommandUIHandlers>  
     <CommandUIHandler  
      Command="ApproveItems"  //Identificador que se usara en el Command del botón.
      EnabledScript="javascript: Enable();"  //Permite asignarle un script para decidir cuando activar el botón.
      CommandAction="javascript: ApproveSelectedItemsId();" />  //Permite asignarle una función o una url. 
    </CommandUIHandlers>  
   </CommandUIExtension>  
  </CustomAction>  

Para tener una mayor referencia de todos los atributos de todos los elementos que interfieren en la creación de un botón, os dejo este enlace: http://msdn.microsoft.com/en-us/library/ms460194.aspx

Es muy importante que tengáis muy claro en que ribbon queréis que os salga el botón y en que grupo de botones de la ribbon, por experiencia crea bastante confusión.

Para poder tener un script con todas las funciones que llamemos desde el CommanUIHandler, simplemente tendremos que añadir otro CustomAction:

 <CustomAction  
   Id="ApproveItems.Script"  //Id acompañado de .Script para tipo script.
   Location="ScriptLink"  //ScriptLink para tipo script, solo he usado este metodo.
   ScriptSrc="~Site/SiteAssets/CustomButtonsScript.js" Sequence="100"></CustomAction>  

Si os fijáis en las url tanto del script como de las imágenes, apuntan a SiteAssets que es simplemente la carpeta que se muestra en nuestro site desde el Sharepoint 2010 designer. No me digáis porque pero para el script es necesario poner ~Site/ delante, sino no lo encuentra.

Y con este ya podríais ver el botón en la ribbon. Pero hay diferentes ribbons en nuestro sharepoint y no me quedaría tranquilo si no os enseñara cuales hay. Pero os lo voy a explicar en otro post para que no se os haga tan largo.

Aqui os dejo una imagen del Sharepoint 2010 designer en el momento que se crea una Action o botón en una lista. Para que os lo podáis tomar como ejemplo. En las settings del Action veréis la location de la ribbon.

Espero que os haya ayudado un poco, ya que de explicar es algo complicado.

Saludos.