Agregar una acción personalizada a un formulario para mostrar para elementos de lista de SharePoint 2010

Artículo
06/24/2015

Resumen: este artículo trata de cómo agregar un botón de la cinta de opciones al formulario de presentación y vincularlo a una acción personalizada en Microsoft SharePoint 2010.

Última modificación: lunes, 10 de octubre de 2011

Se aplica a: Microsoft SharePoint 2010

Proporcionado por: Medha Jagtap, Microsoft Corporation

Contenido

Información general sobre la creación de acciones personalizadas
Elementos de acción personalizada
Creación de acciones personalizadas mediante una característica
Creación de acciones personalizadas con SharePoint Designer
Conclusión
Recursos adicionales

Información general sobre la creación de acciones personalizadas

Al personalizar SharePoint 2010 es habitual que se desee ampliar la interfaz de usuario. Afortunadamente, esta acción es fácil de realizar con el menú de la cinta de opciones. Puede agregar nuevas funcionalidades a la cinta de opciones de SharePoint 2010 como acciones personalizadas. Las acciones personalizadas le permiten ampliar o extender el comportamiento de los componentes principales de SharePoint 2010 como utilizar una acción personalizada para enviar por correo electrónico los elementos de la lista.

Este tema describe dos métodos para agregar una acción personalizada a un formulario de presentación de los elementos de lista de SharePoint 2010. La acción personalizada se agrega a la cinta de opciones como un botón.

Hay dos opciones para agregar acciones personalizadas a un formulario de presentación:

Agregar una acción personalizada a través de las funciones de SharePoint 2010. Las funciones de SharePoint le permiten implementar personalizaciones con facilidad. Este es el método preferido cuando es necesario empaquetar las personalizaciones e implementarlas en distintos servidores.
Agregar una acción personalizada mediante Microsoft SharePoint Designer 2010. SharePoint Designer ayuda a crear rápidas personalizaciones sin código en el servidor local.

Elementos de acción personalizada

Las acciones personalizadas se implementan con los siguientes elementos.

El elemento CustomAction

El elemento CustomAction define la extensión de la interfaz de usuario y especifica los siguientes atributos:

Description: descripción de la acción personalizada.
Title: el título de la acción personalizada.
ID: el identificador único de la acción personalizada.
Location: especifica la ubicación de la acción personalizada. Por ejemplo, CommandUI.Ribbon.DisplayForm mostrará esta acción personalizada en el formulario de presentación de un elemento.
RegistrationId: especifica el identificador del tipo de contenido de la lista o del elemento con el que esta acción está asociado. Por ejemplo, un valor de 100 indica que va a conectar esta acción personalizada a un tipo de lista personalizada.
Sequence: especifica la prioridad de ordenación de las acciones. Un valor de 0 indica que el botón aparecerá en la primera posición de la cinta de opciones.
Rights: especifica un conjunto de derechos que el usuario debe tener para que el enlace esté visible. Por ejemplo, ViewListItems indica que la persona con permisos para View List Items puede tener acceso a esta acción personalizada. Si no se especifica, la acción siempre aparece en la lista de acciones.

La lista siguiente muestra el uso del elemento CustomAction.

<CustomAction 
Description="Search Title on Bing" 
Title="Bing It!" 
Id="{E538E8C7-65DA-454E-AD87-4A603B6CC569}" 
Location="CommandUI.Ribbon.DisplayForm" 
RegistrationId="100" 
RegistrationType="List" 
Sequence="0" 
Rights="ViewListItems" 
xmlns="https://schemas.microsoft.com/sharepoint/">

El elemento CommandUIExtension

El elemento CommandUIExtension contiene elementos que amplían la interfaz de usuario.

El elemento CommandUIDefinition

El elemento CommandUIDefinition contiene elementos que definen una interfaz de usuario como un botón y especifica el siguiente atributo:

Location: especifica la ubicación de este comando. En este tema, este atributo se establece en Ribbon.ListForm.Display.Manage.Controls._children que es un grupo existente del formulario de presentación.

El elemento Button

El elemento Button define un control de botón de comando y especifica los siguientes atributos:

