Incluir un elemento de complemento en el complemento hospedado por el proveedor

Este es el sexto de una serie de artículos sobre los conceptos básicos de desarrollo de un Complementos de SharePoint hospedados por el proveedor. Primero debe familiarizarse con Complementos de SharePoint y con los anteriores artículos de esta serie, los cuales puede encontrar en Introducción a la creación de complementos de SharePoint hospedados por el proveedor.

Nota:

Si a lo largo de esta serie ha estado trabajando sobre los complementos hospedados por el proveedor, tiene una solución de Visual Studio que puede usar para continuar con este tema. También puede descargar el repositorio que encontrará en SharePoint_Provider-hosted_Add-Ins_Tutorials y abrir el archivo BeforeAdd-inPart.sln.

En este artículo, se agrega al Complemento de SharePoint un tipo de elemento web especial llamado elemento del complemento. El elemento de complemento muestra el formulario de pedido del complemento en una página de SharePoint.

Crear el elemento de complemento

Nota:

La configuración de inicio de proyectos en Visual Studio tiende a revertir a los valores predeterminados cada vez que la solución se vuelve a abrir. Siempre debe seguir estos pasos inmediatamente después de abrir de nuevo la solución de ejemplo de esta serie de artículos:

1. Haga clic con el botón derecho en el nodo de la solución en la parte superior del Explorador de soluciones y después seleccione Establecer proyectos de inicio.
2. Asegúrese de que los tres proyectos estén establecidos en Iniciar en la columna Acción.

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto ChainStore y después seleccione Agregar>Nuevo elemento.

2. Seleccione Elemento web cliente (web de host), asígnele el nombre Realizar pedido y después seleccione Agregar. (El "elemento de complemento" también se denomina "elemento web cliente").

3. En la página siguiente del asistente, seleccione la segunda opción: Seleccionar o especificar la dirección URL de una página web existente para el contenido del elemento web cliente.

4. En la lista desplegable, seleccione la dirección URL de la página OrderForm.aspx y, después, seleccione Finalizar.

   Un archivo elements.xml que define el elemento de complemento que se agrega al proyecto y se abre.

5. En el elemento ClientWebPart, cambie los siguientes atributos a estos valores:

   Atributo	Valor
   Título	Realizar pedido
   Descripción	Formulario para realizar un pedido
   DefaultHeight	320

   Deje el resto de los atributos con sus valores predeterminados y guarde el archivo.

Ejecutar el complemento y probar el elemento de complemento

1. Use la tecla F5 para implementar y ejecutar el complemento. Visual Studio hospeda la aplicación web remota en IIS Express y hospeda la base de datos SQL en SQL Express. También instala temporalmente el complemento en el sitio de SharePoint de prueba y ejecuta el complemento inmediatamente. Se le solicitará que conceda permisos al complemento antes de que se abra su página de inicio.

2. Cuando se abra la página de inicio del complemento, este se habrá implementado y el elemento de complemento Realizar pedido estará disponible para que los usuarios puedan agregarlo a cualquier área de elementos web de cualquier página de SharePoint en el sitio web de la tienda de Hong Kong. Siga estos pasos para agregarlo a la página principal:

   1. Seleccione Volver al sitio en el control de cromo de la parte superior de la página de inicio para abrir la página principal de la tienda de Hong Kong.

   2. En la cinta de opciones, abra la pestaña Página y seleccione Editar.

   3. Cuando la página esté en el modo de edición, abra la pestaña Insertar en la cinta de opciones y, después, seleccione Elemento de complemento (puede ser que el botón aún se llame Elemento de aplicación).

   4. En el control de inserción de elementos web que se abra, seleccione el elemento de complemento Realizar pedido. El control tendrá un aspecto similar al siguiente.

      Figura 1. Control de inserción de elementos web de SharePoint

      

   5. Seleccione algún lugar de una de las zonas de elementos web del formulario para establecer la ubicación donde se colocará el elemento de complemento.

   6. Seleccione Agregar en el control de inserción del elemento web. El elemento de complemento Realizar pedido se agrega a la zona de elemento web.

   7. En la cinta de opciones, seleccione Guardar.

3. El formulario de pedido aparece ahora en la página y tiene la apariencia del resto de la página. Ahora debería ser similar al siguiente.

   Figura 2. Colocar parte del complemento Pedido

   

4. Especifique valores para Proveedor, Producto y Cantidad, y después seleccione Realizar pedido. Parece que no sucede nada, pero se introduce un pedido en la base de datos corporativa. También puede vaciar los campos del elemento de complemento actualizando la página.

5. Use el botón Atrás del explorador hasta volver a la página de inicio del complemento Chain Store y, después, seleccione Mostrar pedidos. Se mostrará el nuevo pedido.

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 retira la versión anterior del complemento e instala 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

El complemento depende de dos listas que debe crear manualmente para que los usuarios no tengan que hacerlo. En el siguiente artículo, empezará con el proceso de creación automática de estas listas. El primer paso importante es crear controladores personalizados para el evento de instalación de un complemento: Handle add-in events in the provider-hosted add-in (Administrar eventos de complemento en el complemento hospedado por el proveedor).