Este documento presenta una introducción a SharePoint Framework. Explica qué es SPFx, incluyendo web parts personalizados, extensiones y timeline histórica. También cubre cómo configurar un entorno de desarrollo SPFx y crear un proyecto "Hola Mundo" básico. El orador es Haaron González, consultor de SharePoint y Office 365.
5. Foto del speaker
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
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
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
@helpdsp
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/ComunidadSharePointMexico