Crea un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016

Vamos a ver como crear un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016.

Según nos indica Microsoft en su documentación podemos ver que SharePoint Framework (SPFx) es un modelo de página y elemento web que proporciona soporte completo para el desarrollo de SharePoint del lado del cliente, fácil integración con datos de SharePoint y soporte para herramientas de código abierto. Con SharePoint Framework, se pueden utilizar tecnologías y herramientas web modernas en tu entorno de desarrollo preferido para crear experiencias productivas y aplicaciones que respondan y estén listas para dispositivos móviles desde el primer día. SharePoint Framework funciona para SharePoint Online y también para instalaciones locales (SharePoint 2016 Feature Pack 2 y SharePoint 2019).

Las características clave de SharePoint Framework incluyen lo siguiente:

  • Se ejecuta en el contexto del usuario actual y la conexión en el navegador. No hay iFrames para la personalización (JavaScript está incrustado directamente en la página).
  • Los controles se representan en la página normal DOM.
  • Los controles son receptivos y accesibles por naturaleza.
  • Permite al desarrollador acceder al ciclo de vida además de renderizar , cargar , serializar y deserializar , cambios de configuración y más.
  • Es un marco agnóstico. Puede usar cualquier marco de JavaScript que le guste: React, Handlebars, Knockout, Angular y más.
  • La cadena de herramientas se basa en herramientas comunes de desarrollo de clientes de código abierto, como npm, TypeScript, Yeoman, webpack y gulp.
  • El rendimiento es confiable.
  • Los usuarios finales pueden usar las soluciones SPFx del lado del cliente que están aprobadas por los administradores de inquilinos (o sus delegados) en todos los sitios, incluidos los sitios de equipo, grupo o personal de autoservicio.
  • Los elementos web SPFx se pueden agregar a las páginas clásicas y modernas.

El modelo de tiempo de ejecución mejora en el elemento web Editor de secuencias de comandos. Incluye una sólida API de cliente, un objeto HttpClient que maneja la autenticación a SharePoint y Office 365, información contextual, fácil definición y configuración de propiedades, y más.

Para realizar la demo utilizaremos la ventana de comandos de PowerShell.

Creamos una carpeta para nuestra demo:

md helloword-webpart

cd helloword-webpart

y ejecutamos el generador de SharePoint de Yeoman con el comando:

yo @microsoft/sharepoint

Si no tenemos Yeoman instalado seguir el siguiente post Instalar Yeoman, Gulp, npm y Node.js para trabajar con SharePoint.

Si al ejecutar el comando nos da el siguiente error:

Significa que no tenemos instalada esta plantilla en concreto para Yeoman, la instalamos de manera global (con -g) para así no tener que instalarla cada vez que la vayamos a usar, mediante el siguiente comando:

npm install -g @microsoft/generator-sharepoint

Seguidamente, volvemos a ejecutar Yeoman con la plantilla de SharePoint:

yo @microsoft/sharepoint

El generador Yeoman va a hacer una serie de preguntas. A continuación comentamos las más destacadas:

Nos pedirá la versión de SharePoint para la que vamos a trabajar, como vemos puede ser SharePoint Online, SharePoint  2019 o SharePoint 2016.

Nos preguntará si queremos hacer un WebPart (como es nuestro caso), una extensión o una librería.

También es interesante que podemos elegir Frameworks Javascript elaborados como React (Framework JavaScript para interfaces de usuario) o Knockoutjs (Framework JavaScript que sigue el patrón MVVM)

Cuando Yeoman finalice el wizard nos creará los archivos necesarios para crear una nuevo Webpart.

Podemos abrirlo con Visual Studio Code, si lo tenemos instalado, entrando en la carpeta creada y escribiendo el comando:

code .

Si vemos el código fuente (independientemente de como generemos el WebPart con Yeoman) vemos varios ficheros .ts de TypeScript, que es el lenguaje principal para compilar elementos web del lado cliente de SharePoint. TypeScript es un superconjunto con tipo de JavaScript que se compila en JavaScript sin formato. Las herramientas de desarrollo del lado cliente de SharePoint se crean mediante clases, módulos e interfaces de TypeScript para ayudar a los desarrolladores a compilar elementos web del lado cliente sólidos.

Con el proyecto ya creado, para poder probarlo debemos compilar y ejecutar el WebPart. Para ello primero instalamos un certificado de desarrollador. Vamos a utilizar el automatizador de tareas Gulp para realizar esta tarea desde la consola de PowerShell.

Si no tenemos Gulp instalado seguir el siguiente post Instalar Yeoman, Gulp, npm y Node.js para trabajar con SharePoint.

Escribimos en PowerShell el siguiente comando:

gulp trust-dev-cert

En caso de recibir el siguiente error:

Ver como solucionarlo en este otro post Error ReferenceError: primordials is not defined en Node.js

Finalmente para compilar y visualizar el WebPart escribimos:

gulp serve

Nos abrirá el navegador con una url local similar a esta:

https://localhost:4321/temp/workbench.html

La página de workbench nos permite previsualizar y probar rápidamente WebParts sin necesidad de desplegarlos en el servidor.

Para probarlo en nuestro SharePoint Online seguir el siguiente artículo Probar Webpart (SPFX) en SharePoint Online

Es interesante ver que ahora si damos al icono del lápiz y editamos la descripción vemos como de manera predeterminada, el comportamiento de actualización es reactivo y permite ver los cambios a medida que se edita la propiedad. Además, los cambios se guardan instantáneamente.

Deja una respuesta