Cómo habilitar 5 niveles de menú de navegación en SharePoint Server 2013 sin una línea de código

Para poder realizar esto necesitamos lo siguiente:

1) SharePoint Designer 2013 para modificar mínimamente la master page

2) Contar una granja de SharePoint Server 2013 Standard o Enterprise

3) Tener aplicado por lo menos la actualización de Marzo 2013 de SharePoint 2013 o bien el SP1

4) Tener configurado el servicio de Metadatos

5) Poseer permisos como Administrador de la colección de sitios donde se desea el menú de 5 niveles

Para empezar debemos de crear en el Almacén de términos un grupo de términos donde definamos el menú de 5 niveles para ello a nivel del sitio en configuración del sitio encontramos el enlace como se muestra en la imagen de abajo

Ahora crearemos un grupo de términos que le llamaremos navegación.   Para ello haga clic en la esquina derecha de la opción “Aplicación de Servicio de Metadatos” o su correspondiente nombre según el idioma en que tiene el SharePoint

Luego creamos un Conjunto de Términos llamado MenuPrincipal de igual forma en la esquina derecha de la opción “Navegación”.

Ahora seleccione la pestaña Finalidad y seleccione la opción “Usar este conjunto de términos para la navegación del sitio” y abajo presionar el botón Guardar.  Esta opción permitirá especificar en cada termino opciones de navegación como lo es la dirección URL del destino del término u opción del menú.

Ahora debemos de crear los niveles de la misma forma que hicimos con los anteriores

Para cada término tenemos la opción de seleccionar la pestaña Navegación la opción de Vínculo simple o encabezado para escribir o seleccionar la URL Destino.  Hay otras opciones que no revisaremos en este artículo, pero podemos habilitar la opción de utilizar nombre amigables en la URL para esconder la dirección real y el nombre de la página que se esta accediendo.

Abajo como se definió en este ejemplo las opciones.

Ahora necesitamos asociar los términos que acabamos de crear, para ello debemos de volver al sitio primario e ir a la Configuración del Sitio, Aspecto, Navegación.  Sino le muestra la opción de Navegación habilite las características de publicación a nivel de colección de sitios y de sitio donde esta ubicado.

Luego seleccionamos la segunda opción Navegación administrada.

Esto nos habilitará la opción para seleccionar el conjunto de términos deseado, que para este caso es MenuPrinicipal. 

Para finalizar presionamos el botón Guardar.

Ahora viene el truco vamos a modificar la página Maestra para que acepte más de dos niveles en el menú horizontal de navegación o Top Link Bar.  Para ello es necesario habilitar las características de publicación a nivel de colección de sitios y de sitio, como se muestra en la imagen de abajo.

Para acceder a las características puede hacerlo utilizando la siguiente url o bien a través de la configuración del sitio http://hostname/_layouts/15/ManageFeatures.aspx?Scope=Site

Para acceder a las características puede hacerlo utilizando la siguiente url o bien a través de la configuración del sitio http://hostname/_layouts/15/ManageFeatures.aspx

Para modificar la página maestra necesitaremos utilizar el SharePoint Designer 2013 (Es libre y gratuito para descargar) o bien descargar la pagina html utilizada que en este caso es seattle.html editarla con notepad inclusive y luego volverla a subir.  Para este caso vamos a editarla en SharePoint Designer 2013 para ello es necesario abrir un sitio.  Y luego ir a la opción de Master Pages o Páginas Principales dependiendo de la versión que descargo de SharePoint Designer 2013. Seleccionamos editar la página maestra y luego buscamos la siguiente palabra compuesta MaximumDynamicDisplayLevels.

Esto nos llevará el siguiente segmento de código.

 

En el cual debemos de reemplazar el valor 2 por 4 y listo, eso es todo debemos de guardar los cambios en la página html y SharePoint se encargará de convertir a .master dicha página. No se preocupe porque esta comentada luego SharePoint la des-comenta en la versión .master.  Si quiere saber más del nuevo modelo y como funciona el tema del branding leea el siguiente artículo: http://msdn.microsoft.com/en-us/library/jj191506(v=office.15)

Vista de la sección en la que estamos en SharePoint Designer 2013.

Ahora veamos el menú en acción.

Bueno amigos, eso fue todo, espero que puedan realizarlo tan fácil como lo es sin necesidad de escribir una línea de código sino utilizando las opciones que están disponibles en SharePoint Server 2013.

Hasta la próxima,

Juan Manuel Herrera Ocheita

Conflicto entre encuestas de SharePoint 2010 y Jquery.

Jquery es muy usado en los portales de SharePoint para animar menús, desplegar ventanas emergentes y muchas otras animaciones disponibles para Web y utilizables en SharePoint.  Pero el problema es que SharePoint utiliza el signo $ para definir variables y este mismo signo es muy utilizado por Jquery para referirse a el. 

El caso:

Dentro de la página maestra tenía la siguiente invocación:

<script src=”jquery-1.6.4.min.js” type=”text/javascript”> </script>

<script src=”jquery.scrollTo.js” type=”text/javascript”> </script>

<script src=”starter.js” type=”text/javascript”> </script>

Y al momento de agregar una nueva pregunta a una encuesta reportaba el siguiente error:

Webpage error details:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)

Timestamp: Thu, 27 Oct 2011 20:36:52 UTC

Message: 'undefined' is null or not an object

Line: 1057

Char: 4

Code: 0

URI: http://servername/_layouts/qstnew.aspx?List={247B5F06-19F6-42BC-A202-D5DB1A4BCA5B}&InitialTabId=Ribbon%2EList&VisibilityContext=WSSListAndLibrary.

Gracias a mi colega MVP de Australia Ishai Sagi pude resolver el problema.  Los dejos con el correo que me envío:

From: Ishai Sagi [mailto:ishaisagi@gmail.com]
Sent: jueves, 27 de octubre de 2011 08:50 p.m.
To: Manolo Herrera
Cc: SharePoint MVP community
Subject: Re: Web Content Management

I stopped deploying jquery in master pages. I add it in page layouts or webparts. Otherwise, make sure you apply no conflict - but that doesn't resolve some issues.

Thanks, Ishai Sagi

Extelligent Design 

www.extelligentdesign.com

Sent from my phone

+61 488 789 786

En resumen elimine el registro del script de la master page, luego agregue en el evento Load() del elemento web o del control de usuario el registro de las referencias de los archivos de Jquery como se muestra arriba y para algunas páginas las edite por medio de SharePoint Designer en modo avanzado agregue las líneas ya que habían varios elementos Web haciendo referencia al código de Jquery.  Después de estos cambios ya la encuestas funcionaron correctamente.  Otra error puede ser que la página maestra este modificada y se haya eliminado algo que este afectando el portal, restaure la original y si funciona tendrá que volverla a modificar con cuidado para evitar el mismo error.

 

SharePoint4Fun!,

Juan Manuel Herrera O.

Branding: Cómo hacer para que el portal tenga un acho fijo inicial y luego se expanda según la necesidad en SharePoint 2010

Muy probablemente hay varias formas de hacerlo, pero una muy sencilla de hacerlo es a través de tablas de HTML dentro de la página Maestra personalizada.  Esto nos permitirá definir un ancho fijo inicial pero que se puede expandir según los elementos dentro del contenido de la página.

Para ello utilizaré SharePoint Designer como herramienta de diseño. 

Lo primero será ejecutar la aplicación y luego conectarnos a la colección de sitios que deseamos personalizar.

Comúnmente es http://serverename.

Luego debemos de hacer clic sobre la sección Master Pages:

Seleccionamos la página Maestra que deseamos personalizar:

Debemos seleccionar Edit File

Luego nos preguntará si deseamos desprotegerla para editarla.  Le decimos que sí:

La primera tabla la vamos a insertar luego de head, dentro de body y seguido del div “s4-notdlg noindex” siempre y cuando estemos utilizando como inicial una página maestra v4.master para dayandnight.master u otras esto puede variar.

