Comprendre la transformation de la mise en pageUnderstanding the layout transformation

Chaque page source transformée présente une certaine disposition, généralement une des dispositions prédéfinies prêtes à l’emploi proposées par SharePoint.Each source page that gets transformed does have a certain layout, typically one of the predefined layouts offered out-of-the-box by SharePoint. Lorsqu’une page est transformée en page moderne, cette dernière prend en charge la disposition de la page .When a page is transformed to a modern page the modern page will take over the layout of the source page. Les pages modernes cibles présentent des fonctionnalités de disposition différentes et dès lors, il apparaît important de comprendre la manière dont la mise en page source est mappée vers la mise en page cible.The target modern pages do have different layout capabilities, hence it's important to understand how the source page layout is mapped to the target page layout.

Mappage de mise en page de composant WebPartWeb Part page layout mapping

Mise en page sourceSource page layout Mise en page cibleTarget page layout
pleine page 1 colonne ligne1 column row
en-tête, colonne gauche, corps 1 colonne ligne + 2 colonne ligne gauche1 column row + 2 column row left
en-tête, colonne droite, corps 1 colonne ligne + 2 colonne ligne droite1 column row + 2 column row right
en-tête, pied de page, 3 colonnes 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 3 column row + 1 column row
en-tête, pied de page, 3 colonnes, 4 lignes 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 3 column row + 1 column row
en-tête, pied de page, 4 colonnes 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 3 column row + 1 column row
colonne gauche, en-tête, pied de page, ligne supérieure 1 colonne ligne + 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 1 column row + 3 column row + 1 column row
colonne droite, en-tête, pied de page, ligne supérieure 1 colonne ligne + 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 1 column row + 3 column row + 1 column row

Mappage de mise en page WikiWiki page layout mapping

Mise en page sourceSource page layout Mise en page cibleTarget page layout
pleine page 1 colonne ligne1 column row
2 colonnes 2 colonne ligne2 column row
2 colonnes gauche 2 colonne ligne gauche2 column row left
en-tête, 2 colonnes 1 colonne ligne + 2 colonne ligne1 column row + 2 column row
en-tête, 2 colonnes, pied de page 1 colonne ligne + 2 colonne ligne + 1 colonne ligne1 column row + 2 column row + 1 column row
3 colonnes 3 colonne ligne3 column row
en-tête, 3 colonnes 1 colonne ligne + 3 colonne ligne1 column row + 3 column row
en-tête, 3 colonnes, pied de page 1 colonne ligne + 3 colonne ligne + 1 colonne ligne1 column row + 3 column row + 1 column row

Mappage de disposition de page de publicationPublishing page layout mapping

Les pages de publication n’ayant pas de disposition fixe, le gestionnaire de présentation par défaut utilisé par le transformateur de page de publication fonctionne différemment. Il génère les lignes et colonnes nécessaires en fonction de la position des composants WebPart, telle que définie dans le fichier de mappage de disposition de page utilisé.As publishing pages do not have a fixed layout the default layout manager used by the publishing page transformator does work differently: it generates the needed rows and columns based upon the position of the web parts as defined in the used page layout mapping file. Ce comportement de disposition est défini par défaut sur AutoDetect dans le fichier de mappage à l’aide de l’attribut PageLayoutTemplate.This layout behavior is defined in the mapping file using the PageLayoutTemplate attribute, which defaults to AutoDetect. Si, pour une raison quelconque, vous n’aimez pas la génération de disposition automatique, vous pouvez également utiliser les types de disposition de page Wiki décrits précédemment.If for some reason you don't like the automatic layout generation you can also use the earlier described wiki page layout types.

<PageLayout Name="WelcomeLinks" AssociatedContentType="" PageLayoutTemplate="AutoDetect" PageHeader="Custom">

Remplacement de la transformation de disposition par défautOverriding the default layout transformation

Si pour une raison quelconque, vous souhaitez transformer des dispositions différemment, vous pouvez ajouter votre propre composant de transformation de disposition comme illustré dans l’extrait de code ci-dessous :If for some reason you want to transform layouts differently then you can plug in your own layout transformation component as is shown in below snippet:

public class MyLayout : ILayoutTransformator
{
  private ClientSidePage page;

  public MyLayout(ClientSidePage page)
  {
    this.page = page;
  }

  public void Transform(PageLayout layout)
  {
    // custom layout transformation...add sections to the target page based upon the recieved page layout
    switch (layout)
    {
        case PageLayout.Wiki_OneColumn:
        case PageLayout.WebPart_FullPageVertical:
        case PageLayout.Wiki_Custom:
        case PageLayout.WebPart_Custom:
            {
                page.AddSection(CanvasSectionTemplate.OneColumn, 1);
                return;
            }
        // add more incoming layouts...
        default:
            {
                page.AddSection(CanvasSectionTemplate.OneColumn, 1);
                return;
            }
    }
  }
}

ILayoutTransformator layoutOverride(ClientSidePage cp)
{
    return new MyLayout();
}

// Now use the custom layout transformator
PageTransformationInformation pti = new PageTransformationInformation(page)
{
    // If target page exists, then overwrite it
    Overwrite = true,
    // Callout to your custom layout handler
    LayoutTransformatorOverride = layoutOverride,
};

// Transform the page using the custom layout handled hooked up
pageTransformator.Transform(pti);