SharePoint Framework notes de publication de la version 1.14

Cette version introduit des mises à jour des fonctionnalités relatives à Microsoft Viva, Microsoft Teams et SharePoint.

Publication : 17 février 2022

Importante

Cette page traite des détails liés à une version SPFx spécifique. Cette page n’inclut pas la configuration SPFx requise supplémentaire qui doit être installée pour développer des solutions SPFx, notamment Node.js, Yeoman et d’autres outils.

Pour en savoir plus sur ces conditions préalables, voir Configuration de votre environnement de développement SharePoint Framework.

Mise à niveau de projets de la v1.13.1 vers la v1.14

1. Dans le fichier package.json du projet, identifiez SPFx packages v1.13.1. Pour chaque package SPFx :

   1. Désinstallez le package v1.13.1 existant :

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

   2. Installez le nouveau package v1.14 :

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

Conseil

La CLI pour Microsoft 365 fournit une procédure détaillée simple pour la mise à niveau de vos solutions vers la dernière version de SharePoint Framework.

Nouvelles fonctionnalités et fonctionnalités

Mises à jour de l’extension de carte adaptative pour Viva Connections

Mise à jour de la structure ACE pour Viva Connections

Mise à jour de la génération de modèles d’extensions de carte adaptative pour la rendre plus succincte.

Obtenir le ViewNavigator actuel pour l'extension de carte adaptative

BaseAdaptiveCardExtension.navigator

Si le courant renderType est Card revient alors BaseAdaptiveCardExtension.cardNavigator. Si le courant renderType est QuickView revient alors BaseAdaptiveCardExtension.quickViewNavigator.

Mises à jour de l'ensemble de commandes d'affichage de liste

Informer ListView des modifications apportées au jeu de commandes

BaseListViewCommandSet.raiseOnChange: () => void

Utilisez cette méthode pour déclencher un onChange événement et initialiser une redistribution de ListView.

État de l'accesseur de la vue de liste étendue

ListViewAccessor fournit l'état développé de la vue de liste actuelle. Les nouvelles propriétés de l'État sont répertoriées ci-dessous.

• rows – lignes actuellement rendues dans la vue de liste.
• selectedRows – lignes sélectionnées dans la vue de liste.
• list – informations de base sur la liste rendue par la vue de liste.
• view – informations de base sur la vue rendue par la vue de liste.
• folderInfo – informations de dossier pour la vue de liste.
• appliedFilters – filtres appliqués à la vue de liste.
• sortField – nom du champ de tri.
• sortAscending – spécifie si la vue de liste est triée par ordre croissant ou décroissant.

Événement de modification de l'état de la vue de liste

ListViewAccessor.listViewStateChangedEvent: SPEvent<ListViewStateChangedEventArgs>

Cet événement est déclenché chaque fois que l'état de la vue de liste change. Les arguments contiennent le type d’événement qui s’est produit (voir ListViewAccessorStateChanges) et l’état précédent de l’affichage liste (voir IListViewAccessorState).

List Command Set Command Disabled Property

Command.disabled: boolean | undefined;

Mises à jour spécifiques du composant WebPart

Groupe de sélecteurs de composants WebPart prédéfinis pour les composants WebPart en développement

PredefinedGroup.Local = '8b7bf6f1-a56a-4aa3-8657-7eb6e7e6af61';

Le groupe affiche les composants WebPart débogués localement.

Rappel vers l’élément Clear DOM avant l’affichage de l’indicateur de chargement ou de l’élément Error

IClientSideWebPartStatusRenderer.displayLoadingIndicator(domElement: Element, loadingMessage: string, timeout?: number, clearDomElementCallback?: ClearDomElementCallback): void;
IClientSideWebPartStatusRenderer.renderError(domElement: HTMLElement, error: Error | string, clearDomElementCallback?: ClearDomElementCallback);

Utilisez clearDomElementCallback pour effacer le nœud DOM.

Méthode de cycle de vie de l’élément Web Part pour les modifications de thème

BaseClientSideWebPart.onThemeChanged(theme: IReadonlyTheme | undefined): void;

Lorsqu’un thème est initialisé ou modifié sur une page, il est onThemeChanged appelé avec le nouveau thème.

Importante

render ne doit pas être appelé dans onThemeChanged . renderL’appel peut entraîner un nouveau flux imprévisible du partie Web. render sera appelé automatiquement si nécessaire.

Modèles de partie Web Part mis à jour

• Aucune infrastructure et les modèles React sont mis à jour à l’aide d’une nouvelle interface utilisateur conviviale
• Un nouveau modèle « Minimal » est ajouté : permet de commencer le développement avec la quantité minimale de code mise en service.

Autres mises à jour et modifications génériques

Modifications apportées aux options et invites de la échafaudage

Les invites suivantes ont été supprimées en faveur de leurs valeurs par défaut :

• Description de la solution
• Version d'environnement (SharePoint)
• Déploiement à l'échelle du locataire
• Autorisations isolées
• Description du composant

Détecter si un composant est en cours de chargement à partir du localhost

