Información sobre la transformación de diseños

Cada página de origen que se transforma tienen un diseño determinado, normalmente uno de los diseños predefinidos ofrecidos de fábrica por SharePoint. Cuando una página se transforma en una página moderna, la página moderna reemplazará el diseño de la página de origen. Las páginas moderna de destino tienen distintas capacidades de diseño, por lo que es importante comprender cómo se asigna el diseño de página de origen al diseño de página de destino.

Asignación de diseño de página de elemento web

Diseño de página de origen Diseño de página de destino
Diagrama que muestra la fila de la columna superior de una pantalla. fila de 1 columna
encabezado, columna izquierda, cuerpo fila de 1 columna + fila de 2 columnas a la izquierda
encabezado, cuerpo de columna derecha fila de 1 columna + fila de 2 columnas a la derecha
encabezado, pie de página, 3 columnas fila de 1 columna + fila de 3 columnas + fila de 1 columna
encabezado, pie de página, 3 columnas, 4 filas fila de 1 columna + fila de 3 columnas + fila de 1 columna
encabezado, pie de página, 4 columnas fila de 1 columna + fila de 3 columnas + fila de 1 columna
columna izquierda, encabezado, pie de página, fila superior fila de 1 columna + fila de 1 columna + fila de 3 columnas + fila de 1 columna
columna derecha, encabezado, pie de página, columna superior fila de 1 columna + fila de 1 columna + fila de 3 columnas + fila de 1 columna

Asignación de diseño de página wiki

Diseño de página de origen Diseño de página de destino
Captura de pantalla del texto de una columna junto a un icono de una columna. fila de 1 columna
2 columnas fila de 2 columnas
2 columnas a la izquierda fila de 2 columnas a la izquierda
encabezado, 2 columnas fila de 1 columna + fila de 2 columnas
encabezado, 2 columnas, pie de página fila de 1 columna + fila de 2 columna + fila de 1 columna
3 columnas fila de 3 columnas
encabezado, 3 columnas fila de 1 columna + fila de 3 columnas
encabezado, 3 columnas, pie de página fila de 1 columna + fila de 3 columnas + fila de 1 columna

Asignación de diseño de página de publicación

Dado que las páginas de publicación no tienen un diseño fijo el administrador de diseño predeterminado que usa el transformador de la página de publicación funciona de forma distinta: genera las filas y columnas en función de la posición de los elementos web, según se define en el archivo de asignación de diseño de página utilizado. Este comportamiento de diseño se define en el archivo de asignación mediante el atributo PageLayoutTemplate que se establece de forma predeterminada como AutoDetect. Si por algún motivo no le gusta la generación de diseños automática también puede usar los tipos de diseño de página de wiki descritos antes.

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

Reemplazo de la transformación de diseño predeterminada

Si por algún motivo desea transformar diseños de forma diferente, puede conectar su propio componente de transformación de diseño tal como se muestra en el siguiente fragmento de código:

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);
  • Last updated on