A la tabla le asociaremos una clase llamada master para aplicar algunos estilos y nos aseguraremos que no tenga espaciado dentro y entre las celdas (cellpadding y cellspacing)

Luego a la tabla le agregaremos 3 columnas la 1 y 3 serán para darle un efecto de sombreado al borde y la segunda columna es para agregar todo el contenido restante de la página maestra, que esta antes del div s4-ribbonrow. Importante el valign=”top” de la 2da columna para mantener todo arriba.

Para ubicar donde debemos de cerrar el td la imagen de abajo y luego la 3era columna para agregar el efecto sombreado del borde de la derecha. Luego cerramos la etiqueta tr y table un poco antes de form y body.

Pero aún necesitamos agregar otra tabla para mantener arriba y alineado el contenido luego del encabezado. Dentro del div con Id “s4-mainarea” tentemos la oportunidad de incrustar la tabla que definiremos una clase Contenido y una columna con clase Contenido1 para alinear el QuickLaunch de la izquierda y  para aplicar algún estilo que deseemos.  Importante definir widht=100% de la tabla.

Luego la otra columna para todo el contenido principal de las páginas. El cual le definiremos una clase Contenido2 y antes del div con id MSO_ContentTable.

Finalizaremos cerrando el td,tr y table como se muestra en la imagen de abajo, antes del div que cierra s4-mainarea.

Luego hacemos referencia de la hoja de estilos en la página maestra como se muestra a continuación:

Y los estilos a las clases definidas son los siguientes:

.master
{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    height:100%;
    background-color:#FFFFFF;
}
.spacer
{
    width:12px
}
.shadowRight
{
    *height:100%;
    min-height:100%;
    width:12px;   
    background-repeat:repeat-y;
    background-position:left top;
    background-image: url('custom-images/shadowRight.jpg');

}
.shadowLeft
{
    *height:100%;
    min-height:100%;
    width:12px;   
    background-repeat:repeat-y;
    background-position:left top;
    background-image: url('custom-images/shadowLeft.jpg');
}
.Contenido1, .Contenido2 {vertical-align:top;}

Bueno eso es todo.  Será necesario luego adapte los colores y tamaños que desee para su estructura y branding del portal.  

SharePoint4Fun!,

Manolo Herrera

Tip: Branding en SharePoint 2010. Definiendo el ancho fijo y escondiendo el Quick Launch en algunas páginas

 

Para definir el ancho fijo del portal en SharePoint 2010. Sáquele una copia a la página maestra v4.master desde SharePoint Designer y luego edítela para agregar en la página maestra la siguiente referencia de hoja de estilos:

<SharePoint:CssRegistration name="/_layouts/1033/styles/MiEmpresa.css" After="corev4.css" runat="server"/>

After=”corev4.css” garantiza que los estilos se aplicaran luego que se apliquen los de Corev4 con eso se garantiza que podremos sobrescribirlos.

En el div id=s4-workspace agregue la siguiente clase:

<div id=”s4-workspace” class=”s4-notsetwidth” >

Esta clase le dice al render de SharePoint que no agregue en línea el estilo del ancho y alto a dicho div.  Mas información en:http://msdn.microsoft.com/en-us/library/gg430141.aspx

En la hoja de estilos MiEmpresa.css agregue las siguientes líneas

.s4-notsetwidth {}
body #s4-workspace {width:960px !important; margin:auto}
#s4-ribbonrow {width:960px !important; margin:auto}
.ms-cui-ribbontopbars {width:960px !important; margin:auto}
.ms-cui-ribbon {width:960px !important; margin:auto}

Para esconder el Quick Launch de una página en especifico; Edite con SharePoint Designer la página y abajo de la siguiente línea de la página:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Agregar las siguientes líneas:

<style type="text/css">
     #s4-leftpanel {  display:none; }
     .s4-ca {  margin-left: 5px;  background: transparent; }
</style>

Referencias:

http://allthingsdotnet.net/?p=726

http://msdn.microsoft.com/en-us/library/gg430141.aspx

 

 

SharePoint4Fun,

Manolo Herrera

Cómo se puede personalizar la página maestra de un sitio de Área de Reuniones (Meeting Workspace) para SharePoint 2010

Increíblemente este procedimiento tan sencillo esta poco documentado en la red y en SharePoint 2010 es mucho mas sencillo de lo que se puede estimar, gracias a nuestro amigo SharePoint Designer podemos realizar esta tarea fácil y rápidamente.

Para este procedimiento necesitaremos que tenga instalado SharePoint Designer en su computadora o en el servidor si esta planeando realizar las modificaciones desde allí.  Por si no lo sabe SharePoint Designer es Gratuito y puede bajarlo aquí (ojo con la versión de 64 o 32 bits que debe de seleccionar dependiendo donde lo va ejecutar).

En el sitio: Área de Reuniones debemos de seleccionar En Acciones del sitio y luego Editar en SharePoint Designer.

Luego seleccionar Páginas Principales (versión en español) o Master Page (versión en Inglés).

Luego seleccionar la página maestra MWSDefaultV4.master. Que es la página maestra para sitio de área de reuniones.

Importante: Algunas veces si se activo la característica o feature de Publicación utilizará la página v4.master.  (Si no surge ningún efecto la MWSDefaultV4.master intente con la V4.master)

Luego seleccione Editar Archivo o Edit File.

Luego a personalizar la página maestra, que para este ejemplo solo reemplazaremos la imagen predeterminada.

Para finalizar guarde los cambios realizados.

Luego mostrara una advertencia sobre los cambios realizados, solo presione el botón Si o Yes.

Cierre SharePoint Designer y sobre la página presione Ctrl+F5 para refrescar la página eliminado el cache de la misma y listo los cambios han sido efectuados.

Luego si necesita crear una plantilla solo vaya a configuración del sitio y seleccione la opción de Guardar el Sitio como plantilla con eso estará lista.

Bueno amigos espero les sirva y las haya ahorrado mucho tiempo en la red investigando este tema.

SharePoint4Fun!,

Manolo Herrera

Ventana de dialogo se muestra al modificar la página maestra en SharePoint

Hace poco nos enfrentamos con este dilema.  Habíamos hecho algunas modificaciones a la página maestra para personalizarla  y agregar funcionalidad con las librerías de Jquery.  Aparentemente mostraba todos los cambios en la página maestra pero nos solicitaba varias veces el login de Windows. 

Lo extraño de todo era que al presionar esc un par de veces nos dejaba en el sitio y aparentemente estaba todo bien.

Revisamos la referencia de las hojas de estilos, imágenes y archivos js. Y todo parecía estar bien.  Un consejo sano es utilizar el directorio virtual layouts para depositar el contenido y evitar tener problema con los permisos en las librerías de SharePoint donde están ubicados los archivos(css, js, jpg,etc).

Al final al revisar que todo estaba bien, vimos que habían dos imágenes no mostraban luego de solicitar el dialogo de Windows que de todos modos no autenticaba positivamente sino solicitaba el dialogo una y otra vez. Entonces revisamos los permisos de las imágenes en el directorio donde las copiamos y encontramos que en vez de heredar los permisos del directorio las imágenes tenían acceso limitado, cambiamos los permisos y listo todo funcionó correctamente el directorio virtual layouts esta ubicado en: c:\program files\common files\Microsoft Shared\Web Server Extensions\12\template.  Dentro de Images creamos una estructura de directorios tal como Compañia\, Compañia\Styles, Compañia\scripts, Compañia\ Images.

Al final la ruta física sería la siguiente: c:\program files\common files\Microsoft Shared\Web Server Extensions\12\template\Images\Compañia…

Y la virtual: /_layouts/images/Compañia/…

Por sí le pasa ya sabe por donde.

SharePoint4Fun!,

Manolo Herrera