Recortar texto con ... en una SharePoint

Muchas veces, nos piden que en una vista de datos sólo aparezcan los 250 primero caracteres o un número que nos determinen de caracteres de un campo de varias líneas de texto.

El problema reside en que ese tratamiento sobre un campo de varias lineas de texto, no podemos hacerlo en XSL, en concreto cuando el campo de varias lineas de texto, permite texto enriquecido.

Ya que internamente, lo que se guarda es código HTML.  Y al quedarnos sólo con un número determinado de caracteres conseguiremos situaciones, como quedarnos con código HTML en el que se abren etiquetas pero falta el cierre. Pudiendo darse cosas "curiosas" en lo que veríamos en nuestro navegador.

Para ello el truco más recurrido, es tratar el texto desde el lado cliente con JavaScript. Para ello podremos aplicar el siguiente código:

/*Justo tras acabar de cargarse el código de nuestra página (ready), se ejecutará nuestro código*/
$(document).ready(function(){
/*Buscamos todos los elementos HTML que hemos asociado a la clase descripcion, para ser analizados y ver si hay que recortarlos*/
    $('.descripcion').each(function(){
/*Variable en la cual indicaremos el número máximo de caracteres a mostrar*/
    var longitud=300;
/*Vemos si para cada uno de estos elementos, superan la longitud máxima o no*/
    if($(this).text().length > longitud){
/*En el caso de que se supere, nos quedaremos con los 300 primeros caracteres*/
        var texto=$(this).text().substring(0,longitud);
/*Para evitar palabras incompletas, buscaremos el último espacio en blanco*/
        var indiceUltimoEspacio= texto.lastIndexOf(' ');
/*Nos quedaremos con el texto que hay antes del último espacio en blanco y pondremos puntos suspensivos*/
        texto=texto.substring(0,indiceUltimoEspacio) +'<span class="puntos">...</span>';
/*Lo encapsulamos todo dentro de un div con la misma clase, para mantener los estilos*/
        var primeraParte = '<div class="descripcion">' + texto + '</div>';
        /*Y los pintamos en la posición donde estaba el texto largo*/ 
        $(this).html(primeraParte);
    }; 
    });
});


Si lo que quisiéramos hubiera sido darle la posibilidad de que al hacer clic en los puntos suspensivos se mostrará todo el texto, la función sería:

/*Justo tras acabar de cargarse el código de nuestra página (ready), se ejecutará nuestro código*/
$(document).ready(function(){
/*Buscamos todos los elementos HTML que hemos asociado a la clase description, para ser analizados y ver si hay que recortarlos*/
    $('.description').each(function(){
/*Variable en la cual indicaremos el número máximo de caracteres a mostrar*/
    var longitud=300;
/*Vemos si para cada uno de estos elementos, superan la longitud máxima o no*/
    if($(this).text().length > longitud){
/*En el caso de que se supere, nos quedaremos con los 300 primeros caracteres*/
        var texto=$(this).text().substring(0,longitud);
/*Para evitar palabras incompletas, buscaremos el último espacio en blanco*/
        var indiceUltimoEspacio= texto.lastIndexOf(' ');
/*Nos quedaremos con el texto que hay antes del último espacio en blanco y pondremos puntos suspensivos*/
        texto=texto.substring(0,indiceUltimoEspacio) +'<span class="puntos">...</span>';
/*Lo encapsulamos todo dentro de un div con la misma clase, para mantener los estilos*/
        var primeraParte = '<div class="description">' + texto + '</div>';
var segundaParte = '<span class="texto-oculto" style="display:none;">' + $(this).text().substring(indiceUltimoEspacio,$(this).text().length - 1) + '</span>';
        /*Y los pintamos en la posición donde estaba el texto largo*/ 
        $(this).html(primeraParte + segundaParte);
/*Ponemos una zona */
        $(this).after('<span class="Mas_info">Ver más</span>');
    }; 
    });
/*Cuando hagamos clic en Mas_info se lanzará esta parte*/
$('.Mas_info').click(function(){
/*Comprobamos si el texto-oculto esta oculto*/
        if($(this).prev().find('.texto-oculto').css('display') == 'none'){
/*En ese caso mostramos el texto oculto*/
            $(this).prev().find('.texto-oculto').css('display','inline');
/*Ocultamos los puntos suspensivos*/
            $(this).prev().find('.puntos').css('display','none');
/*Y cambiamos el texto por Ver menos*/
            $(this).text('Ver menos');
        }
/*justo lo contarios*/
        else{
            $(this).prev().find('.texto-oculto').css('display','none');
            $(this).prev().find('.puntos').css('display','inline');
            $(this).html('Ver más');
        };
    });
});

Hay que tener en cuenta, que antes de poner todo este código debe haber una referencia a Jquery, ya sea externa:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

O interna.

Abrir enlaces en nueva pestaña

En algunas entradas anteriores, hemos visto como hacer que se abran los PDF en ventanas nuevas u otras particularidades.

Pero si queremos un método general, en el que el usuario pueda elegir que enlaces se abren en nueva ventana, podemos aprovechar que las URL soportan anchas.

Es decir, si quiero ir a San Google, tengo que ir a:

https://www.google.es

Pero también voy si accedo a:

https://www.google.es#nuevaventana

Esto es un ancla:

#nuevaventana

Y nos aprovecharemos de ello para crear un Jquery que puede ir en la página maestra y que nos permita que todos los enlaces que los acabemos con dicha ancla, se abran en nueva ventana.

Bastará con incluir:

<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

  $("a[href$='#nuevaventana']").each(function() {

    $(this).attr("target", "_blank");

    $(this).attr("href", $(this).attr("href").replace(/#nuevaventana/, ''));

  });

});

</script>

Con esto, estaremos recorriendo cada elemento que tiene en su href, la cadena '#nuevaventana', le estaremos diciendo que su target es '_blank' (nueva pestaña) y por último retiraremos de la url, nuestra ancla, ya que no la necesitaremos.

Fuente:

http://blog.scoreman.net/2010/10/open-sharepoint-links-in-new-window-using-jquery/

Obtener día de la semana

En los múltiples clientes para los que he trabajado, me han pedido múltiples cosas a partir de un campo de tipo fecha.

Una que es recursiva, es obtener el día. Alguien puede pensar que es una petición sencilla, pero esa petición puede significar tres cosas. Obtener el número del día, el nombre del día y el orden del día dentro de la semana.

Me explico. Hoy es 14/6/14 y es sábado.

Entonces veremos lo que podemos obtener con una columna calculada:

Día:
=DAY([Fecha])
Nos devuelve:
14

Nombre del día:
=TEXT(WEEKDAY([Fecha]); "dddd")
Nos devuelve:
sábado

Nombre del día corto:
=TEXT(WEEKDAY([Fecha]); "ddd")
Nos devuelve:
sá.

Recordad que si queréis que la letra inicial aparezca en mayúsculas, bastaría con englobar todo con PROPER:
=PROPER(TEXT(WEEKDAY([Fecha]); "dddd"))
Nos devuelve:
Sábado

Por último podemos necesitar el número del día dentro de la semana, para poder ordenar de lunes a domingo, o de domingo a sábado si trabajamos para países anglosajones.

Número del día de la semana:
=WEEKDAY([Fecha];2)
Nos devolverá:
6

Sí estuviéramos trabajando para una empresa anglosajona:
=WEEKDAY([Fecha];1)
Nos devolverá:
7

Sí quisiéramos que el lunes fuese 0, bastaría con:
=WEEKDAY([Fecha];0)
Nos devolverá:
0

Fuentes:
https://support.office.com/en-us/article/WEEKDAY-function-a9784177-5c31-4deb-bc9e-d4ab914983ca
https://msdn.microsoft.com/es-es/library/office/bb862071(v=office.14).aspx

Ocultar el menú de edición de la Ribbon en elementos

Muchas veces en SharePoint cuando accedemos a un elemento de una lista o biblioteca, accedemos con una url de la forma:

http://misitio/Lists/milistas/EditForm.aspx?ID=1

Esto nos genera un problema visual, que consiste en mostrarnos en las opciones de edición de la Ribbon superior:

Si queremos evitar esto, bastaría con añadir el parámetro:

InitialTabId=Ribbon.Read

En nuestro ejemplo quedaría:

http://misitio/Lists/milistas/EditForm.aspx?ID=1&InitialTabId=Ribbon.Read

Quedándonos una visualización más agradable:

Como sumar o restar horas y minutos a un campo de tipo Fecha en SharePoint

Generalmente, cuando trabajamos con campos calculados, nos suelen pedir comparar fechas, añadir y quitar días, meses, años, etc..

Todo esto, lo podemos encontrar en la página oficial de Microsoft:
https://msdn.microsoft.com/es-es/library/office/bb862071(v=office.14).aspx

Pero una cosa que no viene en esa página, es como sumar y/o restar horas y minutos a un campo de Fecha y hora, en SharePoint.

Si tomamos como referencia la formula de como añadir un día, tendremos una pista:

=[Fecha]+1

Entonces sí 1 es un día. Basta con utilizar la lógica. Un día son 24 horas. Así que si quisiera sumar 3 horas, sería 3/24 partes del día.

Sí 1 hora son 60 minutos y 1 días son 24 horas. Sí quisiéramos sumar 7 horas, sería 7/24/60 partes del día.

Con lo cual, nuestras formulas en la columna calculada serían:

Horas:
=[Fecha]+((1/24)*Número de horas deseadas)

Minutos:
=[Fecha]+((1/24/60)*Numero de minutos deseados)

Como se puede ver, no era muy complicado. Sólo había que seguir la lógica.

¿Dónde esta el botón para vincular una reunión a un espacio de reuniones en Outlook 2010? (II)

No hace mucho, hice una entrada sobre como habilitar la opción. Ahora voy a darle una nueva vuelta de tuerca, con un artículo que he leído.

Lo primero que deberemos de hacer es entrar en la vista calendario de Outlook 2010 que se encuentra en la parte inferior izquierda:

Lo siguiente que haremos será darle a la opción de Nueva cita o a la de Nueva reunión:

En la ventana que se nos cargará, tendremos que ir a Archivo y dentro elegir Opciones:

En la ventana que se nos abrirá elegiremos la opción de Personalizar cinta de opciones y dentro de su ventana contextual, elegiremos Nueva ficha, lo que nos permitirá crear una zona en la ribbon superior de Outlook:

Por defecto, esa Nueva ficha se creará con el nombre Nueva ficha, pero podremos personalizarlo poniendo a esa pestaña el nombre deseado. En mi caso SharePoint:

Acto seguido podremos personalizar ese área de la pestaña, poniéndole el nombre que deseemos. En mi caso, Espacio de Reuniones:

Por último, lo que necesitaremos es incluir en esa zona el icono de Área de reuniones, para ello lo que haremos será Agregar el icono, a la zona de Espacio de Reuniones:

Esto nos permitirá, que a partir de ahora, ya tengamos disponible la opción de vincular una reunión a un espacio de reuniones:

La fuente que he utilizado es:
https://www.premierpointsolutions.com/training/help-and-how-to-articles/how-to-add-the-meeting-workspace-button-in-the-outlook-2010-ribbon-to-create-a-meeting-workspace/

Como ver los nombres de archivos adjuntos de una lista de SharePoint

En las vistas de las listas, estamos acostumbrados a sólo poder ver si los elementos tienen adjuntos o no. Eso se puede ver por medio de la presencia o no, del icono de un clip en la columna de adjuntos:

Para poder acceder a los adjuntos y poder ver su nombre, tendríamos que acceder al DispForm o EditForm del elemento. Que comúnmente se hace por medio del Título.

Esto a muchos clientes les parece que no es algo ágil. Una solución a esto, es el Javascript que nos plantea Alexander Bautz en su web:

http://spjsblog.com/2011/10/07/list-all-attachments-when-clicking-the-paperclip-in-a-list-view-updated-version/

Consiste en incluir un editor de contenido en nuestra página:

Con el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script src="/MiSitio/JS/ListAttachments.js" type="text/javascript"></script>

<script type="text/javascript">

var argObj = {hideIdColumn:true,

              clickToOpen:false,

              clickMouseover:"Click to open",

              oneClickOpenIfSingle:true};

customListAttachments(argObj);

</script>

La clave es descargar el archivo ListAttachments.js de la siguiente dirección:

http://spjsfiles.com/index.php?dir=SharePoint+JavaScripts%2FpreviewAttachmentsOnClick%2F

Subirlo a nuestro portal y referenciarlo:

<script src="/MiSitio/JS/ListAttachments.js" type="text/javascript"></script>

Otro punto importante, es que en la vista, deberá estar presente la columna ID, pero no hay que preocuparse si no nos interesa mostrar dicha columna porque se oculta por medio de la sentencia:

hideIdColumn:true

Y como resultado de todo esto obtendremos:

Es decir, que si nos ponemos sobre el clip nos dirá que adjuntos tiene ese elemento y si hacemos clic sobre uno de los nombres de los adjuntos, se abrirá en nueva ventana.

Y con esto, conseguiremos que nuestros clientes estén más contentos.