Share Point

Ejercicio 1: Introducción a SharePoint Framework (SPFx)
Tarea 1: configurar el entorno de desarrollo de SharePoint Framework
Asegúrese de que node.js está instalado y es la versión correcta admitida
1. Inicie sesión en MS600-VM para activar Ctrl+Alt+Supr para abrir la página de

inicio de sesión.
o Cuenta: Admin
o Contraseña: Pa55w.rd
2. Abra el símbolo del sistema de PowerShell ejecute el siguiente

comando: node -v
3. Asegúrese de que la versión es Node.js v10.x y NO es 9.x ni 11.x (estos dos no

se admiten con SharePoint Framework).
Instalar Yeoman y gulp
1. Desde el símbolo del sistema ejecute el siguiente comando: npm install -g yo

gulp
2. Desde el símbolo del sistema ejecute el siguiente comando: npm install -

g @microsoft/generator-sharepoint
Tarea 2: Creación de un elemento web del lado cliente de SharePoint

Framework
1. Desde el símbolo del sistema de PowerShell, cambie al directorio C:/LabFiles

ejecutando el siguiente comando: cd c:/LabFiles
2. Cree un nuevo directorio para los archivos de proyecto de SharePoint

ejecutando el siguiente comando: md SharePoint
3. Vaya al directorio de SharePoint recién creado ejecutando el siguiente

comando: cd SharePoint
ejecutando el siguiente comando: md HelloWorld

comando: cd HelloWorld
6. Ejecute el generador de Yeoman de SharePoint ejecutando el siguiente

comando: yo @microsoft/sharepoint
7. Utilice lo siguiente para completar el mensaje que se muestra:

o ¿Cuál es el nombre de la solución?: HelloWorld
o ¿Qué paquetes de línea base deseatener como destino los componentes? :
Solo SharePoint Online (más reciente)
o ¿Dónde desea colocar los archivos?: Utilice la carpeta actual
o ¿Desea permitir que el administrador de inquilinos pueda implementar
la solución en todos los sitios inmediatamente sin ejecutar ninguna
implementación de características o agregar aplicaciones en sitios?: No
o ¿Los componentes de la solución requerirán permisos para tener acceso
a las API web que son únicas y no se comparten con otros componentes del
inquilino?: No hay permisos para acceder a las API web que son únicas y no
se comparten con otros componentes del inquilino? : No hay
o ¿Qué tipo de componente del lado cliente crear?: WebPart
o ¿Cuál es el nombre de su elemento web?: HelloWorld
o ¿Cuál es la descripción del elemento Web?: Descripción de HelloWorld
o ¿Qué marco de trabajo le gustaría utilizar?: No hay marco JavaScript
Confiar en el certificado de desarrollador autofirmado
1. Desde el símbolo del sistema de PowerShell ejecute el siguiente comando: gulp

trust-dev-cert
2. Después de aprovisionar las carpetas necesarias para el proyecto, el generador

instalará todos los paquetes de dependencia mediante NPM para Node.js. Cuando
NPM complete la descarga de todas las dependencias, ejecute el proyecto ejecutando
el siguiente comando: gulp serve
3. La tarea gulp serve de SharePoint Framework compilará el proyecto, iniciará un

servidor web local e iniciará un explorador abierto a SharePoint Workbench.
4. Seleccione el botón de icono + elemento web para abrir la lista de elementos
web disponibles.
5. Seleccione el elemento web HelloWorld.
6. Edite las propiedades del elemento web seleccionando el icono de lápiz (editar)
en la barra de herramientas a la izquierda del elemento web.
7. En el panel de propiedades que se abre, cambie el valor del

campo Descripción. Observe cómo se actualiza el elemento web a medida que realiza
cambios en el texto.
8. Vuelva a PowerShell y detenga el proceso en ejecución ejecutando Ctrl + C
9. Cuando se le pida que termine el tipo Y y pulse la tecla enter.
Tarea 3: prueba con el workbench de SharePoint local y hospedado

En este ejercicio trabajará con dos versiones diferentes de SharePoint Workbench, el
workbench local y hospedado, así como los diferentes modos de la tarea de servicio gulp
integrada.
1. Abra el proyecto en Visual Studio Code ejecutando el siguiente

comando: code .
2. En la cinta de opciones Código de Visual Studio, seleccione Terminal > Nuevo

terminal.
3. Ejecute el proyecto ejecutando el siguiente comando: gulp serve
4. Seleccione el botón de icono + elemento web para abrir la lista de elementos

web disponibles.
5. Seleccione el elemento web HelloWorld.
6. Deje el proyecto en marcha. Vuelva al código de Visual Studio.

7. Edite el CÓDIGO HTML en el método render() del elemento web, ubicado en
el archivo src/webparts/helloWorld/HelloWorldWebPart.ts.
a. Busque el estilo con la clase styles.title y actualice cambie el título a

"Bienvenido a Microsoft Learning for SharePoint!"
b. Guarde el proyecto y, a continuación, vuelva al explorador y observe los

cambios en el valor del título del elemento web.
8. A continuación, en el explorador, vaya a uno de los sitios de SharePoint Online

y anexe lo siguiente al final de la dirección URL del sitio
raíz: /_layouts/workbench.aspx. Este es el workbench hospedado de SharePoint
Online.
9. Tenga en cuenta que cuando agrega un elemento web, muchos más elementos
web aparecerán más allá del que creó; y fue el único que se muestra en la caja de
herramientas en el banco de trabajo local. Esto se debe a que ahora está probando el
elemento web en un sitio de SharePoint en funcionamiento.
Nota: La diferencia entre el banco de trabajo local y hospedado es significativa. Tenga en

