Notas de la versión de SharePoint Framework v1.8.0

Publicaremos documentación más actualizada y vídeos de orientación durante los próximos días y semanas. Sus comentarios sobre los recursos y temas necesarios son más que bienvenidos.

Publicado: 14 de marzo de 2019

Importante

En esta página se tratan los detalles relacionados con una versión específica de SPFx. Esta página no incluye requisitos previos de SPFx adicionales que deben instalarse para desarrollar soluciones SPFx como Node.js, Yeoman y otras herramientas.

Para obtener más información acerca de estos requisitos previos, vea Configurar el entorno de desarrollo de SharePoint Framework.

Actualizar proyectos desde v1.7.1 a v1.8.0

1. En el archivo package.json del proyecto, identifique todos los paquetes de SPFx v1.7.1. Para cada paquete de SPFx:

   1. Desinstale el paquete v1.7.1 existente:

      npm uninstall @microsoft/{spfx-package-name}@1.7.1
      

   2. Instale el paquete v1.8.0 actualizado:

      npm install @microsoft/{spfx-package-name}@1.8.0.0 --save --save-exact
      

2. Asegúrese de que hay una entrada en ladevDependency sección de package.json que haga referencia a "@microsoft/sp-tslint-rules": "1.8.0".

3. Agregue un paquete @microsoft/rush-stack-compiler-x-x como en devDependencypackage.json. Consulte la sección Compatibilidad con TypeScript 2.7, 2.9 y 3.x (Disponibilidad general) para obtener más información sobre la versión correcta a usar.