BaseComponentContext.isServedFromLocalhost(): boolean;

Tout SPFx composant peut maintenant vérifier s’il est en cours d’exécution à partir du code servi localement.

Masquer un nom de groupe du volet de propriétés

IPropertyPaneGroup.isGroupNameHidden?: boolean;

isGroupNameHidden permet d’ignorer le rendu du nom de groupe du volet de propriétés pour éviter l’affichage d’un en-tête de groupe vide.

La valeur par défaut isGroupNameHidden est False.

Propriété ipAddress dans serve.json

Une nouvelle propriété ipAddress a été ajoutée à serve.json la configuration. Ce paramètre est utile lors de l'utilisation de conteneurs Docker. Par exemple, pour définir l'hôte de service sur '0.0.0.0'. Cette propriété sera explicitement utilisée pour mettre fin au serveur, ce qui signifie que toutes les URL de débogage et les configurations webpack ne seront pas affectées.

Fonctionnalités et produits en préversion

Les fonctionnalités suivantes se trouvent encore dans l’état de préversion dans le cadre de la version 1.14 et ne doivent pas être utilisées en production. Nous cherchons à les publier officiellement dans le cadre de la prochaine version 1.15.

Mise en cache de l’affichage carte Extensions de carte adaptative

Pour améliorer les performances, SPFx prend désormais en charge la mise en cache locale des vues de carte de votre extension de carte adaptative. La vue de carte mise en cache est immédiatement rendue lors du chargement de votre extension de carte adaptative. Après le chargement de votre extension de carte adaptative, elle peut éventuellement mettre à jour l’affichage de carte.

interface ICacheSettings {
  /**
   * Whether cache is enabled. Default: true
   */
  isEnabled: boolean;
  /**
   * Expiry time in seconds. Default: 86400 seconds (24 hours)
   */
  expiryTimeInSeconds: number;

  /**
   * Returns the Card View used to generate the cached card.
   * By default, the currently rendered Card View will be used to cache the card.
   */
  cachedCardView?: () => BaseCardView;
}
BaseAdaptiveCardExtension.getCacheSettings(): Partial<ICacheSettings>;

Par défaut, la mise en cache est activée avec les paramètres par défaut. Une extension de carte adaptative peut personnaliser ses paramètres de cache en la substitution pour renvoyer les getCacheSettings paramètres qu’elle souhaite remplacer.

Lorsque le dernier affichage de carte connu ne doit pas être mis en cache, vous pouvez fournir un affichage de carte spécifique à mettre en cache et à afficher sur la page suivante. ICacheSettings.cachedCardView Cette vue de carte n’a pas besoin d’être inscrite précédemment.

Une extension de carte adaptative peut également mettre en cache localement son état actuel. Par défaut, aucun statut n’est mis en cache.

BaseAdaptiveCardExtension.getCachedState(state: TState): Partial<TState>;

Si elle est prépondérante, les valeurs mises en cache seront fournies lors de l’initialisation de l’extension de carte adaptative lors du getCachedState chargement de page suivant.

onInit a une nouvelle surcharge, qui transmet des informations sur le statut de la carte mise en cache. Si la carte n’a pas été chargée à partir d’un affichage de carte mis en cache, cachedLoadParameters ce sera undefined .

interface ICachedLoadParameters {
    state: TState;
}
BaseAdaptiveCardExtension.onInit(cachedLoadParameters?: ICachedLoadParameters): Promise<void>;

L’état initial de votre extension de carte adaptative peut être lancé à partir de l’état mis en cache. Le statut mis en cache peut également être utilisé pour déterminer si une autre logique doit être exécutée.

La mise en cache de statut et le délai d’expiration du cache peuvent être utilisés pour déterminer quand des appels distants coûteux doivent être effectués par l’extension de carte adaptative.

La mise en cache peut aider à améliorer considérablement les performances perçues pour votre extension de carte adaptative.

Méthode du gestionnaire d'erreurs. Cette méthode sera invoquée lorsqu'une action génère une erreur

BaseView.onActionError(error: IActionErrorArguments): void

Remplacez cette méthode pour gérer les erreurs des actions de la carte adaptative.

Nouveaux types d'action pour les médias et la géolocalisation.

Remarque

Ces nouvelles actions ne sont actuellement disponibles que dans le navigateur. Viva Connections ordinateur de bureau et Viva Connections la prise en charge mobile seront activées ultérieurement.

Après la disponibilité générale, la matrice de support pour les actions ressemblera à :

Action	Viva Connection Desktop	Viva Connections Mobile	Navigateur
Sélectionner média	Pris en charge	Pris en charge	Pris en charge
Obtenir l’emplacement	Non pris en charge	Pris en charge	Pris en charge
Afficher l'emplacement	Non pris en charge	Pris en charge	Pris en charge

ISPFxAdaptiveCard.actions?: (
    | ISubmitAction
    | IOpenUrlAction
    | IShowCardAction
    | ISelectMediaAction // Raise a file picker or native media picker
    | IGetLocationAction // Get a location
    | IShowLocationAction // Show a location on a map
)[];

