Geral Office 365 SharePoint SharePoint 2013

Consultas no Javascript Object Model do SharePoint de forma síncrona e assíncrona

Olá pessoal!

Vou dar uma dica hoje de como podemos fazer consultas utilizando o javascript side object model do SharePoint para fazermos consultas, tanto na forma padrão assíncrona, como também no formato síncrono.

Antes de continuarmos, você pode estar se perguntando,

O que é uma consulta síncrona e uma consulta assíncrona?

De forma bem simples, um código síncrono se dá quando faço uma requisição e a minha execução atual aguarda o retorno do processamento, e um código assíncrono se dá quando faço uma requisição e continuo a execução do meu código, sem esperar necessariamente pelo retorno do processamento dessa requisição.

O javascript side object model do SharePoint por padrão executa o código de forma assíncrona, ou seja, eu faço a requisição para ele, e continuo a execução do código, tratando o retorno posteriormente.

Conhecendo a forma padrão do SharePoint (assíncrona)

Vamos fazer um código simples agora para execução de uma consulta à uma lista do SharePoint, recuperando todos os dados dessa lista de forma assíncrona.

Obs: O código desse exemplo está no meu repositório GitHub, que você pode encontrar nesse link:

https://github.com/douglasromao/SP-Javascript-CSOM-Examples

Primeiro, vamos fazer o carregamento do script sp.js, o script necessário por carregar as funções do object model do SharePoint para javascript. Perceba que o terceiro parâmetro do método é o nome da nossa função que o código vai executar assim que finalizar o carregamento no script sp.js. (no nosso exemplo vamos criar uma função chamada buscarItensAssincrono)

Lembre-se de referenciar os scripts do jquery antes de começar também. 🙂

$(document).ready(function () {
        //Carregando os scripts necessáriso para a execução de comandos no SharePoint      
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', buscarItensAssincrono);
});


Agora vamos construir a nossa função propriamenta dita:

function buscarItensAssincrono() {
 //Recuperando o contexto de execução do código
 var clientContext = new SP.ClientContext.get_current();

 //Recuperando o contexto de execução do código
 var list = clientContext.get_web().get_lists().getByTitle(nomeLista); 
 
 //Instanciando um objeto CAML para fazermos a consulta
 var camlQuery = new SP.CamlQuery(); 
 
 //Começando a montar a execução, chamando o método getItems do object model javascript
 var items= list.getItems(camlQuery); 
 
 clientContext.load(items); 
 clientContext.executeQueryAsync(function () {
  //A consulta deu certo
 
 //Recuperando o retorno e jogando em uma lista
 var listItemEnumerator = items.getEnumerator(); 
 
 //Percorrendo os itens encontrados
 while (listItemEnumerator.moveNext()) 
 { 
 var listItem = listItemEnumerator.get_current(); 
 
 //Mostrando no console do browser o Titulo do item
 console.log(listItem.get_item('Title')); 
 } 
 
 console.log('Consulta concluída com sucesso.');
 },
 function (sender, args) 
 { 
   //Ocorreu um problema
 console.log('Ocorreu o seguinte erro:' + args.get_message()); });
 ); 
 
}

Com a função acima, vamos executar o método de forma assíncrona, utilizando o padrão de execução do próprio object model do SharePoint. Se você acompanhar o console do seu browser vai ver que conforme os resultados vão sendo encontrados eles serão logados mas a requisição em si já foi feita e terminada.

Conhecendo a requisição de forma síncrona

Agora, vamos fazer um código simples agora para execução de uma consulta à uma lista do SharePoint, recuperando todos os dados dessa lista de forma síncrona.

Vamos usar o mesmo princípio do modelo assíncrono citado acima, mudando agora para a nossa função buscarItens, de forma síncrona:

$(document).ready(function () {
        //Carregando os scripts necessáriso para a execução de comandos no SharePoint      
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', buscarItens);
});

Vamos construir nossa função de forma síncrona, agora, vamos precisasr de mais uma função para utilizarmos o recurso de deferred do jquery para garantir que a consulta seja síncrona.

Para saber mais sobre a utilização do deferred/promisses no jquery, veja no link abaixo:

https://api.jquery.com/category/deferred-object/

function buscarItensSincrono() {

//Chamando nossa função que força o modo síncrono de execução e utilizando o recurso THEN para aguardar a finalização da requisição e processamento
 executaConsultaAssincrona(nomeLista).then(
 //Recebendo o retorno dos itens consultados
 function (items) {
 
 var listItemEnumerator = items.getEnumerator();
 
 //Percorrendo os itens encontrados
 while (listItemEnumerator.moveNext()) 
 { 
 var listItem = listItemEnumerator.get_current(); 
 
 //Mostrando no console do browser o Titulo do item
 console.log(listItem.get_item('Title')); 
 } 
 
 console.log('Consulta concluída com sucesso.');
 },
 function (sender, args) {
 console.log('Ocorreu o seguinte erro:' + args.get_message());
 }
 ); 
 
}

function executaConsultaAssincrona(nomeLista) {
 
 //Vamos usar o $.Deferred na função executeQueryAsync para forçar o código a executar um modelo síncrono de requisição
 var deferred = $.Deferred();
 
 //Recuperando o contexto de execução do código
 var clientContext = new SP.ClientContext.get_current();

//Recuperando o contexto de execução do código
 var list = clientContext.get_web().get_lists().getByTitle(nomeLista); 
 
 //Instanciando um objeto CAML para fazermos a consulta
 var camlQuery = new SP.CamlQuery(); 
 
 //Começando a montar a execução, chamando o método getItems do object model javascript
 var items = list.getItems(camlQuery);
 
 clientContext.load(items);
 clientContext.executeQueryAsync(
 Function.createDelegate(this,
 function () { 
 
 //Passarmos para o deferred fazer o resolve dos itens e retorná-los
 deferred.resolve(items); 
 
 }),
 Function.createDelegate(this,
 function (sender, args) { 
 //Retornando o erro em caso de falha na requisição
 deferred.reject(sender, args); 
 }));

return deferred.promise();
};

Com a função acima, podemos executar de forma síncrona a solicitação e a mudança no código é pequena, somente utilizando o $.deferred do jquery para fazer com que o código entenda que deve aguardar a execução para continuar seu processamento.

*Para testar esse código, você pode utilizar uma página qualquer do seu SharePoint, adicioonando o código por uma webpart Script Editor ou diretamente pelo SharePoint Designer.

Espero que essa dica seja útil e precisando de algo estou à disposição,

Até a próxima!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.