Id: identificador único del control.
Command: el nombre del comando que se ejecutará cuando se haga clic en el control. Este Id debe coincidir con el atributo Command de los elementos CommandUIHandler.
Image32by32: imagen de 32 x 32 píxeles que se muestra en la cinta de opciones.
Image16by16: imagen de 16 x 16 píxeles que se muestra en la cinta de opciones.
Sequence: posición del control en el grupo actual. Un valor de 0 indica que este botón será el primer botón disponible en el grupo actual.
LabelText: el texto que se mostrará en el control. El botón en este tema contendrá la pantalla Bing It!.
Description: la descripción que se muestra cuando el ratón se desplaza sobre el control.
TemplateAlias: un valor que indica la imagen que se utilizará para el control. El valor o1 indica el uso de Image32by32 mientras que o2 indica el uso de Image16by16.

La lista siguiente muestra el uso del elemento Button.

<CommandUIDefinition Location="Ribbon.ListForm.Display.Manage.Controls._children"> 
<Button Id="{B511A716-54FF-4EAE-9CBE-EA02B51B626E}" 
Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" 
Image32by32="~site/_layouts/Images/BingSearch/bing32.png" 
Image16by16="~site/_layouts/Images/BingSearch/bing16.png" 
Sequence="0" 
LabelText="Bing It!" 
Description="Search Title on Bing" 
TemplateAlias="o1" /> 
</CommandUIDefinition>

El elemento CommandUIHandler

El elemento CommandUIHandler describe las medidas que deben tomarse cuando el usuario hace clic en el control y especifica los siguientes atributos:

Command: el nombre de un comando. El valor de este atributo coincide con el valor de un atributo de Command en un elemento que define un control; el botón en este ejemplo.
CommandAction: una instrucción de la secuencia de comandos se ejecuta cuando se invoca este controlador. El ejemplo de este tema publica el título del elemento actual en el motor de búsqueda Bing. La acción del comando puede ser una llamada a una función JavaScript que reside dentro de un archivo JavaScript externo al que se hace referencia en el código de función.

La siguiente lista muestra el uso del elemento CommandUIHandler.

<CommandUIHandler Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" CommandAction="javascript:window.open('https://www.bing.com/search?q='.concat(escape(document.title)))" />

Creación de acciones personalizadas mediante una característica

Los siguientes pasos crean una acción personalizada en Visual Studio 2010. Los procedimientos de esta sección presuponen un entorno de desarrollo, donde SharePoint 2010 está instalado y configurado, Microsoft Visual Studio 2010 está instalado y el usuario que ha iniciado sesión tiene derechos administrativos en el entorno de SharePoint para fines de implementación.

Para crear una acción personalizada mediante una característica

En Visual Studio 2010, haga clic en Nuevo proyecto, expanda el nodo SharePoint, haga clic en 2010 y, a continuación, haga clic en Proyecto vacío de SharePoint. Proporcione un nombre al proyecto BingSearchAction y haga clic en Aceptar.
En el Asistente para la personalización de SharePoint, seleccione el sitio local de SharePoint que se puede utilizar para la depuración y si la solución se puede implementar como una solución de espacio aislado o de granja, como se muestra en la figura 1. Haga clic en Finalizar.

Figura 1. Especificación del método de implementación
En el Explorador de soluciones, haga clic con el botón secundario en el nodo Características y después en Agregar característica como se muestra en la figura 2.

Figura 2. Agregar nueva característica
Especifique un nombre para la característica BingSearchButton y agregue una descripción como se muestra en la figura 3.

Figura 3. Nombre de la característica
En el Explorador de soluciones, haga clic con el botón secundario en el proyecto BingSearchAction, seleccione Agregar y, a continuación, seleccione Nuevo elemento como se muestra en la figura 4.

Figura 4. Agregar un nuevo elemento al proyecto
En el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla Elemento vacío, escriba BingSearchButtonElement como nombre y haga clic en Agregar como se muestra en la figura 5.

Figura 5. Agregar un elemento al proyecto

