Crear un botón de la cinta de opciones personalizado en la web de host de un complemento de SharePoint

Este es el noveno de una serie de artículos sobre los conceptos básicos del desarrollo de complementos de SharePoint hospedados en SharePoint. Primero debe estar familiarizado con los complementos de SharePoint y los artículos anteriores de esta serie, que puede encontrar en Introducción a la creación de complementos de SharePoint hospedados en SharePoint | Pasos siguientes.

Nota:

Si ha estado trabajando en esta serie sobre complementos hospedados por SharePoint, hay una solución de Visual Studio que puede usar para continuar con este tema. También puede descargar el repositorio que encontrará en SharePoint_SP-hosted_Add-Ins_Tutorials y abrir el archivo BeforeRibbon.sln.

Todos los complementos de SharePoint pueden ejecutarse desde la página Contenidos del sitio de la web e host seleccionando el icono del complemento. También se puede exponer la funcionalidad de un complemento de SharePoint en la web de host a través de acciones personalizadas, que son botones de barra de herramientas personalizados o elementos de menú personalizados. En este artículo, agregaremos un botón a la cinta de opciones en una web de host.

Preparar la web de host

Para agregar el botón a la cinta de opciones de un calendario en la web de host, realice los pasos siguientes en la interfaz de usuario del sitio para desarrolladores de SharePoint.

1. En la página principal del sitio, seleccione Contenido del sitio>Agregar un complemento>Calendario.

2. En el cuadro de diálogo Agregar un calendario, escriba como NombrePrograma de orientación para empleados y, después, seleccione Crear.

3. Cuando se abra el calendario, coloque el cursor sobre cualquier fecha hasta que se muestre el vínculo Agregar sobre la fecha y, después, seleccione Agregar.

4. En el cuadro de diálogo Programa de orientación para empleados: nuevo elemento, escriba como TítuloOrientar a Claudia Olivares. Deje los demás campos en sus valores predeterminados y seleccione Guardar.

   El calendario será similar al siguiente:

   Figura 1. Calendario personalizado

   

Importante

El procedimiento siguiente requiere que el calendario esté visible en la interfaz de usuario de Visual Studio, pero no lo estará si Visual Studio estaba abierto durante su creación. Antes de continuar, cierre Visual Studio y cierre sesión en todas las ventanas del explorador y consolas de PowerShell en las que tenga una sesión iniciada en el sitio de desarrolladores.

Agregar una acción personalizada de la cinta de opciones

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto Orientación para empleados y seleccione Agregar>Nuevo elemento>Office/SharePoint>Acción personalizada de cinta. Asígnele el nombre RunOrientationAdd-in y, después, seleccione Agregar.

2. El Asistente para crear acción personalizada para cinta le realizará una serie de preguntas. Proporcione las respuestas de la tabla siguiente y seleccione Finalizar.

   Pregunta de propiedad	Respuesta
   ¿Dónde desea exponer la acción personalizada?	Seleccione Web de host.
   ¿Qué ámbito tiene la acción personalizada?	Seleccione Instancia de lista (no seleccione “Plantilla de lista”).
   ¿Qué elemento específico tiene como ámbito la acción personalizada?	Seleccione Programación de orientación para empleados.
   ¿Dónde se encuentra el control?	No use las selecciones de la lista desplegable. En su lugar, escriba Ribbon.Calendar.Events.Actions.Controls._children. (El tercer elemento, Eventos, identifica la pestaña de la cinta de opciones y el cuarto elemento, Acciones, identifica el grupo de botones).
   ¿Cuál es el texto del elemento de menú?	Escriba Orientación para empleados.
   ¿A dónde navega la acción personalizada?	No use las selecciones de la lista desplegable. En su lugar, escriba ~appWebUrl/Lists/NewEmployeesInSeattle. Esta es la página de vista de lista de la lista, que se encuentra en la web del complemento, por lo que el botón de la cinta de opciones de la web de host abrirá una página en la web del complemento.

Inspeccionar la característica de la web del complemento

En el Explorador de soluciones, expanda la carpeta Características y seleccione la característica NewEmployeeOrientationComponents. Se abrirá el Diseñador de características.

Observe que la acción personalizada que ha creado, RunOrientationAdd-in, aparece en Elementos de la solución, pero no en Elementos de la característica. Esto ocurre porque la característica se implementa en el complemento web, pero la acción personalizada se implementa en la web de host.

Al empaquetar el complemento en Visual Studio para su implementación en producción, o al seleccionar F5 en Visual Studio, Office Developer Tools para Visual Studio crea una característica de web de host especial, agrega la acción personalizada y la implementa en la web de host. No se debe editar nunca la característica de web de host, por lo que no se crea hasta el momento de empaquetar.

Figura 2. Diseñador de características

Ejecutar y probar el complemento

1. Use la tecla F5 para implementar y ejecutar el complemento. Visual Studio realizará una instalación temporal del complemento en su sitio de SharePoint de prueba y ejecutará el complemento inmediatamente.

2. Se abrirá la página predeterminada del complemento de SharePoint. Vaya a la página principal del sitio de desarrolladores (que es la web de host). Hay un vínculo a su ruta en la esquina superior izquierda de la página.

3. En la página principal de la web de host, seleccione Contenidos del sitio y, en la página Contenidos del sitio, haga clic en el calendario Programación de orientación para empleados (en lugar del complemento Orientación para empleados).

4. Cuando se abra el calendario, seleccione el evento Orientar a Claudia Olivares. Si la pestaña Eventos de la cinta no se abre automáticamente, ábrala. Debería ser similar al siguiente:

   Figura 3. Ficha de cinta de opciones de eventos con botón personalizado

   

5. En el grupo Acciones de la cinta, seleccione Orientación para empleados. Se abre la página de la lista de Nuevos empleados de Seattle.

6. Para finalizar la sesión de depuración, cierre la ventana del explorador o detenga la depuración en Visual Studio. Cada vez que seleccione F5, Visual Studio retirará la versión anterior del complemento e instalará la más reciente.

7. Trabajará con este complemento y con la solución de Visual Studio en otros artículos. Es recomendable que vuelva a retirar el complemento cuando deje de trabajar con él por un tiempo. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Retirar.

Pasos siguientes

En el siguiente artículo de esta serie, agregaremos JavaScript al Complemento de SharePoint y obtendremos acceso a los datos de SharePoint con el modelo de objetos de JavaScript de SharePoint: Usar las API de JavaScript de SharePoint para trabajar con datos de SharePoint.