This Blog

Syndication

Search

Tags

Community

Email Notifications

Archives

Enlaces Recomendados

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="BLOCKED SCRIPTalert('¡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 Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.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.

Published 21/11/2010 22:08 por Juan Carlos González Martín

Comparte este post:

Comentarios

# re: SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VI)!@ Monday, November 22, 2010 7:54 PM

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.

Alberto Diaz Martin

# SharePoint 2010: Resumen de posts (XIII)!@ Thursday, December 2, 2010 8:25 AM

Como siempre, después del recopilatorio de enlaces interesantes sobre SharePoint 2010, os dejo

Blog del CIIN

# SharePoint 2010: Apertura de ventanas modales y páginas desde acciones personalizadas (II)!@ Tuesday, October 18, 2011 9:27 PM

Siguiendo con la serie de posts sobre como abrir ventanas modales  y páginas desde acciones personalizadas

Blog del CIIN

# SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VIII)!@ Friday, December 30, 2011 8:46 AM

Siguiendo con la serie de artículos sobre como añadir acciones personalizadas a la interfaz e usuario

Blog del CIIN

# SharePoint Online: Como crear una Custom action para crear un documento en línea (II)!@ Friday, May 11, 2012 2:17 PM

Siguiendo con la serie de posts sobre como crear una Custom action para crear un documento en línea usando

Blog del CIIN