Utilisation des composants WebPart avec la colonne pleine chasse

Les pages SharePoint modernes prennent en charge les mises en page qui permettent aux utilisateurs d'organiser les informations qu'ils présentent sur leurs pages. Les utilisateurs peuvent choisir parmi un certain nombre de dispositions de sections différentes, telles que deux colonnes, trois colonnes ou un tiers de colonne. Les pages modernes des sites de communication offrent une disposition de section supplémentaire nommée Colonne pleine largeur. Cette mise en page s'étend sur toute la largeur de la page sans marge horizontale ni remplissage. Les composants WebPart SharePoint Framework peuvent être placés dans n'importe quelle disposition, mais en raison d'exigences supplémentaires, les composants WebPart doivent explicitement activer la prise en charge de la colonne pleine largeur.

Configuration requise de mise en page pour la colonne pleine chasse

Les mises en page habituelles des pages SharePoint modernes ont en commun une largeur maximale. Pour garantir la facilité de lecture et d'utilisation, le corps d'une page moderne ne s'étend pas au-delà d'une certaine largeur. Lorsque vous créez des composants Web qui seront utilisés dans des mises en page normales, vous testez la largeur de votre composant Web par rapport aux contraintes de largeur maximale et minimale connues afin de vous assurer qu'ils s'affichent correctement.

Toutefois, lorsque vous travaillez avec la disposition en colonne pleine largeur, les choses se compliquent un peu, car cette disposition s'étend sur toute la largeur de la page. Lorsqu'elle est affichée sur un écran ultra-large, la colonne pleine largeur peut même atteindre quelques milliers de pixels de large. Cela introduit des exigences de test supplémentaires que vous devez prendre en compte lorsque vous créez des composants Web pouvant être utilisés dans une colonne pleine largeur.

Activation de la prise en charge de la colonne pleine chasse

Par défaut, les composants WebPart côté client de SharePoint Framework ne peuvent pas être placés dans des dispositions de colonnes pleine largeur. Pour permettre aux utilisateurs d'ajouter votre composant WebPart à des colonnes pleine largeur, dans le manifeste du composant WebPart (le *fichier .manifest.json à côté du *fichier.ts du composant WebPart), définissez la supportsFullBleedpropriété sur true.

{
  //...

  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    //...
  }]
}

Lorsque ce paramètre est activé, lorsque vous modifiez une page avec un format de colonne pleine chasse, votre composant WebPart apparaît parmi les composants WebPart qui peuvent être ajoutés à la colonne.

Composant WebPart côté client SharePoint Framework personnalisé affiché parmi les composants WebPart qui peuvent être ajoutés à un format de colonne pleine chasse

Notes

Le banc d'essai SharePoint ne prend pas en charge le test des composants Web dans la disposition en colonnes pleine largeur. Vous devrez donc déployer votre composant Web vers un locataire développeur, créer un site de communication et y tester votre composant Web.