miércoles, 11 de septiembre de 2013

SP 2013: Ocultar botones de la cinta de acciones (Ribbon) mediante CSS.

Quien ha tenido un cliente en un proyecto de SharePoint, sin duda habrá tenido algún requerimiento del tipo: "Ese botón no lo debería ver el usuario. ¿Se puede ocultar?". La respuesta, siempre es la misma: "Todo se puede, pero todo tiene un coste...". Afortunadamente para todos, en SharePoint 2013 el coste de este tipo de personalizaciones es mínimo, ya que puede ocultarse cualquier botón o sección de la cinta de acciones (Ribbon) de forma muy rápida y sencilla.

De hecho, existen diversos métodos para ocultar dichos botones: programáticamente, mediante jquery en CEWP... pero el que expondré hoy aquí es el más sencillo de todos y rápido de ejecutar:

Vamos a ocultar, por ejemplo, el botón de "Ver todas las páginas" que hay en la sección "Biblioteca de páginas" de la pestaña "Página".

Primero vamos a necesitar obtener el ID del botón o sección de la Ribbon que queremos ocultar. Esto lo conseguiremos con las developer tools de IE o Firefox. Para el ejemplo me baso en IE 10. En IE hay que pulsar F12 para que estas aparezcan. Una vez las tengamos activadas, tenemos que seleccionar el botón en questión (hay que pulsar previamente el botón del icono del puntero de ratón en la pestaña HTML). Al seleccionarlo veremos que en el editor se nos abre el código HTML del botón. Tendremos que subir hasta el atributo <a y apuntar bien el ID que nos ofrece. En este caso, como se aprecia en la siguiente imagen, el ID del botón es "Ribbon.WikiPageTab.LibrarySettings.ViewAllPages-Large"


Ahora solo tendremos que abrir el fichero CSS que deberíamos tener personalizado para nuestro site (con SharePoint Designer, por ejemplo). Habitualmente el fichero estará en "\Style Library\CSS"

En caso de no tener un CSS personalizado (vamos hombre, todos los clientes quieren personalizar algo del Look&Feel!!) tendríamos que crearlo y vincularlo desde nuestra masterpage con una línea dentro del "head" del tipo:
<SharePoint:CssRegistration name="/Style Library/CSS/OurCustomCSS.css" runat="server" after="SharepointCssFile" />
Una vez estemos editando nuestro CSS personalizado, tan solo tendremos que añadir una entrada para el ID del botón que hemos apuntado, teniendo en cuenta que hay que insertar una contrabarra antes de cada punto del ID. El código completo sería así:

#Ribbon\.WikiPageTab\.LibrarySettings\.ViewAllPages-Large {
 display:none;
}
Al guardar correctamente el CSS (recordar hacer "check in" y guardarlo como "versión principal"). El botón ya no debería aparecer más allá donde tengamos aplicado nuestro CSS.


¡¡Adiós botones "molestos" que nadie quiere!! :-D

No hay comentarios: