domingo, 29 de junio de 2014

JSlink para una lista de Anuncios

Voy a mostrar un step by step para mejorar la interfaz de una lista de anuncios mediante jslink. Ej de cómo quedaría.

image

Agrego un App de Anuncios

image

image

image

Agrego una página para mi homepage

image

image

Agregamos el web part de anuncios

image

image

Una vez agregado el web part, actualizamos la vista default de la app. Agregamos los siguientes campos:

image

Agregamos un par de ejemplos de anuncios

image

Ahora lo importante, creen un archivo de javascript (Ej: CSRNews.js) y agreguen lo siguiente

(function () {

var itemCtx = {};
itemCtx.Templates = {};

itemCtx.Templates.Header = "<table>";
itemCtx.Templates.Item = ItemOverrideFun;
itemCtx.Templates.Footer = "</table>";

itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 104;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

})();

function ItemOverrideFun(ctx) {

var _announcementTitle = ctx.CurrentItem.Title;
var _announcementDesc = ctx.CurrentItem.Body;
var _announcementID = ctx.CurrentItem.ID;
var fecha = ctx.CurrentItem.Modified;

var monthNames = [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio","Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ];
var d = new Date(fecha);
 
return "<tr><td style='vertical-align:top'>" + "<div class='dateBox'><div class='dayDateBox'>" + d.getDay() + "</div><div class='monthDateBox' >" +  monthNames[d.getMonth()] + "</div></div>"+ "</td><td><b>" + _announcementTitle + "</b>" + _announcementDesc +"<a href='/Lists/Announcements/DispForm.aspx?ID='"+ _announcementID + "'> Read More…</a><p></p></td></tr>";
}

Suba el archivo js, a la siguiente librería

image

image

Editamos el web part y agregamos lo siguiente en la sección de “Varios\Vinculo js”

image

~site/SiteAssets/CSRNews.js

image

Ahora cambiamos el atributo vista selecciona a “Todos los Elementos”

image

La vista nos queda de la siguiente manera

image

A continuación agrego un web part Script editor

image

y agrego el siguiente estilo de css

<style>
/*  date Box */
.dateBox
{
    width: 50px;
    height: 50px;
    background-color: #f58228;
    padding-left: 8px;
    margin-right: 5px;
    margin-top:0px;
}
.dayDateBox
{
    font-size: 25px;
    line-height: 25px;
    color: white;
    padding-top: 3px;
}
.monthDateBox
{
    font-size: 12px;
    color: white;
}
</style>

image

Guarda la página, y el web part de anuncios quedo de la siguiente manera.

image

5 comentarios:

  1. Muchas gracias, me ha resultado de gran ayuda.

    Un saludo.

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Buenas tardes,

    ¿Es posible ordenar los anuncios por un campo concreto?

    Gracias.
    Un saludo.

    ResponderEliminar
  4. en el recuadro anaranjado no me aparece la fecha ???????????

    ResponderEliminar