L'action SelectMedia and Location peut être configurée comme indiqué ci-dessous :

  actions: [
    {
      type: 'VivaAction.SelectMedia',
      id: 'Select File',
      parameters: {mediaType: MediaType.Image, allowMultipleCapture: true, maxSizePerFile : 200000, supportedFileFormats: ['jpg']},
      title: 'Select File'
    },
    {
      type: 'VivaAction.GetLocation',
      id: 'Get Location',
      parameters: {chooseLocationOnMap: true}
    }
    {
      type: 'VivaAction.ShowLocation',
      id: 'Show Location',
      parameters: parameters: {locationCoordinates: {latitude: 40, longitude: 40}}
    }
  ]

Les actions seront affichées comme ci-dessous

Action d’emplacement :

Sélectionnez Action multimédia :

L’action d’emplacement peut être utilisée pour obtenir votre localisation géographique actuelle, afficher votre emplacement actuel ou personnalisé sur une carte et choisir votre localisation géographique actuelle sur une carte. Dans le navigateur, il utilise Bing Cartes comme interface de mappage :

L’action Sélectionner un média peut être utilisée pour sélectionner des images à partir de votre appareil natif. Dans le navigateur, elle utilise le sélectionneur de fichiers pour faciliter l’accès aux fichiers pertinents :

API Assistant d’image

La classe statique ImageHelper (dans @microsoft/sp-image-helper) a été ajoutée pour permettre aux développeurs SPFx d’accéder au runtime pour :

• URL des images miniatures générées automatiquement des pages et des documents stockés dans SharePoint
• Url plus optimisées pour les images stockées dans SharePoint

En savoir plus : API de l’Assistance d’images

Dépréciations et éléments supprimés dans cette version

Importante

Toute solution existante qui utilise des API supprimées continuera de fonctionner sans problème. La suppression signifie que vous ne pouvez pas créer de nouvelles solutions qui utilisent ces API.

• API dépréciées de @microsoft/sp-listview-extensibility :
  • BaseListViewCommandSet.onListViewUpdated
• API dépréciées de @microsoft/sp-core-library
  • EnvironmentType.Local
• Suppression des API supprimées de @microsoft/sp-http
  • GraphHttpClient
  • GraphHttpClientConfiguration
  • GraphHttpClientResponse
  • IGraphHttpClientConfiguration
  • IGraphHttpClientConfigurations
  • IGraphHttpClientOptions
• Api d’aperçu supprimées de @microsoft/sp-webpart-base
  • ISDKs.office
  • IOffice

Problèmes résolus

Période novembre-février

• #5131 – Les jetons de thème dans les fichiers SCSS dans SPFx 1.10.0 ne fonctionnent plus
• #4808 – SPFX et réagir-dnd
• #4587 – Les sections d'arrière-plan seront-elles prises en charge dans les composants WebPart isolés du domaine (fonctionnalité disponible pour spfx 1.8.2 sur les services)
• #4550 – La page d'application en une seule partie n'empêche pas la navigation lorsqu'il y a des modifications non enregistrées
• #5098 - this.context.propertyPane.open() s'ouvre dans l'iframe sur des composants WebPart isolés
• #5227 – La navigation QuickLaunch (pour SinglePageWebParts) échoue
• #6779 – Les personnalisateurs d'application apparaissent dans l'onglet d'équipe "Listes" après avoir ajouté un élément à la liste
• #5787 – Vérifiez l'autorisation Fullmask et le Bitwise JS
• #872 – SPFx : impossible d'afficher les erreurs d'installation
• #6253 - pageContext ne s'actualise pas dans les personnalisateurs d'application sur la navigation en ligne
• #6102 – La section de composant WebPart à fond perdu ne rend pas les icônes
• #7536 – Lien profond des équipes ACE ne naviguant pas vers un onglet spécifique
• #6343 – L'aperçu n'est pas affiché pour le composant WebPart en mode page unique
• #7079 - Guid.tryParse() ne fonctionne pas
• #7558 - Le projet SPFx v1.13.1 par défaut recommande une extension VSCode déconseillée inutile &
• #6854 – L'appel clearLoadingIndicator supprime l'intégralité du WebPart
• #3219 – L'ajout d'un personnalisateur d'application à un projet de composant WebPart existant empêche le déploiement des composants WebPart
• #3830 – "La partie spécifiée n'existe pas dans le package" lors de la mise en service de docx dans elementFiles
• #3840 – Désolé, quelque chose s'est mal passé lors du déploiement d'actifs à partir de spfx
• #4294 - isGroupNameHidden exclus de ce type de version
• #4680 – SPFx 1.9.1, office-ui-fabric-react et sp-property-pane
• #6232 – L'obtention d'erreurs <div> ne peut pas être imbriquée <p> lors de l'examen des données du composant WebPart dans l'environnement de test de l'atelier
• #7386 – La construction échoue lorsqu'elle est définie skipFeatureDeployment sur true
• #7691 - 1.13.1 TypeError : impossible de lire la propriété « toJson » d’un type non définie lors du regroupement/utilisation d’un projet de grande taille