SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VI)!

Siguiendo con la serie de posts sobre como añadir acciones personalizadas en la interfaz de usuario de SharePoint 2010, en esta nueva entrega vamos a bajar un poco más al detalle de como se agregan acciones personalizadas en la Ribbon de SharePoint 2010. Os recuerdo los posts previos de la serie:

En este nuevo post de la serie me voy a detener en ver como podemos crear acciones personalizadas para ciertos tipos de lista de SharePoint: bibliotecas de documentos, listas de tipo anuncio, lista de tipo tareas, listas personalizadas, etc. En concreto, vamos a ver como crear una acción personalizada para una lista personalizada. Comencemos:

  • Como siempre, y siguiendo posts previos de la serie, creamos en Visual Studio 2010 un proyecto de tipo vacío de SharePoint 2010.
  • Elegimos como tipo de despliegue “Farm solution”. Por supuesto, las acciones personalizadas también se pueden desplegar en modo Sandbox lo que nos permite extender la Ribbon tanto para la versión OnPremise como Online de SharePoint 2010.
  • Añadimos al proyecto un elemento de tipo “Empty element”.
  • Para crear una acción personalizada para una lista personalizada, configuramos el archivo elements.xml de la siguiente forma:
   1: <?xml version="1.0" encoding="utf-8"?>

   2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

   3:     <CustomAction

   4:      Id="HelpButton"

   5:      RegistrationId="100"

   6:      RegistrationType="List"

   7:      Location="CommandUI.Ribbon"

   8:      Sequence="10"

   9:      Title="Botón de Ayuda">

  10:         <CommandUIExtension>

  11:             <CommandUIDefinitions>

  12:                 <CommandUIDefinition

  13:                  Location="Ribbon.ListItem.Manage.Controls._children">

  14:                     <Button

  15:                      Id="Ribbon.Documents.Manage.Controls.HelpButton"

  16:                      Alt="Ayuda"

  17:                      Sequence="501"

  18:                      Command="HelpCommand"

  19:                      Image32by32="/_layouts/images/SPCustomActionDemo/Logo_Ayuda.gif"

  20:                      LabelText="Ayuda"

  21:                      TemplateAlias="o1"/>

  22:                 </CommandUIDefinition>

  23:             </CommandUIDefinitions>

  24:             <CommandUIHandlers>

  25:                 <CommandUIHandler

  26:                  Command="HelpCommand"

  27:                  CommandAction="javascript:alert('¡Acceso a la ayuda!');"/>

  28:             </CommandUIHandlers>

  29:         </CommandUIExtension>

  30:     </CustomAction>

  31: </Elements>

  • Como veis, en el XML que define la acción personalizada no estamos haciendo nada que no haya hecho en posts previos. Sin embargo, en este post voy a detenerme a explicar que es lo que estamos haciendo ya que tiene bastante miga.
  • A la hora de definir una acción para una lista o una biblioteca de documentos de SharePoint, lo primero que hay que identificar es el tipo de lista al que se va a aplicar la acción (más bien la plantilla de lista). Para ello, se utiliza la propiedad RegistrationID de la etiqueta <CustomAction>. Esta propiedad tomará valores 100 para una lista personalizada, 101 para una biblioteca de documentos, etc. Podéis encontrar los valores que identifican los distintos tipos de  plantilla de lista en este post de Mike Smith.
  • A continuación, la siguiente propiedad importante es el RegistrationType que identifica a quién se va a aplicar la acción personalizada:
    • A una lista, en cuyo caso pondremos el valor List.
    • A un tipo de contenido, en cuyo caso pondremos el valor Content Type.
    • A un tipo de archivo en cuyo caso pondremos el valor File Type.
  • En mi caso, los valores de estos dos parámetros son 100 y List, por lo que la acción personalizada se va a aplicar a todas las listas que se hayan creado en base a la plantilla “Custom list” de SharePoint. Seguro que alguno llegado este punto se preguntará: ¿Y si sólo quiero aplicar la acción a una lista en concreto?
  • A continuación, especificamos la localización de la nueva acción mediante la propiedad Location. Para la Ribbon, normalmente es Location=CommandUI.Ribbon.
  • Lo siguiente que tenemos que hacer es definir la acción personalizada en sí a través del elemento <CommandUIDefinition>. Las propiedades clave de este elemento son:
    • El grupo de la Ribbon dónde se va añadir la acción personalizada. Este grupo se especifica a través de la propiedad Location. Por ejemplo, para añadirla en la sección “New” de la pestaña “Elements” tenemos que especificar Location="Ribbon.ListItem.New.Controls._children". Podéis encontrar más información sobre los grupos de la Ribbon en este enlace. De todos modos, las definiciones de las acciones de la cinta se encuentran en C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATEGLOBALXMLCMDUI.XML. En mi caso, he añadido la acción personalizada en el grupo “Manage” de la cinta de gestión de la lista.
    • La propiedad “Command” apunta al comando definido en el elemento que define la acción que realizará la acción personalizada. Este comando se especifica en el elemento <CommandUIHandler>.
    • Además de estas propiedades, fijaros que hay otras que nos permiten:
      • Especificar la imagen en tamaño grande para la acción personalizada a través de la propiedad Image32by32.
      • Especificar la posición del comando dentro del grupo mediante la propiedad “Sequence”. Hay que tener cuidado de no utilizar un número de secuencia que ya esté ocupado por acciones existentes.
  • Finalmente, a través del elemento <CommandUIHandler> definimos el comando que se va a ejecutar cuando se pulsa sobre la acción personalizada de la cinta. En este caso, simplemente mostramos un alert de JavaScript.
  • Si queréis conocer los detalles de las propiedades de los distintos elementos que forman parte de la definición de una acción personalizada de la Ribbon, os recomiendo leeros este enlace.
  • Finalmente, y una vez que tenemos configurada nuestra acción personalizada, basta con desplegarla en nuestro sitio y comprobar que la nueva acción aparece en la Ribbon de una lista personalizada y funciona sin problemas.

image

Para acabar el post, os dejo una serie de posts interesantes sobre la creación de acciones personalizadas para la Ribbon de SharePoint 2010:

Y hasta aquí llega esta nueva entrega sobre como añadir acciones personalizadas a la interfaz de usuario de SharePoint 2010.

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

5 comentarios sobre “SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VI)!”

  1. Hola Juan Carlos,

    ¿has probado a ver si el button de la ribbon se crea también en un List Web Part en una página que no sea la de la lista? No se si me he explicado. :)

    Por ejemplo, en la página principal del sitio, pones un Web Part de la lista que tiene el CustomAction y seleccionas un elemento para que se active las pestañas de herramienta de lista.

    Como hemos hablado, no he conseguido hacer que aparezca en esos casos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *