Desarrollo +: Como cambiar dinámicamente un enlace de una página maestra en SharePoint

Hace poco tiempo un cliente me solicitó que cambiará el enlace de la página de inicio dependiendo de la dirección donde estaba ubicado el usuario. Si estaba en los sitios en Inglés o en Español.

Prerrequisitos para los lectores de este artículo:

Este familiarizados con la interface de SharePoint, por lo menos hallan subido documentos a librerías y alguna vez hayan cambiado la página maestra del portal o de algún sitio de SharePoint.
Este artículo asume que esta trabajando sobre una plantilla de colección de sitios Publishing Colaboration, que nos permite modificar las páginas maestras de los sub-sitios.
Utiliza como herramienta de desarrollo Visual Studio.
Tiene nociones básicas sobre Java Script y páginas maestras en ASP.Net 2.0.

Primero vamos a crear una función en javascript para reemplazar la dirección Web de una etiqueta de HTML <a hef> basado en la dirección Web donde esta navegando el usuario, como lo muestro abajo:

   1:  function VerificaUbicacion()

   2:  {

   3:  var x= document.getElementById('HomeLink');

   4:  var url = ""+document.location;

   5:  if (url.indexOf("Spanish") > -1)

   6:  {

   7:      var enlace = document.getElementById('HomeLink');

   8:      var url2 = ""+enlace.href;

   9:      enlace.href = url2.replace(/english/i,"Spanish");

  10:  }

  11:  };

HomeLink será el Id de la etiqueta <a href> que veremos luego.

document.location obtiene el url actual. Las comías “” son para indicarle a javascript que es el objeto que va a crear es de tipo string; el tipo string tiene un método indexOf() para buscar dentro de la cadena de caracteres el valor que nos interesa. –1 Indica que no lo encontró arriba de eso devuelve el índice donde inicia el primer carácter del valor encontrado.

Otro método de un objeto tipo string es replace, el primer valor debe de estar entre caracteres scape “/” y la i indica que no es sensible a las mayúsculas o minúsculas. Lo que estamos diciéndole es que reemplace el valor english por Spanish.

Ahora vamos a guardar este código en un archivo js que llamaremos VerificaUbicacion.js (Podemos utilizar algún programa como Javascript minimizer para compactar el archivo y hacerlo mas eficiente). Este lo podemos subir a una librería de estilos dentro de algún sitio de SharePoint para luego hacer referencia al mismo (este paso esta fuera del alcance del artículo, por ser una tarea tan sencilla de realizar).

Ahora vamos a modificar la página maestra para:

Descargar una copia de la página maestra que vamos a utilizar para agregar este enlace de la página de inicio o Home. Para acceder directamente escriba la siguiente dirección: http://miservidor/_catalogs/masterpage . Esto nos llevará directamente a la librería de páginas maestras. Ahora seleccione la página maestra y en el menú que aparece sobre el nombre de la página seleccione la opción Send To:Download a Copy.

Abra el archivo .master en Visual Studio o en Notepad.

Agregar la referencia del archivo VerificaUbicacion.js dentro de las etiquetas <head> de la siguiente forma:

   1:   <script type='text/javascript'

   2:               src='/StyleLibrary/VerificaUbicacion.js' language="javascript">

   3:  </script>

4:

Agregar el enlace de la página de inicio y la invocación del método VerificaUbicacion() en el método OnClick de la etiqueta <a href>. Comente el logo que SharePoint predeterminadamente coloca en las páginas maestras por el logo de home. Ud. puede ubicarlo de mejor forma como mejor le convenga.

   1:  <td class="ms-globalTitleArea" >

   2:      <table width="100%" cellpadding="0" cellspacing="0" border="0">

   3:      <tr>

   4:      <td>

   5:      <a href="/English" id="HomeLink" onclick="VerificaUbicacion()">

   6:            <img src="/_layouts/images/home.gif" alt="Home" />

   7:       </a>

   8:       </td>

   9:           <!--

  10:          <td id="GlobalTitleAreaImage" class="ms-titleimagearea">

  11:          <sharepoint:sitelogoimage id="onetidHeadbnnr0" logoimageurl="/_layouts/images/titlegraphic.gif"

  12:          runat="server" />

  13:          </td>

  14:           -->

  15:          ..

  16:  </table>

Subir la página maestra a la librería de páginas maestras del sitio de SharePoint. No se olvide de publicar la página maestra y luego de aprobar dicha publicación sino no podrá ver los cambios realizados.

Seleccione la nueva página maestra como la página predeterminada de ese sitio. Para ello vaya a: Site Actions, Site Settings, Master Page.

Este ejemplo resuelve de una forma muy particular y sencilla la forma de cambiar la dirección web de un enlace basado en la dirección actual del usuario conectado dentro de la página maestra. No soy un experto en javascript pero me fue de mucha utilidad resolverlo de esta forma, combinando la disponibilidad de las páginas maestras en todos los sitios de SharePoint.

Eso es todo amigos, nos vemos hasta la próxima,

Manolo Herrera

Desarrollo +

martes, 25 de agosto de 2009

Como cambiar dinámicamente un enlace de una página maestra en SharePoint

No hay comentarios.:

Publicar un comentario