SharePoint | Modificando el diseño en modo edición o vista

Es habitual en SharePoint tener que realizar ajustes en la vista de edición cuando estamos aplicando branding y creando Page Layouts, Masterpage, etc. Lo normal en un maquetador es que aplique estilos según los nuevos elementos en pantalla pero, a veces resulta tedioso y provoca tener que escribir gran cantidad de estilos y selectores para cosas muy simples.

Solución

Conociendo un poco las “herramientas” que aporta SharePoint dentro de los controles que expone por defecto, podemos realizar esta tarea de una forma mucho más sencilla simplemente haciendo uso de EditModePanel que nos valdrá tanto para mostrar elementos en vista edición como para el modo vista.

Modo edición

Como ejemplo voy a aplicar una hoja de estilos adicional en el modo edición de un layout

<Publishing:EditModePanel runat="server" id="editmodestyles">
    <link rel="stylesheet" href="/_layouts/15/MyCompany/edit-mylayout.min.css" />
</Publishing:EditModePanel&gt;

Hay que tener en cuenta que es necesario que el espacio de nombres “Publishing” esté definido en la cabecera del Page Layout

<%@Register TagPrefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"/>

Con esto, en el Page Layout correspondiente se aplicarán las reglas de estilos contenidas en “edit-mylayout.min.css” sólo cuando la página se encuentre en modo edición.

Modo vista

En el caso del modo vista, sólo será necesario añadirle el atributo PageDisplayMode=»Display» al control EditModePanel y ya podremos tener estilos definidos sólo para el modo vista.

<Publishing:EditModePanel runat="server" id="editmodestyles" PageDisplayMode="Display">
    <link rel="stylesheet" href="/_layouts/15/MyCompany/view-mylayout.min.css" />
</Publishing:EditModePanel>

Nuevamente, recordar que el espacio de nombres Publishing debe estar definido.

Otros usos

Esto no sólo se limita a permitirnos añadir estilos cuando los necesitemos sino que, además, también podemos incluir otros controles como inputs, controles ASP.NET, controles de SharePoint, Web Parts, etc… a nuestro gusto siempre y cuando esté permitido dentro del page layout con lo que se convierte en algo muy potente.

Un ejemplo, mostrar sólo en modo vista el rating de una página.

Enjoy coding!!