Vida Programadora

Olá pessoal tudo bom? A um bom tempo que não posto nada no blog, mas como hoje foi um dia calmo consegui escrever uma postagem. Vamos lá!
Em quase todas os clientes que passei todos pediam uma especie de visualizador de notícias. Para isso sempre tinha uma web part pronta para isso. Contudo resolvi mudar um pouco a forma de fazer utilizando apenas algumas funcionalidades do SharePoint 2010 em conjunto com Jquery.

A ideia:

Criar uma visualização de notícias que será exibida a partir de dados de uma lista.

O que utilizarei?

REST Interface;
Jquery;
Json;

Apenas um detalhe: Não sou um designer então desculpe o layout, prometo que quando puder converso com um amigo meu para deixar mais bacana o layout.

Bom ao trabalho:
Primeiro vou criar minha lista de Avisos:

Após criada a lista vamos nas configurações da lista e adicionar 2 colunas:

Mensagem: Coluna que irá conter o texto que será exibido na nossa página principal;

TipoMensagem: Coluna que irá informar se o aviso é uma noticia ou um anuncio;

Resultado final da nossa lista com alguns dados cadastrados:

Feito isso agora vamos na nossa biblioteca de estilos e adicionar a biblioteca do Jquery que pode ser baixada em http://docs.jquery.com/Downloading_jQuery. Aqui estou usando a versão 1.7.2. Apenas fiz o download no link informado e fiz o upload do arquivo jquery-1.7.2.js para a biblioteca de estilos.

Feito isso agora vamos a parte interessante: A nossa funcionalidade de notícias deverá ser atualizada a cada 10 segundos, exibindo sempre os últimos 3 avisos do tipo notícia. Dessa forma sempre que um uma notícia nova for cadastrada ela irá aparecer em nossa listagem. Para fazer isso utilizei o ajax "do" jquery para buscar dados via rest (wcf?) da lista do SharePoint. Os dados são recebidos em formato Json. Logo abaixo do post colocarei todas as referências. Agora a pergunta: Porque utilizou Rest? Simples: Com ele consigo filtrar, ordenar, paginar, etc, os dados que vem da minha lista!!!! : )

Chega de conversar, vamos a funcionalidade:

Vá até a página onde as noticias deverão ser exibidas.

Vá no menu: Ações do Site > Editar Página;

Na tela que será aberta seleciona a zona de web part onde você quer que as notícias apareçam e clique em Adicionar uma web part.

No menu que será exibido selecione: Mídia e Conteúdo > Editor de Conteúdo > Adicionar;

Após adicionar clique no link "Clique aqui para adicionar novo conteúdo".

Observe o menu superior e clique em HTML > Editar Origem HTML;

Na janela que será aberta informe o seguinte código:

<div>

<style>

.geral {

        WIDTH: 500px; FONT-FAMILY: verdana; COLOR: #56564b; FONT-SIZE: 11px

    }

.mensagem {

    BORDER-BOTTOM: #73b5de 1px solid;

    BORDER-LEFT: #73b5de 1px solid;

    PADDING-BOTTOM: 1px;

    LIST-STYLE-TYPE: none;

    MARGIN: 3px 1px;

    PADDING-LEFT: 2px;

    PADDING-RIGHT: 1px;

    HEIGHT: 50px;

    BORDER-TOP: #73b5de 1px solid;

    FONT-WEIGHT: normal;

    BORDER-RIGHT: #73b5de 1px solid;

    PADDING-TOP: 2px

}

.tituloMensagem {

        MARGIN: 1px 1px 4px 4px;

        FONT-WEIGHT: bold

}

</style>

<script src="/Style%20Library/jquery-1.7.2.js" type="text/javascript"></script>

<script type="text/javascript">

function CarregarRss()

    {

        $("#dvProcessandoFeed").toggle('fast');

        $("#dvFeeds").toggle('slow');                                   

       

        var Url = "http://srv/_vti_bin/ListData.svc/Avisos?$filter=(TipoMensagemValue eq 'Noticia')&$orderby=ID desc&$top=3";

         $.ajax({

           url: Url,

           dataType: 'json',

           success: CallBack

           });

    }

    function CallBack(retorno) {

        $("#dvFeeds > div").remove();

        $.each(retorno.d, function (dado) {

            var elemento = $("#dvGeralFeed");

            $("#dvFeeds").append('<div class="mensagem"><div class="tituloMensagem">'+retorno.d[dado].Título+'</div>'+retorno.d[dado].Mensagem+'</div>');

        });

        $("#dvProcessandoFeed").toggle('slow');

        $("#dvFeeds").toggle('slow');   

    }

    setInterval(CarregarRss,10000);

    </script>

    <div id="dvProcessandoFeed" style="display: none">

        <img alt="Pesquisando feeds" src="/_layouts/images/loadingcirclests16.gif"/> Processando feeds

    </div>

<div class="geral" id="dvFeeds" style="display: block">

</div>

</div>

Com relação ao código o maior destaque vai para a seguinte linha:

var Url = "http://srv/_vti_bin/ListData.svc/Avisos?$filter=(TipoMensagemValue eq 'Noticia')&$orderby=ID desc&$top=3";

Vamos explica-la com mais detalhes:

Estamos acessando a lista de Avisos via rest. nesse caso executamos um filtro para buscar apenas os avisos que são do tipo noticia:

$filter=(TipoMensagemValue eq 'Noticia')

Aqui temos uma pegadinha: quando efetuamos filtros por campos do tipo opção(choice) temos que adicionar a palavra Value no final. Logo nosso campo que se chamava TipoMensagem virou TipoMensagemValue. Em seguida fazemos a comparação se ele e igual (eq) a Noticia.

Outro ponto importante é a ordenação. Como eu disse deveriamos exibir apenas as últimas 3 noticias, por isso ordenei pelo ID de forma decrescente e busquei apenas os 3 primeiros registros dessa consulta. Tudo isso apenas fazendo:

$orderby=ID desc&$top=3"

Legal não?

Outro "pulo do gato" é a linha: