SharePoint + REST – Part 2

Olá Developers,

Essa é a segunda parte do assunto SharePoint + REST, na  Part 1, não abordei tudo a respeito da REST Query, então para mais informações podem acessar esse link:  REST Query .

Nesta segunda parte vamos trabalhar com os retornos das queries realizadas usando o serviço REST.

É muito simples então não vou entrar em muitos detalhes explicando trecho de código, mas caso surja dúvidas podem me deixar nos comentários.

Parti para estrategia de trazer tudo em uma tabela, veja o trecho de código abaixo:

 $.ajax({
        url: siteUrl + "/_api/web/lists/getbytitle('Projetos')/Items?$select=Title,Versao,Horas", //Coloca o URL 
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var tabela = "<table border=1><tr>";
            tabela += "<th>Title</th>";
            tabela += "<th>Versão</th>";
            tabela += "<th>Horas</th></tr>";
            for (var i = 0; i < data.d.results.length; i++) {
                tabela += "<tr><td>" + data.d.results[i]["Title"] + "</td>";
                tabela += "<td>" + data.d.results[i]["Versao"] + "</td>";
                tabela += "<td>" + data.d.results[i]["Horas"] + "</td></tr>";
            }
            tabela += "</table>";
            $("#Grid").html(tabela);
        }
    });

 

Todo código html escrevi dentro do success, não impede de ser criadas function para a geração do html, sem problema algum.

Vejam o resultado que foi gerado na tela:

rest4

É isso ai galera!

Esse foi mais um post rápido, sempre que sobrar um tempinho vou compartilhando um pouco de conhecimento com vocês.

Um grande abraço.

SharePoint + Rest – Part 1

Olá, aproveitando o meu post anterior, resolve falar um pouco de Rest api, os desenvolvedores front-end adoram essa api!

Caso alguém, antes de dar prosseguimento neste post não esteja iterado do assunto SharePoint + Rest, é só clicar no link.

Vamos lá vou esclarecer um ponto, este post funciona tanto para SharePoint 2010 e 2013, temos que nos atentar neste detalhe:

SP 2010 SP 2013
/_vti_bin/listdata.svc/ /_api/web/ ou /_vti_bin/listdata.svc/

Depois dessa informação, vamos para os códigos :).

Meus exemplos serão todos usando /_api/web/ !!!!

Eu gosto muito de usar o método $Ajax do JQuery:

$.ajax({
   url: url, //Coloca o URL 
   method: "GET",
   headers: { "Accept": "application/json; odata=verbose" },
   success: function (data) {
        console.log(data.d.results) //Imprime resultado no console do
                                    //navegador
   }
});
  • Selecionar todos items e todas colunas de uma lista 

Esta é a maneira mas simples de pegar os itens da lista:

/_api/web/lists/getbytitle('Projetos')/Items?$select=*

Na imagem abaixo, retornou todos os itens da minha lista e todas as colunas grifei as principais que usei no post anterior.

rest1

  • Selecionando itens e definindo colunas

Vamos selecionar os items da lista sem usar filtro, mas definiremos as colunas, é bem simples, veja o exemplo:

/_api/web/lists/getbytitle('Projetos')/Items?$select=Title,Versao,Horas

Vejam que retorna exatamente as colunas que foram selecionadas!

rest2

  • Selecionando itens, definindo colunas e usando filtro

Agora de fato faremos um busca mais apurada na lista passando filtros. 

/_api/web/lists/getbytitle('Projetos')/Items?$select=Title,Versao,Horas&$filter=Title eq 'Projeto 2'

Como no meu filtro tinha definido o ‘Projeto 2’, me retornou a minha seleção e as colunas definidas.

rest3

Galera, por hoje é só, fiz este post rapidinho devido ao tempo reduzido, mas logo faço uma parte-2, dando mais algumas dicas.

Abs 🙂

Usando C3 JS + SharePoint 2013

Galera, já tinha muito tempo que queria compartilhar com vocês uma solução usando SharePoint e C3.JS. Acho essa api sensacional é muito valido usarmos ela para geração de gráfico, além de ser totalmente free e muito fácil de usar.

Vamos criar uma WebPart, muita gente fala mas solução nesse formato de .wsp irão sumir, não se usa mais, mas agora temos outro conceito de reutilizar e bla..bla…bla… kkkkkk

Concordo com todos comentários a este respeito, mas atualmente uso muito .wsp, por questão de politica da área de gerenciamentos de projetos na companhia que atuo como arquiteto.

Mãos a obra, primeiramente uma observação, quando código JS roda antes da página do SharePoint terminar o load, precisamos garantir que o JS seja carregado antes de executar no DOM, então usei esta função.

  function onReady(selector, callback) {
        var intervalID = window.setInterval(function () {
            if (document.querySelector(selector) !== undefined) {
                window.clearInterval(intervalID);
                callback.call(this);
            }
        }, 500);
    }

 

Agora vamos criar um WebPart, presumo que todos já saibam criar um WP no VS, caso não podem olhar esse link https://msdn.microsoft.com/en-us/library/ee231546.aspx.

Vejam como ficou meu meu projeto.

Chart_Solution

Segundo passo vamos adicionas as referências:

Chart_Reference

Como exemplo criei uma lista chamada projetos, onde vou mostrar os projetos -> Mês x Horas.

blogLista

Legal, agora vou explicar como fiz para manipular as informação de forma dinâmica, ou seja, como o JS conversou com nosso código C# localizado no UserControl.

A imagem abaixo é o .ascx, nele coloquei o c3 js, mas para que os valores fosses atualizado usei HiddenField.

Vejam que usei o c3 dentro da função onReady, para nosso gráfico renderizar sem problemas :).

blogCode

A seguir o ascx.cs, criei um código bem sim, pode ficar tranquilo que vou disponibilizar o fonte, no final.

blogCode1

É simples assim mesmo, vejam o resultado que bacana:

c3Blog

Bar

blogChart

Line

É isso pessoal, este post criei meio rápido, se ficou alguma dúvida pode deixar no comentários que logo responderei.

PS.:Não me esqueci do fonte segue o link:

GSD.ChartWithC3_JS