Noções básicas sobre a transformação de layout

Cada página de origem que é transformada tem um determinado layout, geralmente um dos layouts predefinidos oferecidos prontos pelo SharePoint. Quando uma página é transformada em uma página moderna, esta página moderna assumirá o layout de página de origem. As páginas modernas de destino têm recursos layout diferentes, por isso, é importante compreender como o layout da página de origem é mapeado para o layout de página de destino.

Mapeamento de layout de página da Web Part

Layout da página de origem Layout da página de destino
Diagrama mostrando a linha de coluna superior de uma tela. 1 linha de coluna
cabeçalho, coluna à esquerda, corpo 1 linha de coluna + 2 linhas de colunas à esquerda
cabeçalho, corpo de coluna à direita 1 linha de coluna + 2 linhas de colunas à direita
cabeçalho, rodapé, 3 colunas 1 linha de coluna + 3 linhas de colunas+ 1 linha de coluna
cabeçalho, rodapé, 3 colunas, 4 linhas 1 linha de coluna + 3 linhas de colunas+ 1 linha de coluna
cabeçalho, rodapé, 4 colunas 1 linha de coluna + 3 linhas de colunas+ 1 linha de coluna
coluna à esquerda, cabeçalho, rodapé, linha superior 1 linha de coluna + 1 linha de coluna + 3 linhas de colunas + 1 linha de coluna
coluna à direita, cabeçalho, rodapé, linha superior 1 linha de coluna + 1 linha de coluna + 3 linhas de colunas + 1 linha de coluna

Mapeamento de layout de página wiki

Layout da página de origem Layout da página de destino
Captura de tela do Texto de uma coluna ao lado de um ícone de uma coluna. 1 linha de coluna
2 colunas 2 linhas de colunas
2 colunas à esquerda 2 linhas de colunas à esquerda
cabeçalho, 2 colunas 1 linha de coluna + 2 linhas de colunas
cabeçalho, 2 colunas, rodapé 1 linha de coluna + 2 linhas de colunas+ 1 linha de coluna
3 colunas 3 linhas de colunas
cabeçalho, 3 colunas 1 linha de coluna + 3 linhas de colunas
cabeçalho, 3 colunas, rodapé 1 linha de coluna + 3 linhas de colunas+ 1 linha de coluna

Mapeamento de layout de página de publicação

Como as páginas de publicação não têm um layout fixo, o gerenciador de layout padrão usado pelo transformador de página de publicação funciona de maneira diferente: ele gera as linhas e colunas necessárias com base na posição das web parts, como definido no arquivo de mapeamento de layout de página usado. Esse comportamento de layout é definido no arquivo de mapeamento usando o atributo PageLayoutTemplate, cujo padrão é AutoDetect. Se por algum motivo você não gostar da geração automática de layout, também poderá usar os tipos de layout de página wiki descritos anteriormente.

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

Substituir a transformação de layout padrão

Se, por algum motivo, você quiser transformar os layouts de maneira diferente, será possível conectar seu próprio componente de transformação de layout, conforme mostrado no snippet abaixo:

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);