Tipos de géneros de libros - Desplegar componente SPfx

Hola a todo@s, continuando con la serie de entradas en el blog La librería, en esta entrada se pretende enseñar como desplegar un componente SPfx en SharePoint online.

Para conseguir este propósito, es necesario realizar los siguientes procesos:

  • Generar el paquete del componente SPfx.

  • Importar el paquete en el catálogo de aplicaciones.

  • Instalar el paquete en la colección de sitios.

He de informar que los procesos que se van a comentar en esta entrada son muy parecidos a los que proporciona Microsoft en su página Deploy your client-side web part to a sharepoint page, pero aplicando algunos conceptos que me he encontrado durante el desarrollo de esta entrada.

Generar el paquete del componente SPfx

Antes de empezar a explicar cómo generar el paquete que se importará en el catálogo de aplicaciones del tenant y posteriormente utilizado en la colección de sitios de producción, he de recordar que hay que quitar del código fuente, las trazas que escriben en la consola del navegador, que se han utilizado durante el desarrollo del componente SPfx.

Para evitar el siguiente mensaje de error Error - Error: The webparts manifests list is empty. Please ensure you have done a build and that your config file is pointed at the correct folder., durante el proceso de generación del paquete del componente SPfx, se han incorporado unos pasos adicionales que facilitaran su proceso.

  1. Antes de empezar los procesos de generación del paquete, se va a limpiar las carpetas tmp, dist y sharepoint\solution a través del siguiente comando:

    gulp clean

    He de informar que antes de ejecutar este comando, a parte del error que he comentado con anterioridad, en los ficheros generados, me encontré un fichero que había eliminado hace tiempo y que después de usar este comando, ya no he tenido más problemas.

  2. Como se quiere incorporar todos los recursos en el paquete que contendrá el componente SPfx, se va a compilar la solución con el parámetro --ship.

    gulp build --ship

  3. Con el siguiente comando, se pretende agrupar todos los ficheros necesarios para el despliegue del componente SPfx.

    gulp bundle --ship

  4. Una vez realizado estos comandos, ya se puede generar el paquete que se importara en el catálogo de aplicaciones con el siguiente comando:

    gulp package-solution --ship

Dentro de la ruta \sharepoint\solution de la carpeta donde esta el proyecto del componente SPfx, se habrá generado un fichero con extensión sppkg. En este ejercicio el fichero generado tiene el nombre manager-types-of-book-genres.sppkg.

A la vez, existe otra carpeta debug en la misma ubicación donde se ha generado el mismo contenido que hay en el fichero sppkg, pero no está comprimido. De esta forma se puede ver más fácil lo que hay en el paquete que se quiere llevar al tenant.

Importar el paquete en el catálogo de aplicaciones

Una vez que se dispone del paquete sppkg del componente SPfx, se procede a incorporarlo en el catálogo de aplicaciones del tenant con los siguientes pasos:

  1. Acceder a la colección de sitios del catálogo de aplicaciones del tenant.

  2. Acceder a la página Aplicaciones para sharepoint.

  3. Arrastrar el paquete sppkg que se generó en el apartado anterior.

  4. En la ventana emergente, pulsar el botón Desplegar para iniciar el proceso de carga del paquete sppkg.

  5. Esperar a que termine todo el proceso, para disponer del componente SPfx en el catálogo de aplicaciones.

Secuencia de importación de un componente SPfx al catálogo de aplicaciones

He de informar que, si se quiere agregar la aplicación SPfx, a nivel de todas las colecciones de sitio, hay que realizar una serie de modificaciones en la configuración de la generación del paquete de la aplicación. Se dispone de más información en la siguiente página Tenant-scoped solution deployment for sharepoint Framework solutions que ofrece Microsoft.

Instalar el paquete en la colección de sitios

Con el paquete sppkg del componente SPfx, incorporado al catalogo de aplicaciones del tenant, ya se puede proceder a incorporar en las páginas del entorno de producción la aplicación desarrollada en SPfx.

  1. Ubicarse en el sitio web donde se va a utilizar la aplicación de la gestión de los tipos de géneros de libros.

    En los ejemplos que se aportan, se han creado dos subsitios, uno en español y el otro en inglés, de esta forma se podrá comprobar que el componente SPfx soporta múltiples idiomas.

  2. Acceder a la página Contenido del sitio, para agregar en el subsitio la aplicación de la gestión de tipos de géneros de libros, del catálogo de aplicaciones.

    He de informar que, si la aplicación se agrega en otro sitio web distinto al de la página, la aplicación no se visualizará en el momento de agregar la aplicación en la página. Esto no pasaría si se hubiera configurado la aplicación SPfx, a nivel de tenant.

  3. Acceder a la página que se va a encargar de la gestión de tipos de géneros de libro y seleccionar la aplicación SPfx que se ha desarrollado.

  4. Automáticamente se visualizará el interfaz de usuario diseñado, con los tipos de géneros de libros que se había precargado en una entrada anterior del blog.