cuenta que un workbench local no es una versión funcional de SharePoint; más bien, es
sólo una sola página que puede permitirle probar elementos web. Esto significa que no
tendrá acceso a un contexto de SharePoint real, listas, bibliotecas o usuarios reales cuando
esté probando en el área de trabajo local.
1. Veamos otra diferencia con la mesa de trabajo local frente a la alojada. Vuelva
al elemento web y realice un cambio en el CÓDIGO HTML.
2. Tenga en cuenta que, después de guardar el archivo, mientras la consola

muestra una gran cantidad de comandos, el explorador que muestra el banco de trabajo
hospedado no se vuelve a cargar automáticamente. Esto se espera. Todavía puede
actualizar la página para ver el elemento web actualizado, pero el servidor web local
no puede hacer que el servidor de trabajo hospedado se actualice. Cierre el workbench
local y hospedado y detenga el servidor web local presionando CTRL+C en el símbolo
del sistema.
revisión
En este ejercicio, aprendió a crear un elemento web de SharePoint Framework y probar el
elemento web mediante el sitio Workbench y SharePoint de SharePoint Framework.
¡felicidades!
Ha completado con éxito este ejercicio. Haga clic en Siguiente para avanzar al siguiente
ejercicio.
anteriorSiguiente: Ejercicio 3: Creación de extensiones...

Ejercicio 2: Trabajar con el panel de propiedades del elemento
web
Tarea 1: Crear una nueva solución SPFx y un elemento web

inicio de sesión.
o Cuenta: Admin
2. Desde el símbolo del sistema de PowerShell, cambie al

directorio C:/LabFiles/SharePoint ejecutando el siguiente comando: cd
c:/LabFiles/SharePoint

ejecutando el siguiente comando: md HelloPropertyPane

comando: cd HelloPropertyPane


o ¿Cuál es el nombre de la solución?: HelloPropertyPane
o ¿Cuál es el nombre del elemento Web?: HelloPropertyPane
o ¿Cuál es la descripción del elemento Web?: HelloPropertyPane
description
comando: code .

terminal.
9. Verifique que todo esté funcionando. Ejecute el siguiente comando para

compilar, iniciar el servidor web local y probar el elemento web en el workbench
local: gulp serve
10. Cuando el explorador cargue el área de trabajo local, seleccione el

control Agregar un nuevo elemento web.
11. Seleccione el elemento web HelloPropertyPane para agregar el elemento web

a la página.
12. Seleccione el control de elementos web de edición en el lado del elemento web
para mostrar el panel de propiedades.
Tarea 2: Agregue nuevas propiedades al elemento web
1. Cree dos nuevas propiedades que se usarán en el elemento web y el panel de

propiedades.
a. Desde Visual Studio Code, abra el

archivo src\webparts\helloPropertyPane\HelloPropertyPaneWebPart.ts
b. Busque la interfaz IHelloPropertyPaneWebPartProps después de las

instrucciones de importación. Agregue las dos propiedades siguientes a la interfaz:
 myContinent: cadena;
 numContinentsVisited: número;
2. Actualice la representación de elementos web para mostrar los valores de estas

dos propiedades:
a. Dentro de la HelloPropertyPaneWebPart clase, busque

el render() método.
b. Dentro del método render(), busque la siguiente línea en la salida
HTML:
html
<p class="${ styles.description }">$
{escape(this.properties.description)}</p>
c. Agregue las dos líneas siguientes después de la línea que acaba de

localizar:
html
<p class="${ styles.description }">Continent where I reside: $
{escape(this.properties.myContinent)}</p><p class="${ styles.description
}">Number of continents I've visited: $
{this.properties.numContinentsVisited}</p>
d. Por el momento, el elemento web representará una cadena en blanco y

sin definir para estos dos campos, ya que no hay nada presente en sus valores.
Esto se puede solucionar estableciendo los valores predeterminados de las
propiedades cuando se agrega un elemento web a la página.
3. Establezca los valores de propiedad predeterminados:
a. Abra el
archivo src\webparts\helloPropertyPane\HelloPropertyPaneWebPart.manifes
t.json
b. Busque la siguiente sección en el

archivo: preconfiguredEntries[0].properties.description
c. Agregue una coma después del valor de la propiedad description.
d. Agregue las dos líneas siguientes después de la propiedad description:
json
"myContinent": "North America","numContinentsVisited": 4
4. Las actualizaciones del archivo de manifiesto del elemento web no se recogerán

hasta que reinicie el servidor web local.
a. En el símbolo del sistema, presione CTRL+C para detener el servidor

web local.
b. Vuelva a generar y reinicie el servidor web local ejecutando el
comando gulp serve.
c. Cuando se cargue SharePoint Workbench, agregue el elemento web a la

página para ver las propiedades.
Tarea 3: Amplíe el panel de propiedades

Ahora que el elemento web tiene dos nuevas propiedades personalizadas, el siguiente paso
es ampliar el panel de propiedades para permitir a los usuarios editar los valores.
1. Agregue un nuevo control de texto al panel de propiedades, conectado a la

propiedad myContinent:
a. Abra el
archivo src\webparts\helloPropertyPane\HelloPropertyPaneWebPart.ts
b. Busque el método getPropertyPaneConfiguration y, dentro de él,

busque la matriz groupFields.
c. Agregue una coma después de la

llamada PropertyPaneTextField() existente.
d. Agregue el siguiente código después de la coma:
json
PropertyPaneTextField('myContinent', {
label: 'Continent where I currently reside'
})
2. Si el servidor web local no se está ejecutando, inscájelo ejecutando gulp serve
3. Una vez que SharePoint Workbench se esté ejecutando de nuevo, agregue el

elemento web a la página y abra el panel de propiedades.
4. Tenga en cuenta que puede ver la propiedad y el cuadro de texto en el panel de

propiedades. Las ediciones del campo actualizarán automáticamente el elemento web.
5. Ahora, agregue un control deslizante al panel de propiedades, conectado a la
propiedad numContinentsVisited:
a. En HelloPropertyPaneWebPart.ts, en la parte superior del archivo,

