PDF de programación - CompartiMOSS 19

COMPARTIMOSS COMPARTIMOSS 03 Editorial

Nos adentramos en un nuevo número de CompartiMOSS y ya vamos por 19. 19 números en los que han escrito los que,
posiblemente, sean los mejores autores de SharePoint de habla hispana, a los que agradecemos su confianza y tiempo
dedicados a la revista.

Seguimos con nuestro plan de progreso pensando en nuestros lectores para ofrecerles la mejor experiencia posible en
la lectura de los artículos, así como garantizar la continuidad de la misma, y en este punto tenemos que agradecer a los
patrocinadores actuales y a los futuros que dan soporte a los gastos derivados de las mejoras que se están produciendo.
Para que se puedan hacer una idea, nuestro plan se centra en ofrecerles siempre una mejor experiencia en la lectura de
los artículos, pero sin dejar de pensar en brindar la posibilidad de compartir sus comentarios en los artículos y socializar la
revista. Adicionalmente, nuevos autores y nuevos temas se incorporan a la revista como sucede con el caso de la plataforma
hermana de SharePoint, Office 365 que es tratada en este número. Nuestro objetivo es seguir hablando fundamentalmente
de SharePoint en la revista, pero también ir añadiendo contenidos de otras plataformas relacionadas.

No queremos restarle importancia a este número con esta editorial, pero no podemos perder la oportunidad de invitarlos a
compartir sus ideas, comentarios y/o críticas sobre la revista y agradecerles todas sus lecturas y visitas al que pretendemos
que sea el sitio de referencia del SharePoint hispano.

ALBERTO DÍAZ
[email protected]
JUAN CARLOS GONZÁLEZ
[email protected]
GUSTAVO VÉLEZ
[email protected]
FABIÁN IMAZ
[email protected]

03

COMPARTIMOSS 04 Diseño Gráfico en SharePoint

Foundation 2010. Parte II

Resumen
En el artículo anterior hicimos una introducción acerca de
cómo incorporar en SharePoint 2010 los estilos creados
por un diseñador gráfico. Nos basamos en algunas
hipótesis como el uso de SharePoint Foundation, páginas
maestras, hojas de estilo y modelo de objetos de cliente
para JavaScript. Se recomienda leer la parte 1 antes de
continuar.

En esta segunda etapa, vamos a trabajar con algunos
aspectos más específicos. Se trata de ciertas situaciones
puntuales que se nos pueden presentar y los enfoques de
desarrollo propuestos en cada caso.

Artículo
En el artículo anterior hicimos una introducción acerca de
cómo incorporar en SharePoint 2010 los estilos creados
por un diseñador gráfico. Nos basamos en algunas
hipótesis como el uso de SharePoint Foundation, páginas
maestras, hojas de estilo y modelo de objetos de cliente
para JavaScript. Se recomienda leer la parte 1 antes de
continuar.

Ocultar Inicio Rápido salvo
excepciones
Supongamos que necesitamos ocultar el inicio rápido (y
el espacio que ocupa) en todas las pantallas, excepto en
aquellas que trabajan con vistas de calendario. Una forma
de resolverlo es agregar este código a la hoja de estilos.

#s4-­‐leftpanel,  .ms-­‐quicklaunchouter  {  display:  
none;  }  

.s4-­‐ca  {  margin-­‐left:  0px;  }  

Con el primero ocultamos la barra de inicio rápido y en
particular los elementos que no son de calendario. Con el
segundo estilo, quitamos el espacio que ocupa la barra de
inicio rápido.

Además, agregamos el siguiente código en nuestra página
maestra, justo antes de “</body>:

<script type="text/javascript">

var x =
document.getElementById("Ribbon.Calendar");

if (x != null) {

// Existe la Ribbon de Calendario, por lo tanto
se necesita la Quick Launch

document.getElementById('s4-
leftpanel').style.display='inline';


document.getElementById('MSO_ContentTable').sty
le.marginLeft='155px';

}

</script>

Este código detecta si se trata de una página de tipo
calendario. En caso que así sea, vuelve a hacer visible
el Inicio Rápido, pero sólo mostrarán las opciones de
calendario tal como se ve en esta imagen:

Imagen 1 – Inicio Rápido sólo visible en Calendario

04

COMPARTIMOSS Referenciar la CSS dentro de la
Master Page en un subsitio
SharePoint Foundation no soporta “$SPUrl:~sitecollection”
tal como lo soporta la versión Server. Esto genera problemas
para referenciar a una hoja de estilos, especialmente si nos
encontramos en un subsitio y queremos evitar incluir el
nombre del subsitio en la página maestra.

Para resolverlo hacemos uso de “ASP:literal” y de
“SharePoint:ProjectProperty”, lo que nos permite construir
en forma dinámica la URL de la hoja de estilos. Más abajo
dejo un enlace en donde está explicado en detalle. El
código es el siguiente:

<asp:literal runat="server" Text="&lt;link
href='"/>

<SharePoint:ProjectProperty Property="SiteUrl"
runat="server" />

<asp:literal runat="server"
Text="/Internal/Intranet.css' rel='stylesheet'
type='text/css'/&gt;"/>

Agregar enlaces en el pie de página
dentro de la master page
Supongamos que tenemos que agregar enlaces en el pie de
página en un subsitio y no conocemos la dirección del sitio,
entonces podemos utilizar el siguiente código, haciendo
uso de le _spPageContextInfo:

<a href="' + window.location.protocol + '//' +
window.location.host + retornar_sitio() +
'/Contenido/Historia.aspx' + '">Calidad</a>

Para ello, hemos creado previamente una función llamada
retornar_sitio:

<script type="text/javascript">

function retornar_sitio() {

if ( _spPageContextInfo.siteServerRelativeUrl
== '/') {

return "";

}

else {

return
(_spPageContextInfo.siteServerRelativeUrl);

}

}

</script>

NOTA: este mismo truco puede ser utilizado también en
la barra de vínculos superior!

Dar estilo a una vista de Noticias
Vamos a salir ahora de la página de inicio. Imaginemos
que tenemos una
lista de SharePoint con Noticias.
Creamos una vista estándar con los siguientes campos:

•Imagen destacada.
•Título (vinculado al elemento).
•Fecha.
•Resumen.

Ahora queremos darle algo de estilo a la lista, pero sin
perder las funcionalidades de SharePoint. Es decir que
no queremos crear una página a medida, sino utilizar las
opciones de SharePoint para crear vistas desde el navegador.

Entonces optamos por el enfoque de agregar una CEWP
que modifique el estilo de esta vista. En este ejemplo,
vamos a asumir que
la vista tiene estas opciones:

•Sin edición incluida / Con vista tabular.
•Con estilo Boletín sin líneas.

En una primer parte, trabajamos todo con estilos,
dejaremos para el final algunos scripts para puntos que
no podemos manejar con CSS. Nuestros estilos son:

<style>

/* Oculto la tabla mientras trabajo */

body { display: none; }

/* Oculto la fila con los nombres de los campos
*/

.ms-listviewtable .ms-viewheadertr { display:
none; }

/* Minimizo el ancho de la columna que tiene la
foto */

.ms-listviewtable > tbody > tr > td:first-child
{ width: 1%; }

/* alternado de filas */

.ms-vb2, .ms-vb-tall, .ms-newsletteralt td {
background-color: white !important; }

/* Bordes */

.ms-listviewtable td { border-color: white
!important; }

/* Imagen*/

.noticia_general_left_img_sharepoint {

border-left: solid 8px #297AD3;

}

/* Título */

.noticia_general_right_title_sharepoint {

font-size: 25px;

font-weight: lighter;

padding-left: 15px !important;

font-family: "Segoe UI", "Lucida Sans
Unicode", "Lucida Grande", sans-serif;

width: 500px;

}

05

COMPARTIMOSS font-size: 25px;

font-weight: lighter;

padding-left: 15px !important;

font-family: "Segoe UI", "Lucida Sans
Unicode", "Lucida Grande", sans-serif;

width: 500px;

}

.noticia_general_right_title_sharepoint a {

color: #000 !important;

height: 20px;

}

/* Fecha */

.noticia_general_right_date_sharepoint {

color: #297ad3;

width: 200px;

}

.noticia_general_right_date_sharepoint_sep {

border-bottom: 1px solid #d3dcf3;

padding-bottom: 3px;

margin-left: -5px;

}

/* Resumen */

.noticia_general_right_gray_sharepoint {

color: #999999;

font-size: 15px;

line-height: 19px;

font-family: "Segoe UI", "Lucida Sans Unicode",
"Lucida Grande", sans-serif;

overflow: hidden;

}

/* Separador */

.noticia_general_divisor_sharepoint {

border-bottom: 1px dashed #797979;

padding-top: 50px;

padding-bottom: 3px;

}

</style>

En una segunda parte, trabajamos con jQuery para agregar
los estilos definidos en donde corresponda y modificar
algunos anchos, de acuerdo al tipo de noticia:

<script type="text/javascript"
src="./../../Internal/jquery-
1.9.1.js"></script>

<script type="text/javascript">

lista_ini =
window.location.href.indexOf("/Lists/") + 7;

lista =
window.location.href.substr(lista_ini);

lista_fin = lista.indexOf("/");

lista = lista.substr(0, lista_fin);

$(document).ready(function () {

// Formato de la imagen

lista_ini =
window.location.href.indexOf("/Lists/") + 7;

lista =
window.location.href.substr(lista_ini);

lista_fin = lista.indexOf("/");

lista = lista.substr(0, lista_fin);

$(document).ready(function () {

// Formato de la imagen

$('.ms-listviewtable > tbody > tr > td:nth-
child(1)
img[src*="noticias"]').addClass('noticia_genera
l_left_img_sharepoint');

// Formato del título

$('.ms-listviewtable > tbody > tr > td:nth-
child(2)').addClass('noticia_general_right_titl
e_sharepoint');


$('.noticia_general_right_title_sharepoint').pr
epend('> ');

// Formato del resumen

$('.ms-listviewtable .ms-rtestate-
field').addClass('noticia_general_right_gray_sh
arepoint');

// Formato de la fecha

$('.ms-listviewtable > tbody > tr > td:nth-
child(3)').addClass('noticia_general_right_date
_sharepoint');


$('.noticia_general_right_date_sharepoint').app
end('<br/><div
class="noticia_general_right_date_sharepoint_se
p"></div>');

// Formato de la línea de división

$('.ms