Con estos sencillos pasos, ya se dispone el mecanismo para gestionar los tipos de géneros de libros desde una página, sin la necesidad de usar la lista de SharePoint.

Secuencia de importación de un componente SPfx en una página (sitio web en inglés)

Secuencia de importación de un componente SPfx en una página (sitio web en español)

Comprobar el funcionamiento del componente SPfx desarrollado

Una vez configurado las paginas con el componente SPfx desarrollado, se va a proceder a comprobar su funcionalidad desde ambas paginas y viendo como interactúa con la lista de tipos de géneros de libros.

He de recordar que, en el momento de definir la listas, se decidió ubicarla en la raíz de la colección de sitios, con el fin de poder acceder al repositorio de una forma centralizada e independiente.

Las pruebas que se han realizado para el correcto funcionamiento del control son las siguientes:

  • Crear, eliminar y modificar tipos de géneros de libros desde cada una de las paginas donde está el componente SPfx.

  • Comprobar cómo ha afectado las operativas desde las páginas con el componente SPfx en la lista de tipos de géneros de libros.

En las páginas donde se usa el componente SPfx, en comparativa con lo que ofrece SharePoint online en la página por defecto de la lista de tipos de géneros de libros, no se actualiza automáticamente su contenido. Se puede implementar algún mecanismo que se encargue de este proceso, pero teniendo en cuenta como puede afectar a la lógica de negocio implementada inicialmente.

Secuencia de las pruebas realizadas con el componente SPfx

Entradas populares de este blog

Cargar archivos desde PowerApps a bibliotecas de SharePoint

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como cargar en bibliotecas de SharePoint Online ficheros desde una aplicación de PowerApps a través de Power Automate . Hay que indicar en un principio, que el artículo que tenía pensado redactar, tenía como objetivo explicar cómo subir ficheros de más de 75Mb de tamaño , a las bibliotecas de documentos de SharePoint Online desde una aplicación de PowerApps , pero después de realizar muchas pruebas con diferentes técnicas, métodos y herramientas, he de reconocer que ha sido ¡Un fracaso absoluto! Bueno, hay que reconocer que tan poco ha sido en valde todos los intentos realizados para conseguir este objetivo, ya que me ha servido para entender más en profundidad, cómo trabajan las herramientas de SharePoint , PowerApps , Power Automate y OneDrive , con los ficheros que tienen un tamaño grande, como puedes ser los videos. ...
Leer más

Menús desplegables relacionados en SharePoint Online

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como resolver de forma sencilla, uno de los principales problemas que nos encontramos los desarrolladores de SharePoint desde sus orígenes en SharePoint On-Premise. Quien no se ha topado en su vida laboral, con el clásico problema de tener que trabajar en las listas con los menús desplegables, que tienen que estar relacionados entre ellos. Como pueden ser la lista de comunidades autónomas y sus provincias en los datos de los clientes. O por poner otro ejemplo, si se trata de una empresa su negocio está relacionado con la automoción, donde la lista de modelos de los vehículos está relacionada con las marcas de vehículos que maneja la empresa. Para resolver este tipo de problemas de datos relacionados en listas, se ...
Leer más

Generar contenido para páginas modernas con JSON

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como implementar una solución sencilla a nuestro cliente sin tener que implementar una solución con ' SharePoint FrameWork ', a través de la customización de las vistas en las listas. A la hora de hacer ofertas y propuestas a nuestros clientes, no se dispone de un presupuesto holgado y/o el cliente desea implementar soluciones con los componentes que ofrece el producto, para no depender de la implementación de soluciones a medida, en un futuro. Teniendo en cuenta este tipo de limitaciones, en las ofertas que se realizan a nuestros clientes, la mayoría de los requisitos se pueden resolver, con los componentes que ofrece ' SharePoint Online ', ofreciendo ejemplos y diseños, de la página oficial ...
Leer más