agregue una referencia PropertyPaneSlider a la instrucción de importación
existente para el paquete @microsoft/sp-webpart-base.
typescript
Import { PropertyPaneSlider } from '@microsoft/sp-webpart-base'
b. Desplácese hacia abajo hasta el

método getPropertyPaneConfiguration y, dentro de él, busque la
matriz groupFields.
c. Agregue una coma después de la última llamada a

PropertyPaneTextField() y agregue el código siguiente:
typescript
PropertyPaneSlider('numContinentsVisited', {
label: 'Number of continents I\'ve visited', min: 1, max: 7,
showValue: true,
})
d. Vuelva al navegador. Observe que el panel de propiedades ahora tiene

un control deslizante para controlar el número de continentes que ha visitado.
6. En el símbolo del sistema, presione CTRL+C para detener el servidor web

local.
7. Cierre Código de Visual Studio.
revisión
En este ejercicio, aprendió a cambiar las propiedades personalizadas que existen en el
manifiesto del elemento web y cómo agregar nuevas propiedades.
¡felicidades!
ejercicio.
anteriorSiguiente: Ejercicio 3: Creación de extensiones...

Ejercicio 3: Creación de extensiones de SharePoint Framework
En este ejercicio, creará un personalizador de aplicaciones SPFx que iniciará un cuadro de

diálogo Hello en la carga de la página moderna de SharePoint.
Tarea 1: Cree el proyecto
1. Inicie sesión en MS600-VM para activar la secuencia Ctrl + Alt + Eliminar,

seleccione Ctrl + Alt + Eliminar en el menú Comandos (rayo) en la esquina superior
izquierda de la pantalla para abrir la página de inicio de sesión.
o Cuenta: Admin
2. Desde el símbolo del sistema de PowerShell, cambie al directorio

C:/LabFiles/SharePoint ejecutando el siguiente comando: cd c:/LabFiles/SharePoint

ejecutando el siguiente comando: md SPFxAppCustomizer

comando: cd SPFxAppCustomizer


o ¿Cuál es el nombre de la solución?: SPFxAppCustomizer
o ¿Qué tipo de componente del lado cliente crear?: Extensión
o ¿Qué tipo de extensión del lado cliente crear?: Personalizador de
aplicaciones
o ¿Cuál es el nombre del personalizador de aplicaciones?:
HelloAppCustomizer
o ¿Cuál es la descripción del Personalizador de aplicaciones?:
HelloAppCustomizer description

instalará todos los paquetes de dependencia mediante NPM.

comando: code .
9. Desde el símbolo del sistema del terminal de código de Visual Studio, ejecute

el siguiente comando: gulp trust-dev-cert
NOTA: Las extensiones deben probarse en una página de SharePoint moderna a

diferencia de los elementos web, que se pueden probar en el workbench local. Además,
las extensiones también requieren parámetros de dirección URL especiales al solicitar
a la página que cargue la extensión desde el servidor web de desarrollo local.
10. Obtenga la dirección URL de una página de SharePoint moderna.
11. Abra el archivo ./config/serve.json.
12. Copie la dirección URL de la página de SharePoint moderna en la

propiedad serveConfigurations.default.pageUrl.
13. La tarea de servicio gulp de proceso de compilación de SPFx iniciará un

explorador y navegará a esta dirección URL, anexando los parámetros de
DIRECCIÓN URL necesarios al final de la dirección URL para cargar la extensión
SPFx desde el servidor web de desarrollo local.
o Ejecute el proyecto ejecutando el siguiente comando: gulp serve
b. Cuando se carga la página de SharePoint, SharePoint le pedirá que cargue los

scripts de depuración. Esta es una comprobación de confirmación para asegurarse de
que realmente desea cargar scripts desde un origen que no es de confianza. En este
caso, ese es el servidor web de desarrollo local en https://localhost, en el que puede
confiar.
o Seleccione el botón Cargar scripts de depuración.

o Una vez que se carguen los scripts, se mostrará un cuadro de alerta de
cuadro de diálogo de SharePoint: el personalizador de la aplicación muestra este
cuadro de alerta. Abra el archivo personalizador de aplicaciones ubicado
en ./src/extensions/helloAppCustomizer/HelloAppCustomizerApplicationCus
tomizer.ts y busque el método OnInit(). Observe la siguiente línea en el método
que desencadena la aparición del cuadro de diálogo: Dialog.alert(`Hello from $
{strings.Title}:\n\n${message}`);
c. Detenga el servidor web local presionando CTRL+C en la ventana de

consola/terminal.
Tarea 2: Prueba tu extensión
2. Cuando se le solicite, seleccione el botón Cargar scripts de depuración.
3. Observe cuándo se carga la página, debe aparecer un cuadro de diálogo Hola

(su nombre).
4. Detenga el servidor web local presionando CTRL+C en la ventana de

consola/terminal.
Tarea 3: implementación de la extensión en todos los sitios del inquilino

de SharePoint Online
1. Busque y abra el archivo ./config/package-solution.json.
a. Asegúrese de que el objeto de solución tiene una propiedad

denominada skipFeatureDeployment y asegúrese de que el valor de esta
propiedad está establecido en true.
2. Busque y abra el archivo ./sharepoint/assets/ClientSideInstance.xml. Este

archivo contiene los valores que se establecerán automáticamente en la lista
Extensiones amplias de inquilinos del sitio catálogo de aplicaciones del inquilino de
SharePoint Online cuando se implemente el paquete.
3. Compile y empaquete la solución ejecutando los siguientes comandos, uno a la
vez:
powershell
gulp build
gulp bundle --ship
gulp package-solution --ship
Nota: Si este error se muestra en la consola de comandos, ignórelo. La razón es que la
salida de compilación contiene una advertencia.The build failed because a task
wrote output to stderr.
4. En el explorador, vaya al sitio de Catálogo de aplicaciones de inquilinos de

