La nueva experiencia moderna para listas, bibliotecas y páginas en Office 365 se basa en un nuevo marco de trabajo del lado cliente de JavaScript denominado SharePoint Framework. Este marco de trabajo proporciona un enfoque seguro, responsivo y fluido del explorador para representar soluciones y componentes de página personalizados. Aprenda los conceptos básicos de esta sesión y obtenga todo lo que necesita para comenzar con SPFx.

1. México | TECNM Tláhuac
Noviembre 19, 2020

2. Introducción a
SharePoint Framework
Haaron Gonzalez

3. Nuestros
Patrocinadores

4. Comunidades
Amigas

5. Haaron Gonzalez
Consultor SharePoint & Office 365
El cambio es la única constante y nosotros lo
creamos. Soy un profesional dedicado a aportar el
mayor valor posible de una manera rentable para
mis clientes. Trabajo con empresas que utilizan la
tecnología como puente para influir en la cultura
empresarial e introducir innovaciones que les
ayuden a lograr más y llegar a más lejos como
organización.
Reconocido oficialmente como un Microsoft Most
Valuable Professional por 15 años consecutivos.
haaron.gonzalez@sharepoint.com.mx
http://instagram.com/helpdsp
http://facebook.com/helpdsp
http://twitter.com/helpdsp
https://github.com/helpdsp
https://www.youtube.com/helpdesksharepoint

6. Agenda
SharePoint Framework - ¿Qué es?
Out of the Box (OOB)
Edición
Web Parts Toolbox
SPFx Extensions
Timeline
Setup a SPFx Development Environment
Real Project Example
Create Hello World

7. SharePoint Framework
¿Qué es?

8. Out of the box (OOB)
Soportado de forma nativa en SharePoint Online y Office 365

9. Edición
OOB web parts

11. Web Parts
TU PUEDES PROGRAMAR Y
REGISTRAR TU PROPIO WEB
PART

12. SPFx Extensions: Application Customizer
Ejemplos:
Propósito:
 Inyectar JavaScript en una pagina
 Insertar HTML en ciertos lugares conocidos dentro de una página - Placeholders
Pie de página personalizadoBarras de notificación Mensajes emergentes

13. SPFx Extensions: Command Set
Propósito:
 Insertar comandos personalizados en la barra de herramientas de una lista o
biblioteca
 Insertar comandos personalizados en menús contextuales
Ejemplos:
Clonar elemento seleccionado Email links to documents
Shortcut to set
unique permissions

14. SPFx Extensions: Field Customizer
Proposit:
 Proporcionar un dibujado personalizado a nivel celda dentro de una columna
Ejemplos:
Color-coding SSN-masking Inline editing controls

16. SharePoint Framework TIMELINE
SOURCE: https://tahoeninjas.blog/2019/07/24/spfx-timeline/

17. Configuración de un
entorno de desarrollo para
SharePoint Framework
Instala NodeJS:
 v10.x
 https://nodejs.org/en/download/
Instala VS Code
 https://code.visualstudio.com/Download
Configura Pre-Requisites:
 Abre consola de PowerShel como administrador:
 Set-ExecutionPolicy Unrestricted
 npm install –g gulp yo @microsoft/generator-sharepoint

18. PowerShell:
 Cargamos una sesión de PowerShell y creamos
una carpeta para nuestros proyecto
 C:cd code
 C:md hola-mundo
 C:cd hola-mundo
Usams Yeoman SharePoint Generator
 yo @Microsoft/sharepoint
 gulp trust-dev-cert
Revisamos la estructura de archivos de nuestros Proyecto:
 C:Codehola-mundocode .
Otro código
 npm install moment
 Import * as moment from ‘moment’;
 ${ moment().format(“dd/mm/yyyy”) }
Otro código
 gulp serve
 gulp bundle --ship
 gulp package-solution --ship
Creando un Hola Mundo

19. El cambio es la única constante
Y NOSOTROS LO CREAMOS
haaron.gonzalez@sharepoint.com.mx
http://instagram.com/helpdsp
http://facebook.com/helpdsp
http://twitter.com/helpdsp
https://github.com/helpdsp
https://www.youtube.com/helpdesksharepoint
Comunidad SharePoint Mexico
https://www.facebook.com/groups/C
omunidadSharePointMexico