Abra el archivo Elements.xml en BingSearchButtonElement y después reemplace el contenido con el siguiente ejemplo de código.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
Description="Search Title on Bing"
Title="Bing It!"
Id="{E538E8C7-65DA-454E-AD87-4A603B6CC569}"
Location="CommandUI.Ribbon.DisplayForm"
RegistrationId="100"
RegistrationType="List"
Sequence="0"
Rights="ViewListItems"
xmlns="https://schemas.microsoft.com/sharepoint/">
<CommandUIExtension xmlns="https://schemas.microsoft.com/sharepoint/">
<!-- Define the (UI) button to be used for this custom action -->
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.ListForm.Display.Manage.Controls._children">
<Button Id="{B511A716-54FF-4EAE-9CBE-EA02B51B626E}"
Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}"
Image32by32="~site/_layouts/Images/BingSearch/bing32.png"
Image16by16="~site/_layouts/Images/BingSearch/bing16.png"
Sequence="0"
LabelText="Bing It!"
Description="Search Title on Bing"
TemplateAlias="o1"
/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<!-- Define the action expected on the button click -->
<CommandUIHandler Command="{4E2F5DC0-FE2C-4466-BB2D-3ED0D1917763}" CommandAction="javascript:window.open('https://www.bing.com/search?q='.concat(escape(document.title)))" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

Guarde el archivo.
Agregue el elemento BingSearchButtonElement a la característica BingSearchButton como se muestra en la figura 6.

Figura 6. Agregar el elemento a la característica
Haga clic con el botón secundario en el nombre de la solución y, a continuación, en Implementar como se muestra en la figura 7. Visual Studio 2010 construirá e implementará la solución en la granja.

Figura 7. Construcción e implementación de la solución
Navegue al sitio local, agregue una lista personalizada y, a continuación, agregue un elemento a la prueba. Haga clic en un título y observe la primera acción de la cinta de opciones como se muestra en la figura 8.

Figura 8. El botón Bing It!
Haga clic en el botón y observe la redirección al sitio de búsqueda de Bing como se muestra en la figura 9.

Figura 9. El sitio de búsqueda de Bing

Creación de acciones personalizadas con SharePoint Designer

Los siguientes pasos muestran cómo agregar una acción personalizada con el SharePoint Designer. Asegúrese de que SharePoint Designer está instalado y que el usuario que ha iniciado sesión actualmente tiene derechos administrativos en el entorno de SharePoint 2010.

Para crear una acción personalizada con SharePoint Designer

Inicie Microsoft SharePoint Designer 2010.
En el menú Archivo, señale Sitios y, a continuación, haga clic en Abrir sitio.
Escriba la URL del sitio local como http://intranet.contoso.com y después haga clic en Abrir sitio como se muestra en la figura 10.

Figura 10. Abrir el sitio local
En el panel Navegación, haga clic en el vínculo Lista y bibliotecas y, a continuación, haga clic en el nombre de lista al que se agregará la acción personalizada como se muestra en la figura 11.

Figura 11. Hacer clic en el nombre de lista al que se agregará la acción
Haga clic en el menú Acción personalizada en la sección de configuración de la lista de la cinta de opciones y, a continuación, haga clic en Mostrar cinta del formulario como se muestra en la figura 12.

Figura 12. Selección de la opción Mostrar cinta del formulario
En la pantalla Crear acción personalizada, escriba un nombre y una descripción para la acción personalizada.
Escriba una URL en el cuadro Navegar a la dirección URL como javascript:window.open('https://www.bing.com/search?q='.concat(document.title)) como se muestra en la figura 13.

Figura 13. Escribir una dirección URL para abrir el sitio de búsqueda
Desplácese hacia abajo y escriba las direcciones URL de las imágenes de botón para los tamaños 16 x 16 y 32 x 32 que se mostrarán para la vista normal y comprimida de la cinta de opciones. Haga clic en Aceptar.
Abra el sitio en el explorador, vaya a la lista y, a continuación, haga clic en cualquier título del elemento. El formulario de presentación se abrirá. Asegúrese de que el nuevo botón de acción está en la primera ficha de la cinta de opciones tal y como se muestra en la figura 8.
Al hacer clic en el botón le redireccionará al sitio de búsqueda de Bing como se muestra en la figura 9.

Conclusión

Como se ha visto en los pasos anteriores, agregar una acción personalizada a un control en un formulario de presentación utilizando las dos técnicas es bastante fácil. Ahora puede tener una idea mejor de qué método funcionará en sus propias aplicaciones.

Recursos adicionales

Para obtener más información acerca de los temas tratados en este artículo, consulte el material proporcionado en las siguientes ubicaciones.