Este documento presenta una agenda para un taller sobre el desarrollo de aplicaciones para SharePoint utilizando SharePoint Framework (SPFx) y React. La agenda incluye introducciones a SPFx, el entorno de desarrollo, desarrollando web parts con SPFx y React, conectándose a datos de SharePoint, pruebas y despliegue. El taller también cubrirá el desarrollo de extensiones de SPFx como application customizers y list view command sets.

1. Workshop SPFx + React
Olga Martí y Mario Cortés
Twitter: @olgaamarti @mariocortesf

2. @olgaamarti
www.olgamarti.com

4. WiFi Keys for Attendees
 Connect to the wireless network MSFT_GUEST
 Login details for the wireless network:
 Guest Username O365Sat@outlook.com
 Guest Password: 0195

5. Track 1: SALA SANTIAGO DEXEUS
 09:00- 10:30 ReactJS para SharePoint Developers
 Speakers: Olga Marti /Mario Cortes
 11:00-12:30 Como utilizar Graph y no morir en el intento:
 Speakers Ruben Ramos /Rober Bermejo
 12:30- 14:00 ALM y SPFX un ciclo completo
 Speakser : Luis Mañez / Adrián Díaz

6. Agenda – Aquí se viene a programar
 Me voy descargando el toolset
 Introducción a SPFx
 Entorno de desarrollo
 Desarrollando WebParts con SPFx + React
 SPFx Extensions
 Obtener datos de SharePoint
 Testeando nuestra aplicación
 Despliegue

7. Office 365
NodeJS + npm
npm install -g yo gulp
VS Code
npm install -g @microsoft/generator-
sharepoint@latest
Entorno de desarrollo

8. Actualiza el toolset
 npm i npm
 npm install @microsoft/generator-sharepoint –global
 npm update

9. Laboratorios
https://goo.gl/CvMtuE
 https://github.com/CompartiMOSS/Global-Office-365-Developer-
Bootcamp/tree/master/SPFX%20Connecting%20to%20SP%20and%20React

11. Classic Sites Vs Modern Sites
Classic sites Modern sites
• Funcionalidades legacy
• Mayor nivel de personalización
• Más usable y simple
• Adapatada a diferentes dispositivos
• Contendrá todas las novedades

12. ¿Qué es SharePoint Framework?
• Client-side.
• Se ejecuta en el contexto del usuario.
• Puede utilizarse en páginas modernas y en páginas clásicas.
• SharePoint Online y SharePoint 2016 con FP2 en adelante.

13. Cambios respecto al desarrollo clásico

14. Componente visuales SPFx
Extender la interfaz y
añadir scripts.
Botones customizados
en los menús de listas
Modifica el
renderizado de una
columna
Crear controles/bloques que aparecerán
dentro de una página de SharePoint.

15. SharePoint Framework - WebParts

16. SharePoint Framework - Extensions

17. APPLICATION CUSTOMIZER

18. LISTVIEW COMMAND SET

19. FIELD CUSTOMIZER

20. Construyendo un WebPart con React

21. Desarrollo basado en componentes web con React
• Dividir la interfaz en componentes
atómicos.
• Cada componente es responsable de
implementar una funcionalidad.
• No conoce los componentes superiores
que lo encapsulan.
• Solo conoce los controles hijos.
HeaderListItems

22. Componentes
• Un componente equivaldría al concepto de función.
• Recibe una entrada y genera una salida como elemento de React.

23. Composición de componentes
• Un componente puede contener a su
vez otros componentes.
• Crearemos una jerarquía de
componentes.

24. Interfaz basada en JSX
• Expresión que describe cómo se pintara la interfaz.
• Manejos de estos objetos mediante programación.

25. Render
• Genera el DOM del componente.
• Los elementos son inmutables, una vez que has creado un elemento no puedes modificarlo.
• Podemos bindear a objetos.

26. BaseClientSideWebPart.Render
• La clase BaseClientSideWebPart contiene un método render encargado de crear los elementos del
componente.

27. Estructura del proyecto

