Branding

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

poster-wide

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!!

Codemotion 2015 | Resumen de mis sesiones sobre Branding y Universal Windows Platform Apps con Machine Learning

posterUn año más, Codemotion ha sido uno de los mayores eventos sobre tecnolgías de desarrollo de software de España y, este año, me ha tocado el privilegio de participar por partida doble con sesiones sobre Branding en SharePoint (Online y OnPremises) y sobre Aspectos útiles de Machine Learning en Universal Windows Platform Apps. Además, como siempre, Microsoft ha participado muy activamente arropando a los que íbamos a hablar sobre tecnologías .NET y relacionadas así como ofreciendo a todos los asistentes la posibilidad de pasarse por una amplia zona de entretenimiento y networking en la que se podía contactar con cualquiera de los miembros de DX e informarse de todas las ventajas que se ofrecen.

En la primera sesión sobre Branding en SharePoint hablé sobre cómo aplicar técnicas modernas de desarrollo web a la hora de aplicar Branding en los sitios de SharePoint Online u OnPremises.

2

 

En la segunda sesión, compartía cartel junto con el gran Adrián Díaz para hablar sobre “Aspectos útiles de Machine Learning en Universal Windows Platform Apps” con la sala llena a reventar, teniendo incluso gente de pie y más personas que entraron durante la sesión.

320151231053259WP_20151127_15_47_58_Pro

Ésta última sesión fue grabada y podéis ver el vídeo en Youtube

 

Las slides las podéis obtener de SlideShare

Modern Branding en SharePoint desde todos los ángulos

Aspectos útiles de Machine Learning en Universal Windows Platform Apps

 

Espero que os haya gustado el evento a los que estuvísteis y a los que no, el próximo año más 🙂

 

Enjoy coding!!!