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

Como sucedía con SharePoint 2007 (tanto WSS 3.0 como MOSS), SharePoint 2010 permite extender de forma sencilla la interfaz de usuario a partir de definir acciones personalizadas. Así, podremos extender la Ribbon de SharePoint 2010 o el menú de Acciones del Sitio. En este primer post sobre extensibilidad de la interfaz de usuario de SharePoint 2010 veremos como se puede extender de forma sencilla la Ribbon. Empecemos.

Creando la solución

Los pasos que vamos a seguir para crear la acción personalizada en la Ribbon de SharePoint 2010 son los siguientes:

  • Creamos un proyecto de SharePoint 2010 de tipo Empty SharePoint Project.
  • En el asistente de personalización de SharePoint especificamos la Url de la Colección de Sitios que vamos a utilizar para cuestiones de depuración y despliegue inicial de la solución. Elegimos como opción de despliegue Deploy as a farm solution y pulsamos Finish.
  • A través del menú contextual del proyecto, añadimos un nuevo elemento de tipo Empty Element.
image image image
  • Automáticamente se crea la correspondiente característica que junto con los elementos que la constituyen se van a desplegar en el servidor de SharePoint a través de la correspondiente solución de SharePoint (.WSP).Si os habéis fijado en el explorador de soluciones de Visual Studio 2010, veréis que a la estructura clásica de proyecto se han añadido dos nodos: Feature y Package.
  • El primero de los nodos contiene la característica o características que forman parte del proyecto (podemos tener tantas como queramos). Lo interesante de este nodo es que es Visual Studio quien de forma automática genera la característica por nosotros tan pronto como se añade un SPI (SharePoint Project Item). En este caso, se ha creado una característica relativa al elemento añadido al prouecto. Además, configurar una característica es realmente sencillo gracias al diseñador de características que nos permite realizar esa tarea de forma visual o bien utilizar el editor XML (para usuarios más avanzados). En este caso, la característica contiene el elemento creado, pero puede contener elementos como Web Parts, Flujos de trabajo, etc.
  • El segundo de los nodos relevantes es el de package que contiene el paquete que representa a nuestra solución. Este nodo es el que nos permite agrupar las características disponibles para generar una solución .WSP única. De nuevo, este trabajo se simplifica de manera notable con el nuevo diseñador de paquetes disponible en Visual Studio 2010. Sólo puede haber un paquete por solución y este paquete incluye las características que se consideren y otros elementos como carpetas mapeadas (como es el caso).
image image image
  • Volviendo al elemento de tipo vacío que añadimos al proyecto, fijaros como dentro del correspondiente SPI (SharePoint Project Item) aparece un archivo denominado Elements.xml. Precisamente es este archivo el que tenemos que configurar de forma adecuada para crear la acción personalizada para la Ribbon de SharePoint 2010:

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>
  <CustomAction
    Id=”80AFCE46-0DD4-4A11-9B1B-9B8FBCD38AAD”
    RegistrationType=”List”
    RegistrationId=”101″
    Location=”CommandUI.Ribbon”>
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location=”Ribbon.Documents.New.Controls._children”>
          <Button
            Id=”Ayuda”
            Sequence=”1981″
            Command=”ShowHelp”
            Image32by32=”/_layouts/images/SPCustomRibbonAction/Logo_Ayuda.gif”
            LabelText=”Ayuda”
            TemplateAlias=”o1″/>         
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
          Command=”ShowHelp”
          CommandAction=”javascript:window.open(‘http://pegaso/_layouts/help.aspx’)”>         
        </CommandUIHandler>
      </CommandUIHandlers>
    </CommandUIExtension>   
  </CustomAction>
</Elements>

  • El nuevo archivo Elements.xml añade una nueva opción en la Ribbon de las Bibliotecas de Documentos de los Sitios dónde se vaya a activar la característica. Este botón simplemente muestra la página de ayuda de SharePoint 2010. Es necesario añadir la imagen Logo_Ayuda.gif en la carpeta mapeada del proyecto para poder utilizarla en el atributo Image32by32 del elemento <CommandUIDefinition>. El elemento <CommandUIHandler> define la acción a realizar cuando se pulsa la nueva opción disponible en la Ribbon.
  • En el explorador de soluciones de Visual 2010 seleccionamos el nombre del proyecto, hacemos clic con el botón derecho del ratón y pulsamos la opción Add –> Add SharePoint “Images” Mapped Folder. Como seguramente sabréis, las herramientas para desarrollo en SharePoint 2010 de Visual Studio 2010 permite mapear de forma sencilla carpetas ubicadas en el directorio 14 de instalación de SharePoint 2010 lo que facilita mucho el desarrollo de soluciones ya que podemos abstraernos de conocer en detalle estas rutas.
  • Una vez añadida esta carpeta mapeada, comprobaréis que dentro de images se ha creado una carpeta con el nombre del proyecto. La razón de esto es muy sencilla: se trata de evitar posibles conflictos con archivos que se puedan llamar igual dentro del directorio images y también por cuestiones de organización.
  • Añadimos dentro de dicha carpeta la imagen que vayamos a utilizar para la opción personalizada de la Ribbon de SharePoint 2010.

image

Probando la acción personalizada

Una vez guardados los cambios, ya estaríamos listos para probar la solución sin más que desplegarla

  • Para desplegar nuestra solución no tenemos más que seleccionar el nombre del proyecto y pulsar sobre la opción Deploy,
  • Abrimos el Sitio en el que hemos desplegado la solución y nos vamos a una de las Bibliotecas de documentos disponibles. En la Ribbon de la Biblioteca comprobamos que aparece la nueva opción y que está plenamente operativa.
image image

Y hasta aquí llega este primer post sobre como extender la Ribbon de SharePoint 2010 y por ende la interfaz de usuario. Espero que el post os haya resultado interesante.

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.

9 comentarios en “SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (I)!”

Deja un comentario

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