SharePoint + jQuery + Web Services

2013-01-06 Off Por gambin

 

SharePoint + jQuery + Web Services

 

Olá Pessoal!

Gostaria de apresentá-los a uma biblioteca jQuery muito bacana criada pelo Marc D Anderson, que torna a utilização de web services do SharePoint via jQuery muito, mas muito fácil mesmo 🙂

Estou falando da biblioteca SPServices, que está disponível inteiramente ‘de grátis’ no seguinte endereço:

http://spservices.codeplex.com/

 

Mas o que eu posso fazer com ela?

Acalme-se pequeno gafanhoto, você pode fazer muitas coisas!

Vamos ver alguns exemplos bacanas de uso, mas precisamos saber quais são seus requisitos:

  • jQuery 1.8+ (compatível com a versão atual, 1.8.3).

 

Fazendo o download

Segue abaixo o link de download do SPServices:

http://spservices.codeplex.com/downloads/get/370191

 

Será feito o download de um arquivo “.zip”, mas você irá utilizar apenas o seguinte arquivo:

jquery.SPServices-0.7.2.min.js

 

Faça upload deste arquivo para seu site SharePoint. Certifique-se de utilizar uma biblioteca de documentos do qual todos os usuários que acessarem as páginas que requerem esta biblioteca jQuery tenham acesso ao arquivo.

 

Como utilizar em meu SharePoint?

Você pode fazer de duas maneiras:

  • Se for utilizar na grande maioria das páginas ou em todas elas, poderá adicionar o seguinte código na  master page do site, mais especificamente dentro da tag <head>:
<head>
...
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<CAMINHO-DO-SEU-SITE>/jquery.SPServices-0.7.2.min">
</script>
</head>
  • Se for utilizar em apenas uma ou outra página específica, basta adicionar o seguinte código no Content Place Holder PlaceHolderAdditionalPageHead, conforme modelo abaixo:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
...
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<CAMINHO-DO-SEU-SITE>/jquery.SPServices-0.7.2.min"></script>
...
</asp:Content>

Pronto!

 

Documentação

A documentação do SPServices é bem completa, e pode ser acessada no seguinte link:

http://spservices.codeplex.com/wikipage?title=$().SPServices&referringTitle=Documentation

 

O fórum de discussões também é muito útil:

http://spservices.codeplex.com/discussions

 

Exemplos

Chegamos ao que interessa!

Vamos criar um exemplo bem simples sobre acessar, inserir e excluir dados de uma lista via jQuery através do browser. Para isso siga o seguinte procedimento:

[ATENÇÃO]

– Execute por sua conta e responsabilidade.

– Utilize sempre um ambiente de dev isolado para aprender coisas novas 🙂

[ATENÇÃO]

 

Crie uma lista personalizada no seu SharePoint chamada “Churros” (o exemplo do bolo já está ultrapassado ;p);

Crie os seguintes recheios itens: Brigadeiro, Doce de Leite, Chocolate;

Você pode utilizar agora qualquer navegador ou o próprio SharePoint Designer para testar/ implementar seu código, mas pela praticidade oferecida na manipulação e debug de javascript, recomendo a utilização do Google Chrome para esta tarefa;

Seguindo o exemplo no Google Chrome, acesse o site e pressione a tecla F12;

Clique na aba Console, conforme a figura abaixo:

Google Chrome Console

 

Digite (ou copie, bem melhor ;p) o seguinte comando:

$().SPServices({
  operation: "GetListItems",
  listName: "Churros",
  completefunc: function (xData, Status) {
    $(xData.responseXML).SPFilterNode("z:row").each(function() {
      alert($(this).attr("ows_Title"));
    });
  }
});

Viu como é fácil saber quais são os recheios da nossa lista de churros!

E que tal criar um novo recheio?

var recheio = "Morango";

$().SPServices({
  operation: "UpdateListItems",
  batchCmd: "New",
  listName: "Churros",
  valuepairs: [["Title", recheio]],
    completefunc: function(xData, Status) {
      alert("Sabor " + recheio + " adicionado com sucesso!");
    }
});

Pronto para remover o recheio de Brigadeiro?

var recheio = "Brigadeiro";
var idRecheio = "1";

$().SPServices({
  operation: "UpdateListItems",
  batchCmd: "Delete",
  listName: "Churros",
  ID:idRecheio,
  valuepairs: [["Title", recheio]],
    completefunc: function(xData, Status) {
      alert("Sabor " + recheio + " removido com sucesso!");
    }
});

Fácil né?

Imagine que agora você pode trabalhar com vários web services, compatíveis com o WSS 3, MOSS 2007, SharePoint Foundation e SharePoint Server de uma forma simples e prática, sem a necessidade de uma customização mais avançada (como desenvolvimento  em .Net, criação de webparts, entre outros).

Evidentemente que se deve também ter muita cautela em sua implementação, afinal códigos em javascript são executados no cliente e estão suscetíveis à configurações de cada browser.

Você quis dizer: segurança?

Sim! Isso mesmo 😀

Ultimamente ando utilizando esta biblioteca com certa frequência para customizações visuais, criação de menus personalizados, entre outras ações relacionadas à usabilidade do usuário final (que estarão registradas nos próximos posts! Uhulll ;p).

Espero que tenham gostado e até o próximo post!

[]’s