4. Actualice el archivo tsconfig.json para ampliar la configuración de TypeScript para la versión de la @microsoft/rush-stack-compiler-x-x. Para ello, modifique la parte superior del archivo como se indica a continuación:

   • Para @microsoft/rush-stack-compiler-2-7, la parte superior del archivo tsconfig.json tendría un aspecto similar al de

     {
        "extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json",
        "compilerOptions": { // ommitted for brevity }
     }
     

   • Para @microsoft/rush-stack-compiler-3-3, la parte superior del archivo tsconfig.json tendría un aspecto similar al de

     {
        "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
        "compilerOptions": { // ommitted for brevity }
     }
     

5. Corrija todos los errores de tslint nuevos e interesantes que ahora se generan con un compilador más reciente. En el caso de proyectos grandes, esto puede tardar un poco. El comportamiento predeterminado de los compiladores de TypeScript es cada vez más estricto, pero su código será mejor por ello.

Sugerencia

La CLI para Microsoft 365 proporciona una guía paso a paso sencilla para actualizar las soluciones a la última versión de SharePoint Framework.

Nuevas características y funciones

Desarrollo de SPFx para pestañas de Teams (Disponibilidad general)

Las soluciones de pestañas de Teams que usan SPFx ahora son totalmente compatibles. Agregue TeamsTab a la propiedad supportedHosts en el manifiesto del elemento web e impleméntela en el catálogo de aplicaciones. Desde allí, puede elegir la solución y hacer clic en el botón "Sincronizar con Teams". El elemento web aparecerá ahora como una aplicación en Teams. Cuando un elemento web se hospeda en una pestaña de Teams, tendrá acceso al SDK de Teams a través del contexto del elemento web. Con respecto a la versión beta de la versión 1.7 hay los siguientes cambios:

• Las configuraciones iniciales y futuras se controlan mediante el Panel de propiedades
• La propiedad del manifiesto canUpdateConfiguration se puede establecer en false para deshabilitar la configuración después de la configuración inicial.
• Se ha reducido la sobrecarga de JavaScript para hospedar el elemento web.
• Función "Sincronizar con Teams" para automatizar la creación y carga de manifiestos en Teams
• Actualizar teams-js a v1.4.1
• La configuración regional está controlada por la configuración regional de Teams actual

Más información sobre:

• Creación de pestañas de Microsoft Teams con SharePoint Framework
• Creación de la pestaña de Microsoft Teams con SharePoint Framework: tutorial
• Crear el manifiesto de Microsoft Teams manualmente para un elemento web e implementarlo en Microsoft Teams

Páginas de aplicación (Disponibilidad general)

A menudo recibimos solicitudes para tener un marco de aplicación de página única en SPFx. Esperamos que las páginas de aplicación cumplan la mayoría de los objetivos de las SPA, mientras proporcionan un modelo de desarrollo y una experiencia de usuario similares. Las páginas de aplicación son un nuevo diseño de página moderno de SharePoint, que hospeda un único elemento web en toda la página y mantiene la apariencia (navegación, encabezado, tema, etc.) de forma coherente. Al agregar SharePointFullPage a la propiedad supportedHosts del manifiesto del elemento web, se agregará una página de aplicación con la opción de elemento web al crear una nueva página.

El elemento web se puede configurar (a menos que la propiedad canUpdateConfigurationsea false), pero no se puede modificar el contenido o el diseño de página. La creación por el usuario final de las páginas de la aplicación debe implementarse a finales de este mes con la nueva experiencia de creación de páginas. Mientras tanto, hay una página estática (ubicada en _layouts/15/appPageHost.aspx?componentId=yourComponentGuidHere) que hospedará cualquier componente en una página de la aplicación. Esta página se está implementando ahora y debería estar disponible en el momento del lanzamiento, o un día o dos más tarde, según el inquilino.

Más información sobre:

• Usar páginas de aplicación de elemento único en SharePoint Online

Elementos web aislados de dominio (Disponibilidad general)

Los componentes de SPFx que se ejecutan dentro de la página actual son sencillos y rápidos. Sin embargo, hay escenarios en los que se quiere un mayor nivel de aislamiento. Los elementos web aislados de dominio se ejecutan en un iframe con un dominio independiente, que puede tener permisos diferentes de la página host. Esto permite, por ejemplo, que un elemento web tenga acceso al correo electrónico del usuario actual sin dar el mismo nivel de acceso a todo el código que se ejecuta en el inquilino.

El dominio y su aplicación de AAD se crean y administran para el inquilino: el administrador de inquilinos tendrá que aprobar los permisos solicitados por la solución. Para los usuarios finales, el elemento web tiene el aspecto y el comportamiento de cualquier otro elemento web. En este momento, los elementos web aislados por dominio solo admiten datos dinámicos en el contexto de página. La comunicación completa de un elemento a otro se producirá en una actualización futura.

Más información sobre:

• Elementos web aislados

Componentes de biblioteca (Vista previa de desarrollador)

Ahora puede crear bibliotecas a las que puedan hacer referencia otros componentes de SPFx. Son un poco difíciles de usar, por lo que publicaremos un documento independiente que las describa con más detalle. El truco es que debe publicar la biblioteca en una fuente npm (interna está bien) para consumirla.

Más información sobre:

• Usar el tipo de componente de biblioteca en SharePoint Framework
• Creación de soluciones con el tipo de componente de biblioteca en SharePoint Framework

Compatibilidad con TypeScript 2.7, 2.9 y 3.x (Disponibilidad general)

En esta versión, hemos realizado el trabajo para separar la versión de TypeScript de la versión de SPFx que usa. Ahora puede especificar la versión de TypeScript que desea usar independientemente del propio sistema de compilación. Puede usar cualquier compilador enumerado aquí: https://www.npmjs.com/search?q=%40microsoft%2Frush-stack-compiler.

Nota:

El compilador que use debe reflejarse en el archivo tsconfig.json, con una referencia a "extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json", que coincida con la versión del compilador rush-stack-compiler que incluya.

Hemos observado en el último momento que algunas de las versiones recientes de los paquetes @microsoft/rush-stack-compiler no funcionan correctamente. Si encuentra que la instalación de npm proporciona advertencias sobre las dependencias del mismo nivel para TypeScript y la compilación produce un error con las quejas de no encontrar un compilador, use una versión anterior del paquete.

Las siguientes versiones del @microsoft/rush-stack-compiler deben usarse con la versión de TypeScript correspondiente.

• TypeScript v2.7
  • @microsoft/rush-stack-compiler-2.7@0.5.7
• TypeScript v2.9
  • @microsoft/rush-stack-compiler-2.9@0.6.8
• TypeScript v3.0
  • @microsoft/rush-stack-compiler-3.0@0.5.9
• TypeScript v3.3
  • @microsoft/rush-stack-compiler-3.3@0.1.6

Tema de variantes de elementos web en páginas modernas de SharePoint

Las páginas modernas de SharePoint publicaron recientemente una característica para tener colores de fondo de sección. Los elementos web pueden actualizar sus temas para reflejar el color de fondo sobre el que se representa el elemento web. Establecer la propiedad supportsThemeVariants en el manifiesto del elemento web en true deshabilitará el comportamiento predeterminado de representar siempre un fondo blanco.

A continuación, los elementos web pueden usar el ThemeProvider de SPFx para recibir notificaciones de los cambios de color de fondo.

Más información sobre:

• Soporte para fondos de sección

Cambios en esta versión

Se quitó el código propertypane de @microsoft/sp-webpart-base

Vamos a mover el código del panel de propiedades a otro paquete (@microsoft/sp-property-pane) que contiene toda la lógica del panel de propiedades que existía anteriormente en @microsoft/sp-webpart-base. Las soluciones que se ejecutan actualmente seguirán funcionando (reenviaremos las llamadas correctamente), pero las API del panel de propiedades públicas de la @microsoft/sp-webpart-base están en desuso en SPFx v1.8 y se quitarán en la versión 1.9 de SPFx.

Sus cambios de código solo necesitan cambiar el paquete importado. Tienen exactamente los mismos tipos y firmas, pero se encuentran en un paquete diferente. Esto nos permite cargar únicamente el código del panel de propiedades (y todos sus paquetes dependientes) solo cuando sea necesario.

Desuso y elementos quitados en esta versión

Consumo de CSS de Fabric heredado

Desde el lanzamiento de SPFx v1.0, hemos agregado una serie de CSS de Fabric a la página. Aunque hemos cambiado el funcionamiento de CSS de Fabric desde entonces, seguimos agregando la versión anterior de CSS de Fabric a la página. Esto acabó añadiendo una gran cantidad de CSS innecesarios. A partir de SPFx 1.8.0, las soluciones ya no cargarán el CSS de Fabric antiguo.

Si la solución aún necesita el comportamiento anterior a 1.8.0, agregue ”loadLegacyFabricCss”: true al manifiesto del componente.

Si los estilos no funcionan correctamente después de actualizar a la versión 1.8.0, es posible que tenga que cambiar esta configuración.

En su lugar, su solución puede importar la hoja de estilos Fabric.css de la siguiente manera:

import 'office-ui-fabric-react/dist/css/fabric.css';

Problemas y limitaciones conocidos

La nueva experiencia del usuario final para crear páginas de la aplicación depende de la nueva experiencia Agregar una página en páginas modernas. Esto se está implementando ahora, pero el lanzamiento en el inquilino puede tardar unos días.

Como se mencionó en la sección de compatibilidad con TypeScript, algunas de las compilaciones más recientes del @microsoft/rush-stack-compiler que usamos tienen problemas. Las versiones anteriores funcionan. Publicaremos actualizaciones y notificaciones cuando se solucione este problema.

El modelo hospedado por el proveedor actualizado para hospedar soluciones de Microsoft Teams en SharePoint Online (con el SDK de Teams) todavía está en versión preliminar.

La compatibilidad de datos dinámicos con elementos de dominio aislados se limita al origen de datos de contexto de página. La compatibilidad completa con los datos dinámicos a través del límite de iFrame se incluirá en una actualización futura.