28. Propiedades (props)
• Las entradas de datos de un componente se realiza mediante
“propiedades”.
• this.props
• Las propiedades son de solo lectura.

29. Estado(state)
• Son como propiedades privadas al componente.
• Cada componente mantiene sus propio estado.
• State es de lectura/escritura.

30. Actualizar el state
• Solo se puede actualizar el estado de 2 formas:
• En el constructor
• Mediante el método setState()
• setState es asíncrono
• El flujo de información siempre es de
arriba hacia abajo en la jerarquía de
componentes.
• Un componente puede pasar su estado a
un hijo mediante propiedades.

31. Lifecycle
Inicialización
1. getDefaultProps
2. getInitialState
3. componentWillMount
4. Render
5. componentDidMount
Actualizacion de estado
1. shouldComponentUpdate
2. componentWillUpdate
3. Render
4. componentDidUpdate
Actualizacion de propiedades
1. componentWillReceiveProps
2. componentWillUpdate
3. Render
4. componentDidUpdate
Unmount
1. componentWillUnmount

32. Eventos
• Permite capturar eventos de nuestro
componentes.
• Mecanismo que utilizaremos para
pasar información de abajo hacia
arriba.

33. Office Fabric UI
• Librearía con componentes, estilos e iconos para crear interfaces similares al estándar.
npm i office-ui-fabric-react --save

35. Application customizer
Top
Bottom

36. Field Customizer
ListView
Field

37. ListView Command extension
CommandBar
ContextMenu

38. Document Library
Página
Arquitectura extensiones
.SPPK
Feature
CustomAction
CDN
Bundles
JS
Developer
Feature
SPFx
ReactTypeScript
SharePoint Site Collection
Bundles
JS
Field
CustomAction
Field

39. Conectar con SharePoint

40. SPHttpClient
• Cliente que permite realizar peticiones REST en el contexto del usuario.

41. PnP JavaScript Core
• Librearía con utilidades para conectar con SharePoint de una forma más natural.
• No necesitamos conocer la estructura de REST de SharePoint.
npm install sp-pnp-js --save

42. MSGraphClient
• Cliente que permite realizar peticiones REST de la Graph API en el contexto del usuario.
• MSGraphClient maneja la autenticación por ti.
npm install @microsoft/microsoft-graph-types –save-dev

43. AadHttpClient
• Cliente que permite consumir API’s
securizadas por Azure AD.
• Utiliza ADAL.JS
• OAuth implicit flow.
• Debemos garantizar el acceso
previamente
npm install @microsoft/microsoft-graph-types –save-dev

44. AadHttpClient

45. Environment.type
Permite detectar en qué entorno nos encontramos (EnvironmentType):
• Test: el código se ejecuta desde un test unitario.
• Local: nos encontramos en un equipo de desarrollo donde estamos probando nuestro desarrollo.
• SharePoint: el framework se ha cargado en una página de SharePoint.
• ClassicSharePoint: el framework se ha cargado en una página basada en el modelo clásico de páginas de
SharePoint.

46. Dynamic Data
Conecta tus WebParts de SPFx y Extensions para intercambiar información entre ellos.

47. Testeando nuestra aplicación

48. gulp serve
Testear tu codigo

49. Debugger for Chrome
Con Visual Studio Code y la
extensión de Chrome “Debugger
for Chrome” podemos
engancharnos al proceso de
Chrome. De esta manera nos
permite depurar directamente
desde Visual Studio Code
mientras utilizamos el Workbench
desde Chrome.

50. Despliegue

51. gulp bundle –ship
gulp package-solution --ship
Despliega tu aplicación

52. Habilitar el CDN

53. App Catalog a nivel de colección de sitio
# create site collection app catalog
Add-SPOSiteCollectionAppCatalog -Site $site

54. https://dev.office.com/sharepoint
https://github.com/SharePoint/sp-dev-fx-extensions
https://github.com/olgamarti
https://geeks.ms/rockyouroffice365
Recursos

55. THANKS!
Olga Martí y Mario Cortés
Twitter: @olgaamarti @mariocortesf