SharePoint Online.
5. Seleccione la lista Aplicaciones para SharePoint en el panel de navegación

izquierdo.
6. Arrastre el archivo ./sharepoint/solution/*.sppkg generado a la lista

Aplicaciones para SharePoint.
7. En el cuadro de diálogo ¿Confía en spfx-app-customizer-client-side-

solution?
a. Active la casilla Hacer que esta solución esté disponible para todos

los sitios de la organización.
b. Observe el mensaje Este paquete contiene una extensión que se

habilitará automáticamente en todos los sitios....
c. Seleccione Implementar.
8. Seleccione Contenido del sitio en el panel de navegación izquierdo.
9. Seleccione Extensiones de gran ancho de inquilino. Dependiendo de cuándo

se creó el inquilino, es posible que se oculte la lista Extensiones amplias de inquilino.
Si no ve la lista en el Contenido del sitio, tendrá que navegar a ella manualmente. Para
ello, añada /Lists/TenantWideExtensions/AllItems.aspx a la dirección URL del sitio
del catálogo de aplicaciones.
10. En una ventana del explorador independiente, vaya a cualquier página moderna
de cualquier sitio moderno dentro del inquilino de SharePoint Online. Si esta extensión
se ha implementado correctamente, debería ver un mensaje de diálogo Hola (su
nombre) en la carga de la página.
Nota: Una extensión amplia de inquilino puede tardar hasta 20 minutos en

implementarse en el inquilino de SharePoint Online, por lo que es posible que deba
esperar para probar completamente si la implementación se realizó correctamente.

consola/terminal.
revisión
En este ejercicio, aprendió a crear e implementar una extensión de encabezado y pie de
página personalizada que se aplica a todos los sitios de un inquilino de SharePoint Online.
¡felicidades!
ejercicio.
anteriorSiguiente: Ejercicio 4: Creación de una extensión...

Ejercicio 4: Creación de una extensión de conjunto de comandos

inicio de sesión.
o Cuenta: Admin

C:/LabFiles/SharePoint ejecutando el siguiente comando: cd

ejecutando el siguiente comando: md SPFxCommandSet

comando: cd SPFxCommandSet


o ¿Cuál es el nombre de la solución?: SPFxCommandSet
o ¿Qué tipo de extensión del lado cliente crear?: ListView Command Set
o ¿Cuál es el nombre del conjunto de comandos?: CommandSetDemo
o ¿Cuál es la descripción del conjunto de comandos?: CommandSetDemo
description
8. Desde el símbolo del sistema de PowerShell ejecute el siguiente comando: gulp

trust-dev-cert

comando: code .
Tarea 2: Observe el código del conjunto de comandos ListView
1. En Visual Studio Code, abra el

archivo CommandSetDemoCommandSet.ts en la
carpeta src\extensions\commandSetDemo.
2. Observe que la clase base para el conjunto de comandos ListView se importa

del paquete sp-listview-extensibility, que contiene código de SharePoint Framework
requerido por el conjunto de comandos ListView.
typescript
import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
BaseListViewCommandSet,
Command,
IListViewCommandSetListViewUpdatedParameters,
IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';
El comportamiento de los botones personalizados está contenido en los

métodos onListViewUpdated() y OnExecute().
El evento onListViewUpdated() se produce por separado para cada comando (por ejemplo,

un elemento de menú) cada vez que se produce un cambio en el ListView y la interfaz de
usuario debe volver a representarse. El parámetro event function representa información
sobre el comando que se está representando. El controlador puede usar esta información
para personalizar el título o ajustar la visibilidad, por ejemplo, si un comando solo debe
mostrarse cuando se selecciona un cierto número de elementos en la vista de lista. Esta es la
implementación predeterminada. Cuando se usa el método tryGetCommand, se obtiene un
Command objeto, que es una representación del comando que se muestra en la interfaz de
usuario. Puede modificar sus valores, como titleo visible,para modificar el elemento ui.
SPFx utiliza esta información al volver a representar los comandos. Estos objetos
mantienen el estado desde el último renderizado, por lo que si un comando está establecido
en visible = false, permanece invisible hasta que se establece de nuevo en visible = true.
typescript
@override
public onListViewUpdated(event:
IListViewCommandSetListViewUpdatedParameters): void {
const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
if (compareOneCommand) {
// This command should be hidden unless exactly one row is
selected.
compareOneCommand.visible = event.selectedRows.length === 1;
}
}
El método OnExecute() define lo que sucede cuando se ejecuta un comando (por ejemplo,

se selecciona el elemento de menú). En la implementación predeterminada, se muestran
diferentes mensajes en función del botón seleccionado.
typescript
@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
Dialog.alert(`${this.properties.sampleTextOne}`);
break;
case 'COMMAND_2':
Dialog.alert(`${this.properties.sampleTextTwo}`);
break;
default:
throw new Error('Unknown command');
}
}
Task 3: Test your extension

Actualmente no puede usar Workbench local para probar extensiones de SharePoint
Framework. Deberá probarlos y desarrollarlos directamente en un sitio de SharePoint
Online en vivo. No es deba implementar la personalización en el catálogo de aplicaciones
para ello, lo que hace que la experiencia de depuración sea sencilla y eficaz. Vaya a
cualquier lista de SharePoint en su sitio de SharePoint Online mediante la experiencia
moderna o cree una nueva lista. Copie la dirección URL de la lista en el portapapeles. Dado
que nuestro conjunto de comandos ListView se hospeda desde localhost y se está
ejecutando, puede usar parámetros de consulta de depuración específicos para ejecutar el
código en la vista de lista. Abra el archivo serve.json desde la carpeta config. Actualice los
atributos pageUrl para que coincidan con una dirección URL de la lista donde desea probar
la solución. Después de editar su serve.json debe tener un aspecto similar:
powershell
{
"$schema": "https://developer.microsoft.com/json-schemas/core-
build/serve.schema.json",
"port": 4321,
"https": true,
"serveConfigurations": {
"default": {
"pageUrl":
"https://contoso.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
"customActions": {
"bf232d1d-279c-465e-a6e4-359cb4957377": {
"location":
"ClientSideExtension.ListViewCommandSet.CommandBar",
"properties": {
"sampleTextOne": "One item is selected in the list",
"sampleTextTwo": "This command is always visible."
}
}
}
},
"helloWorld": {
"pageUrl":
"https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
"customActions": {
"bf232d1d-279c-465e-a6e4-359cb4957377": {
"location":
"ClientSideExtension.ListViewCommandSet.CommandBar",
"properties": {
"sampleTextOne": "One item is selected in the list",
"sampleTextTwo": "This command is always visible."
}
}
}
}
}
}

terminal.

consola/terminal.
revisión
En este ejercicio, aprendió a crear e implementar una extensión de conjunto de comandos.
Las extensiones de conjunto de comandos se utilizan para agregar comandos adicionales a
la barra de comandos en la parte superior de una página.
¡felicidades!
ejercicio.
anteriorSiguiente: Ejercicio 5: Creación de un campo...

Ejercicio 5: Creación de una extensión de personalizador de
campo

inicio de sesión.
o Cuenta: Admin


ejecutando el siguiente comando: md SPFxFieldCustomizer

comando: cd SPFxFieldCustomizer


o ¿Cuál es el nombre de la solución?: SPFxFieldCustomizer
o ¿Qué tipo de extensión del lado cliente se va a crear?: Personalizador de
campo
o ¿Cuál es el nombre del personalizador de campo?: HelloFieldCustomizer
o ¿Cuál es la descripción de Field Customizer?: HelloFieldCustomizer
description
o ¿Qué marco de trabajo le gustaría utilizar?: No hay JavaScript
Framework

Tarea 2: Actualización de los estilos SCSS para el personalizador de

campos
1. Busque y abra el
archivo ./src/extensions/helloFieldCustomizer/HelloFieldCustomizerFieldCustomi
zer.module.scss.
2. Reemplace el contenido del archivo por los siguientes estilos:
html
.HelloFieldCustomizer {
.cell {
display: 'inline-block';
}
.filledBackground {
background-color: #cccccc;
width: 100px;
}
}
Tarea 3: Actualice el código del personalizador de campos
1. Busque y abra el
archivo ./src/extensions/helloFieldCustomizer/HelloFieldCustomizerFieldCustomi
zer.ts.
2. Busque la interfaz IHelloFieldCustomizerFieldCustomizerProperties y
actualice sus propiedades a lo
siguiente: greenMinLimit?: string;yellowMinLimit?: string;
3. Busque el método enRenderCell() y actualice el contenido para que coincida

con el código siguiente. Este código examina el valor existente en el campo y crea las
barras de color relevantes en función del valor especificado en el valor de porcentaje
completado.
typescript
event.domElement.classList.add(styles.cell);
event.domElement.innerHTML = `
<div class='${styles.HelloFieldCustomizer}'>
<div class='${styles.filledBackground}'>
<div style='width: ${event.fieldValue}px;
background:#0094ff; color:#c0c0c0'>
${event.fieldValue}
</div>
</div>
</div>`;
Tarea 4: Actualice el código de implementación del personalizador de

campos
Los personalizadores de campo, cuando se implementan en producción, se implementan
mediante la creación de una nueva columna de sitio que está vinculada al script
personalizado definido en el archivo de paquete del personalizador de campos.
1. Busque y abra el archivo ./sharepoint/assets/elements.xml.
2. Agregue la siguiente propiedad al elemento, estableciendo los valores en las

propiedades públicas del personalizador de campos:
xml
ClientSideComponentProperties="{"greenMinLimit":"85",&qu
ot;yellowMinLimit":"70"}"
Tarea 5: Probar el personalizador de campo
1. En un explorador, vaya a una colección de sitios moderna de SharePoint Online

donde desee probar el personalizador de campos.
2. Seleccione el vínculo Contenido del sitio en el panel de navegación izquierdo.
3. Cree una nueva lista de SharePoint:
a. Seleccione Nuevo > Lista en la barra de herramientas.
b. Establezca el nombre de la lista en Estado de trabajo y

seleccione Crear.
4. Cuando se cargue la lista, seleccione la columna Agregar > Número para crear
una nueva columna.
5. Cuando se le solicite el nombre de la columna, escriba PercentComplete.
6. Agregue algunos elementos a la lista, con números diferentes en el campo

porcentaje.
7. Actualice las propiedades de la configuración de servicio utilizada para probar y

depurar la extensión:
a. Busque y abra el archivo ./config/serve.json.
b. Copie en la dirección URL completa (incluidos AllItems.aspx) de la

lista que acaba de crear en la propiedad serveConfigurations.default.pageUrl.
c. Busque el objeto serveConfigurations.default.properties.
d. Cambie el nombre de la
propiedad serveConfigurations.default.fieldCustomizers.InternalFieldName a
serveConfigurations.default.fieldCustomizers.PercentComplete. Esto indica a
SharePoint Framework con qué campo existente asociar el personalizador de
campos.
e. Cambie el valor del objeto properties a lo

siguiente: "properties": { "greenMinLimit": "85", "yellowMinLimit": "70"}
f. El código JSON para la configuración de servicio predeterminada debe

tener un aspecto similar al siguiente:
json
"default": {
"pageUrl": "https://contoso.sharepoint.com/sites/mySite/Lists/Work
%20Status/AllItems.aspx",
"fieldCustomizers": {
"PercentComplete": {
"id": "6a1b8997-00d5-4bc7-a472-41d6ac27cd83",
"properties": {
"greenMinLimit": "85",
"yellowMinLimit": "70"
}
}
}
}

consola/terminal.
revisión
En este ejercicio, aprendió a crear e implementar una extensión de conjunto de comandos.
Las extensiones de conjunto de comandos se utilizan para agregar comandos adicionales a
la barra de comandos en la parte superior de una página.
¡felicidades!
ejercicio.
anteriorSiguiente: Ejercicio 6: Implementación de un SharePoint...

Ejercicio 6: Implementación de una solución de SharePoint
Framework

inicio de sesión.
o Cuenta: Admin

C:/LabFiles/SharePoint ejecutando el siguiente comando: cd c:/LabFiles/SharePoint

ejecutando el siguiente comando: md DeploymentDemo

comando: cd DeploymentDemo


o ¿Cuál es el nombre de la solución?: DeploymentDemo
o ¿Cuál es el nombre del elemento Web?: Deployment Demo
o ¿Cuál es la descripción del elemento Web?: Descripción de demostración
de implementación
Tarea 2: Creación de un paquete de implementación para el proyecto
1. Cuando NPM complete la descarga de todas las dependencias, compile el

proyecto ejecutando el siguiente comando en la línea de comandos desde la raíz del
proyecto: gulp build
2. Cree un paquete de producción del proyecto ejecutando el siguiente comando

en la línea de comandos desde la raíz del proyecto: gulp bundle --ship
3. Cree un paquete de implementación del proyecto ejecutando el siguiente

comando en la línea de comandos desde la raíz del proyecto: gulp package-
solution --ship
Tarea 3: Implementación del paquete en un sitio de SharePoint
1. En un explorador, vaya al sitio catálogo de aplicaciones del inquilino de

SharePoint.
2. Seleccione el vínculo Aplicaciones para SharePoint en el panel de navegación

izquierdo.
3. Arrastre el paquete creado en los pasos anteriores, ubicado en el archivo

./sharepoint/solution/deployment-demo.sppkgdel proyecto, a la
biblioteca aplicaciones para SharePoint.
4. SharePoint iniciará un cuadro de diálogo preguntando si desea confiar en el

paquete.
5. Seleccione Implementar.
Tarea 4: instalación del paquete de SharePoint en una colección de sitios
1. Vaya a una colección de sitios existente o cree una nueva.

2. Seleccione Contenido del sitio en el panel de navegación izquierdo.
3. En el menú Nuevo, seleccione Aplicación.
4. Busque la solución que implementó anteriormente y selecciónela.
SharePoint comenzará a instalar la aplicación. Al principio parecerá atenuado, pero después

de unos momentos deberías verlo en la lista.
Tarea 5: Agregar el elemento web a una página
1. Vaya a una página de SharePoint.
2. Póngalo en modo de edición seleccionando el botón Editar en la parte superior

derecha del área de contenido de la página.
3. Seleccione el botón del icono del elemento web para abrir la lista de elementos
web disponibles.
4. Seleccione el icono expandir, una línea diagonal con dos flechas en la esquina
superior derecha, para expandir la caja de herramientas del elemento web.
5. Desplázate hasta la parte inferior; localizar y seleccionar el elemento

web Demostración de implementación.
Tarea 6: Examinar los archivos de elementos web implementados
1. Una vez que se cargue la página, abra las herramientas de desarrollo del
explorador y vaya a la pestaña Orígenes.
2. Actualice la página y examine dónde se hospeda el paquete de JavaScript.
Nota: Si no ha habilitado la red CDN de Office 365, el paquete se hospedará desde una
biblioteca de documentos denominada ClientSideAssets en el sitio del catálogo de
aplicaciones. Si ha habilitado la red CDN de Office 365, el paquete se hospedará
automáticamente desde la red CDN.
revisión
En este ejercicio, aprendió a empaquetar e implementar las soluciones de SharePoint
Framework.
¡felicidades!
ejercicio.
anteriorSiguiente: Ejercicio 7: Implementación de soluciones SPFx...

Ejercicio 7: Implementación de soluciones SPFx para Microsoft
Teams

inicio de sesión.
o Cuenta: Admin


ejecutando el siguiente comando: md SPFxTeamsTab

comando: cd SPFxTeamsTab


o ¿Cuál es el nombre de la solución?: SPFxTeamsTab
o ¿A qué paquetes de línea base desea dirigirse para los
componentes?: Solo SharePoint Online (más reciente)
implementación de características o agregar aplicaciones en sitios?: Sí
o ¿Cuál es el nombre del elemento web?: SPFx Teams Together
o ¿Cuál es la descripción del elemento web?: Descripción de SPFx Teams
Together
8. Abra el proyecto en un editor como Visual Studio Code.
9. Habilite el elemento web que se usará en Microsoft Teams:
o Busque y abra el
archivo ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ma
nifest.json.
o En el archivo de manifiesto del elemento web, busque la

propiedad supportedHosts: "supportedHosts": ["SharePointWebPart"],
o Agregue otra opción para permitir que este elemento web se use como
una pestaña en un equipo de Microsoft
Teams: "supportedHosts": ["SharePointWebPart", "TeamsTab"],
Tarea 2: Creación e implementación del paquete de aplicaciones de

Microsoft Teams
Observe que el proyecto contiene un equipo de carpetas que contiene dos imágenes. Estos
se usan en Microsoft Teams para mostrar la pestaña personalizada.
Puede observar que no hay ningún archivo manifest.json presente. SharePoint puede

generar automáticamente el archivo de manifiesto desde el sitio del catálogo de
aplicaciones. Sin embargo, en este momento, esta funcionalidad no está completamente
operativa.
Como alternativa, puede crear manualmente el archivo de manifiesto si desea tener más
control sobre los valores predeterminados que creará SharePoint.
La generación automática y la implementación del manifiesto de Microsoft Teams no está

operativa actualmente; creará manualmente el manifiesto de Microsoft Teams y el paquete
de aplicación:
1. Cree un archivo manifest.json en la carpeta ./teams, utilice el siguiente archivo

de manifiesto como plantilla:
json
{
"$schema": "https://developer.microsoft.com/json-
schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"packageName": "{{SPFX_COMPONENT_ALIAS}}",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "0.1",
"developer": {
"name": "Parker Porcupine",
"websiteUrl": "https://contoso.com",
"privacyUrl": "https://contoso.com/privacystatement",
"termsOfUseUrl": "https://contoso.com/servicesagreement"
},
"name": {
"short": "{{SPFX_COMPONENT_NAME}}"
},
"description": {
"short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
"full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
},
"icons": {
"outline": "{{SPFX_COMPONENT_ID}}_outline.png",
"color": "{{SPFX_COMPONENT_ID}}_color.png"
},
"accentColor": "#004578",
"staticTabs": [
{
"entityId": "com.contoso.personaltab.spfx",
"name": "My SPFx Personal Tab",
"contentUrl":
"https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?
SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal
%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
"scopes": [
"personal"
]
}
],
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}
{teamSitePath}/_layouts/15/TeamsLogon.aspx?
SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx
%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}
%26forceLocale={locale}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
2. Abra el archivo manifest.json. Este archivo contiene varias cadenas que deben

actualizarse para que coincidan con el componente SPFx. Utilice la tabla siguiente
para determinar los valores que se deben reemplazar. Las propiedades del componente
SPFx se encuentran en el archivo de manifiesto del elemento
web: ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.j
son
Propiedad en el manifiesto del

cadena manifest.json
componente SPFx
{{SPFX_COMPONENT_ALIAS}} alias
{{SPFX_COMPONENT_NAME}} preconfiguradoEntries[0].title
{{SPFX_COMPONENT_SHORT_DESCRIPT preconfiguredEntries[0].descri
ION}} ption
{{SPFX_COMPONENT_LONG_DESCRIPTI preconfiguredEntries[0].descri
ON}} ption
{{SPFX_COMPONENT_ID}} identificación
3. Nota: No se pierda la sustitución de
{{SPFX_COMPONENT_ID}} en configurableTabs[0].configurationUrl. Es
probable que tenga que desplazarse por su editor a la derecha para verlo. Los tokens
rodeados de llaves (por ejemplo, {teamSiteDomain}) no necesitan ser reemplazados.
4. Cree un paquete de aplicación de Microsoft Teams en zipping el contenido de la

carpeta ./teams. Asegúrese de comprimir solo el contenido y no la carpeta en sí. Este
archivo ZIP debe contener tres archivos en la raíz: dos imágenes y manifest.json.
Tarea 3: Cree e implemente el paquete de SharePoint

Para probar el elemento web en SharePoint y Microsoft Teams, primero debe
implementarse en un catálogo de aplicaciones.
1. Abra un explorador y vaya al sitio de Catálogo de aplicaciones con ámbito de
inquilino de SharePoint Online.
2. Seleccione el elemento de menú Aplicaciones para SharePoint en el menú de

navegación izquierdo.
3. Compile el proyecto abriendo un símbolo del sistema y cambiando a la carpeta

raíz del proyecto. A continuación, ejecute el siguiente comando: gulp build
4. A continuación, cree un paquete de producción del proyecto ejecutando el

siguiente comando en la línea de comandos desde la raíz del proyecto: gulp bundle --
ship
5. Cree un paquete de implementación del proyecto ejecutando el siguiente

comando en la línea de comandos desde la raíz del proyecto: gulp package-
solution --ship
6. Busque el archivo creado por la tarea gulp, que se encuentra en la

carpeta ./sharepoint/solution con el nombre *.sppkg.
7. Arrastre este archivo a la biblioteca aplicaciones para SharePoint en el

explorador.
8. En el cuadro de diálogo ¿Confía...?, active la casilla Hacer que esta solución

esté disponible para todos los sitios de la organización y, a continuación,
seleccione Implementar.
9. Esto pondrá el elemento web SPFx a disposición de todas las colecciones de

sitios del inquilino, incluidas las que están detrás de un equipo de Microsoft Teams.
Tarea 4: Pruebe el elemento web en SharePoint y Microsoft Teams

Pruebe el elemento web SPFx en SharePoint:
1. En el explorador, vaya a una página de SharePoint moderna.
2. Seleccione el botón Editar en la parte superior derecha de la página.

3. Seleccione el icono (+) para abrir el cuadro de herramientas del elemento web
de SharePoint y busque el elemento web SPFx Teams Together:
4. El elemento web de SharePoint Framework se mostrará en la página.
Tarea 5: Probar el elemento web de SPFx en Microsoft Teams
1. Cree un nuevo equipo de Microsoft Teams.
a. Con el mismo explorador donde ha iniciado sesión en SharePoint

Online, vaya a https://teams.microsoft.com/. Cuando se le solicite, cargue el
cliente web.
b. Si no tiene ningún equipo en el inquilino, se le presentará el siguiente

cuadro de diálogo. De lo contrario, seleccione Unirse o crear un equipo en la
parte inferior de la lista de equipos.
c. En el cuadro de diálogo Crear equipo, seleccione Crear un equipo

desde cero.
d. En el cuadro de diálogo ¿Qué tipo de equipo será éste? ,

seleccione Público.
e. Cuando se le solicite, utilice el nombre Mi primer equipo.
2. Instale la aplicación Microsoft Teams como una nueva pestaña que expondrá el
elemento web de SharePoint Framework en Microsoft Teams:
a. Seleccione el equipo Mi primer equipo creado anteriormente.
b. Seleccione el canal General.
3. Agregue una pestaña personalizada al equipo mediante el elemento web SPFx:
a. En la parte superior de la página, seleccione el icono + en la navegación

horizontal.
b. En el cuadro de diálogo Agregar una pestaña, seleccione Más
aplicaciones.
c. Seleccione la opción Cargar una aplicación personalizada > Cargar

para ... en la lista de categorías de aplicaciones.
d. Seleccione el archivo ZIP de la aplicación microsoft teams creado

anteriormente. Este es el archivo que contiene manifest.json y dos archivos de
imagen.
Nota: Después de un momento, la aplicación aparecerá junto al nombre del inquilino.

Es posible que deba actualizar la página para que aparezca la aplicación si usa el
cliente de Microsoft Teams del explorador.
4. Seleccione la aplicación SpFx Teams Together.
5. En el cuadro de diálogo Equipos juntos de SPFx, seleccione Agregar a un

equipo.
6. En el cuadro de diálogo Seleccionar un canal para empezar a usar spfx

teams together, asegúrese de que el canal general está seleccionado y seleccione
Configurar una pestaña.
7. El siguiente cuadro de diálogo confirmará la instalación de la aplicación.
8. La aplicación ahora debe cargarse en Microsoft Teams dentro del

canal General en la pestaña SPFx Teams Together.
revisión
En este ejercicio, aprendió a crear una solución de SharePoint Framework (SPFx) que
funcionará tanto en SharePoint como como una pestaña en Microsoft Teams.
¡felicidades!
Ha completado correctamente lab 03 de MS-600T00A: Creación de aplicaciones y

soluciones con servicios principales de Microsoft 365. para marcar el laboratorio como
completo haga clic en Finalizar.
anteriorfin

Share Point

Cargado por

Copyright:

Formatos disponibles

Share Point

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Share Point

Cargado por

Copyright:

Formatos disponibles

Ejercicio 1: Introducción a SharePoint Framework (SPFx)

Tarea 1: configurar el entorno de desarrollo de SharePoint Framework

Asegúrese de que node.js está instalado y es la versión correcta admitida

1. Inicie sesión en MS600-VM para activar Ctrl+Alt+Supr para abrir la página de

2. Abra el símbolo del sistema de PowerShell ejecute el siguiente

3. Asegúrese de que la versión es Node.js v10.x y NO es 9.x ni 11.x (estos dos no

Instalar Yeoman y gulp

1. Desde el símbolo del sistema ejecute el siguiente comando: npm install -g yo

2. Desde el símbolo del sistema ejecute el siguiente comando: npm install -

Tarea 2: Creación de un elemento web del lado cliente de SharePoint

1. Desde el símbolo del sistema de PowerShell, cambie al directorio C:/LabFiles

2. Cree un nuevo directorio para los archivos de proyecto de SharePoint

3. Vaya al directorio de SharePoint recién creado ejecutando el siguiente

5. Vaya al directorio de SharePoint recién creado ejecutando el siguiente

6. Ejecute el generador de Yeoman de SharePoint ejecutando el siguiente

7. Utilice lo siguiente para completar el mensaje que se muestra:

Confiar en el certificado de desarrollador autofirmado

1. Desde el símbolo del sistema de PowerShell ejecute el siguiente comando: gulp

2. Después de aprovisionar las carpetas necesarias para el proyecto, el generador

3. La tarea gulp serve de SharePoint Framework compilará el proyecto, iniciará un

5. Seleccione el elemento web HelloWorld.

7. En el panel de propiedades que se abre, cambie el valor del

8. Vuelva a PowerShell y detenga el proceso en ejecución ejecutando Ctrl + C

9. Cuando se le pida que termine el tipo Y y pulse la tecla enter.

Tarea 3: prueba con el workbench de SharePoint local y hospedado

1. Abra el proyecto en Visual Studio Code ejecutando el siguiente

2. En la cinta de opciones Código de Visual Studio, seleccione Terminal > Nuevo

3. Ejecute el proyecto ejecutando el siguiente comando: gulp serve

4. Seleccione el botón de icono + elemento web para abrir la lista de elementos

5. Seleccione el elemento web HelloWorld.

6. Deje el proyecto en marcha. Vuelva al código de Visual Studio.

a. Busque el estilo con la clase styles.title y actualice cambie el título a

b. Guarde el proyecto y, a continuación, vuelva al explorador y observe los

8. A continuación, en el explorador, vaya a uno de los sitios de SharePoint Online

Nota: La diferencia entre el banco de trabajo local y hospedado es significativa. Tenga en

2. Tenga en cuenta que, después de guardar el archivo, mientras la consola

anteriorSiguiente: Ejercicio 3: Creación de extensiones...

Tarea 1: Crear una nueva solución SPFx y un elemento web

1. Inicie sesión en MS600-VM para activar Ctrl+Alt+Supr para abrir la página de

2. Desde el símbolo del sistema de PowerShell, cambie al

3. Cree un nuevo directorio para los archivos de proyecto de SharePoint

4. Vaya al directorio de SharePoint recién creado ejecutando el siguiente

5. Ejecute el generador de Yeoman de SharePoint ejecutando el siguiente

6. Utilice lo siguiente para completar el mensaje que se muestra:

8. En la cinta de opciones Código de Visual Studio, seleccione Terminal > Nuevo

9. Verifique que todo esté funcionando. Ejecute el siguiente comando para

10. Cuando el explorador cargue el área de trabajo local, seleccione el

11. Seleccione el elemento web HelloPropertyPane para agregar el elemento web

Tarea 2: Agregue nuevas propiedades al elemento web

1. Cree dos nuevas propiedades que se usarán en el elemento web y el panel de

a. Desde Visual Studio Code, abra el

b. Busque la interfaz IHelloPropertyPaneWebPartProps después de las

2. Actualice la representación de elementos web para mostrar los valores de estas

a. Dentro de la HelloPropertyPaneWebPart clase, busque

c. Agregue las dos líneas siguientes después de la línea que acaba de

d. Por el momento, el elemento web representará una cadena en blanco y

3. Establezca los valores de propiedad predeterminados:

b. Busque la siguiente sección en el

c. Agregue una coma después del valor de la propiedad description.

d. Agregue las dos líneas siguientes después de la propiedad description: