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.
-
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).
-
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="BLOCKED SCRIPTwindow.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.
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.
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.
Comparte este post: