lunes, 7 de abril de 2014

SP2013: Cómo obtener una vista con “Style Shaded” sin morir en el intento.

Para bien o para mal, SharePoint nunca deja de sorprendernos. Hoy le toca el turno a una de esas “cosas sin sentido” a la que tan mal nos tiene acostumbrados SharePoint 2013.

Pongamos el siguiente requerimiento del cliente: “Quiero que la vista de los documentos en una biblioteca tenga sombreadas las filas de forma alternada (una blanca y una de color sucesivamente)”. El primer pensamiento que nos vendrá a la mente si venimos de administrar SharePoint 2010 será algo del estilo: “fácil! Voy a la configuración de la vista, y en Style, selecciono la opción Shaded, que siempre es muy socorrida”.

image

Sin embargo, si aplicamos este estilo veremos que tiene algunos efectos secundarios, seguramente indeseados. Vamos a jugar a encontrar las diferencias.

Versión SharePoint 2013 “Style shaded”:

image

Versión SharePoint 2013 standard:

image

Analicemos las diferencias con detalle (la mayoría marcadas en rojo en la última imagen):

  • Se añade el sombreado en líneas alternativas (¡efectivamente!)
  • Se pierde el control de acceso rápido a vistas (“All documents, by type, by year…”)
  • Se pierde el enlace directo de “Create new document” en la cabecera de la lista.
  • Se pierde el control de búsqueda directa en la lista.
  • Se pierden los puntos suspensivos que nos da acceso a una de las características más “cools” de 2013, como es la pre visualización de documentos.

Esto aplica en cualquier “style” que queramos aplicar fuera del “standard”. Como veis, para ganar una funcionalidad (sombreado alternativo), perdemos cuatro. Además, tiene tooooooda la pinta de que estos estilos de vista son directamente una especie de “copy-paste” de la versión de SharePoint 2010 y que nadie se ha preocupado en transformar a funcionalidad 2013.

Entonces… ¿Cómo puedo modificar el estilo de las vistas por defecto sin perder funcionalidad de SharePoint 2013?

De nuevo, la respuesta es CSS. Para conseguir una vista de tipo “shaded”, necesitamos  editar la página que contiene la vista del tipo Script Editor y añadirle un WebPart de “Script Editor” (en la categoría de “Media and Content”).

image

Editamos el Script Editor y le añadimos directamente las siguientes líneas:

<style>
.ms-alternating {background-color: #F7F1F0;}
</style>

Sustituyendo el valor de #F7F1F0 por el color hexadecimal que deseemos usar en los sombreados.

image

Al pulsar en “Insertar” y salir de la edición de la página, veremos que hemos conseguido el deseado efecto de sombreado, pero esta vez, sin perder ninguna funcionalidad sobre la vista estándar.

image[42]

De nuevo, confío en haberle alegrado el día a alguien, aunque también confío en que en SharePoint 2015 estas cosas Microsoft las tenga en cuenta, y esta vez tengamos un piso con “acabados de primera”.

Por si no lo habéis notado ya, el “Script Editor” WebPart, es uno de tus mejores amigos en SharePoint 2013.  Guiño

¡Saludos!

miércoles, 2 de abril de 2014

SP2013: Cómo modificar el tamaño de las tiles de los “promoted links” (tiles size)

Sin duda todos sabréis ya a estas alturas que SharePoint 2013 introduce el estilo “metro” mediante los mosaicos (tiles) que generan las listas de “promoted links”. Sin embargo, de nuevo Microsoft se queda a medias, y cuando intentas modificar el tamaño de dichos mosaicos… ¡¡No se puede!! al menos no por los parámetros habituales del WebPart. Por defecto vienen fijados en un tamaño de 150x150 px. No parece que debiera ser muy complicado añadir los parámetros “height” i “weight”, pero de nuevo ese trabajo se deja para el siempre “socorrido” implantador.

Sin duda, buscando por google encontrareis diversas soluciones al problema, la mayoría de ellas sobre javascript. Sin embargo yo prefiero (siempre que se pueda) atacar la solución mediante estilos CSS, por diversos motivos:

  • Se optimiza el tiempo de carga de la página, al evitar cualquier línea de código.
  • Evitamos posibles incompatibilidades con versiones antiguas de explorador.
  • Evitamos tener que referenciar a otros ficheros javascript (como jquery).
  • La simplicidad con CSS es máxima. Únicamente copiar el código en un “script editor webpart”.
  • Se evita ese primer “medio segundo” en que la página se carga normal y luego javascript hace su efecto retocando el objeto/webpart en cuestión. Ese “medio segundo” puede llegar a despistar y ser motivo de queja de algunos usuarios.

Así pues, pasemos a explicar el proceso paso a paso para hacer un resize de los “tiles” de “promoted links” simplemente con unas pocas líneas de CSS.

1.- Partimos de un listado de “promoted links” ya creado, con algunos ítems contenidos en él. Tomo por ejemplo los que se muestran en la siguiente imagen:

image

2.- Editamos la página donde estemos añadiendo este listado de “promoted links” y le añadimos un webpart de “Script Editor”

image

3.- Una vez tengamos añadido el webpart de Script Editor, pulsamos en “EDIT SNIPPET”

image4.- Añadimos el siguiente código al snippet:

<style>
.ms-tileview-tile-root, .ms-tileview-tile-content, .ms-tileview-tile-content img, .ms-tileview-tile-detailsListMedium, .ms-tileview-tile-detailsBox   {
width: 50px !important;
height:50px !important;
margin-right: 20px !important;
}
.ms-promlink-body {
height: 50px !important;
}
</style>

Modificando:

  • cualquiera de los tres “50px” por el tamaño que deseéis realmente.
  • El “Margin-right: 20px” por el espacio de margen que deseeis entre cada tile

Guardamos los cambios realizados en el snippet pulsando el botón de “insert”

5.- Como paso opcional, y únicamente si queremos eliminar las flechas para hacer scroll entre los tiles, podemos añadir el siguiente estilo al snippet:

.ms-promlink-header {
display:none;
}

6.- Salimos de la edición de la página (page - Stop Editing) y observamos cómo han cambiado nuestros mosaicos.

image

7.- Una vez terminado podeis jugar a modificar el parámetro width y height para ajustarlo al tamaño que tengáis disponible en vuestra página en concreto.

Como advertencia final: Tened en cuenta que con unos tiles muy pequeños, vais a tener un texto también muy pequeño que mostrar en su interior, por lo tanto, tendréis que minimizar al máximo los caracteres contenidos en él, o modificar también el tamaño de la letra que contienen, para evitar efectos como el siguiente:

image

En ese caso siempre podéis añadir un par de estilos más al snippet, uno para reducir el margen de la izquierda, y otro para reducir el tamaño de la letra:

.ms-tileview-tile-detailsListMedium {
    padding: 0px;
  }

ms-tileview-tile-titleMedium {
    font-size: 8px;
}

El efecto de añadir estos estilos extra sería el siguiente:

image 

¡Listo! Ahí tenemos nuestros mosaicos al tamaño deseado, de forma rápida, sencilla e indolora.

¡Saludos!