O uso de tarefas no SharePoint é algo muito comum, seja por meio de workflows que geram tarefas para os usuários, usuários geram tarefas para outros usuários ou outras formas.
Neste post vou mostrar como fazer uma web part em JavaScript (automaticamente atualizada) que exibe todas as tarefas pendentes para o usuário atual, e que também emite um beep sempre que forem encontradas tarefas pendentes. Este exemplo é interessante para ver como utilizar JavaScript e avisar o usuário de forma sonora e não apenas visual.
Este post esta dividido em 2 partes: adicionar a web part de formulário HTML na página e a criação do script e Html para exibição das tarefas.
Crie uma página e coloque-a em edição, feito isso, selecione a opção de adicionar web parts ou Mais Web Parts, como mostra a imagem 01.
Imagem 01: Entrando na opção para selecionar web parts para adicionar na página
Na seção de Formulários, selecione Web Part de Formulário HTML e adicione à página, conforme a imagem 02.
Imagem 02: Selecionando a web part de formulário HTML
Agora vamos editar a web part para colocar o nosso HTML e JavaScript, para isso clique em Editar Web Part, conforme a imagem 03.
Imagem 03: Editando a web part
Esta web part específicamente, por ser uma de formulário HTML, possui a opção de colocarmos o nosso HTML, JavaScript, CSS em seu conteúdo. Para isso vá na opção Editor de Código-fonte…, conforme a imagem 04.
Imagem 04: Editando o conteúdo da web part
Aqui é onde vamos colocar todo o código gerado na segunda parte do post. A imagem 05 mostra a área para edição do código.
Imagem 05: Editando o código HTML, JavaScript, CSS
Clique em Ir para confirmar e salvar as alterações na web part, conforme a imagem 06.
Imagem 06: Salvando as alterações na web part
A imagem 07 mostra o resultado final.
Imagem 07: Exibindo a web part pronta
Ao clicar no título da tarefa, o pop up exibido na imagem 08 é exibido. Nele é possível alterar a tarefa.
Imagem 08: Editando a tarefa
Agora que já vimos como utilizar a web part de formulário HTML, vamos ver como criar o script e suas principais funcionalidades. A listagem 01 mostra a estrutura completa do conteúdo que será utilizado. As funções estão com o conteúdo “. . .” porque vou explicar mais abaixo o comportamento de cada função.
O primeiro trecho do HTML da listagem 01 é o embed, que será o elemento que emitirá o som do beep, este que está salvo na biblioteca de ativos do site. Nas referências do post tem um link para baixar diversos tipos de beep.
A função JavaScript ExecuteOrDelayUntilScriptLoaded é necessária para que o arquivo SP.JS seja carregado antes de nossa função for executada. Sem este comando o objeto de contexto do SharePoint não estará disponível e o nosso código não irá funcionar.
Após seguem as funções as quais estão detalhadas no decorrer deste post, e depois disso está a função setInterval, que é utilizada para chamar a função repetidas vezes a cada X segundos. Neste caso estamos configurando para chamar a função obterTarefasPendentes a cada 10 segundos, dessa forma o usuário não precisa atualizar o navegador para que o conteúdo da web part seja disparado. Altere este valor conforme necessidade de atualização, colocar pelo menos alguns minutos seria algo razoável, mas depende da urgência do usuário.
Por fim o DIV que será utilizado para mostrar as tarefas pendentes, é nele que todo o resultado será exibido.
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(obterTarefasPendentes, "sp.js");
var popUpHeight = 600;
var tarefas;
function obterTarefasPendentes() {
. . .
}
function onQuerySucceeded(sender, args) {
. . .
}
function onQueryFailed(sender, args) {
. . .
}
function mostrarPopup(url){
. . .
}
function playBeep() {
. . .
}
setInterval(function(){obterTarefasPendentes()},10000);
</script>
<div id="resultado">
Listagem 01: Estrutura das funções JavaScript e HTML
A listagem 02 mostra o código da função obterTarefasPendentes, que é responsável por fazer a consulta na lista de tarefas do SharePoint. A primeira parte do código mostra como obter o contexto atual do SharePoint e a lista de tarefas, se a sua lista tiver outro título, é necessário alterar no método getByTitle. Após isso, criamos a CAML query, que é responsável por fazer a seleção nos dados do SharePoint – vamos dizer que é a forma de fazer um SELECT em dados do SharePoint. Repare que a construção da query é feita utilizando XML, mas em um formato bem específico. Aqui estamos buscando tarefas com o campo Status diferente (Neq = not equal) de Concluído e o campo AssignedTo como sendo (Eq = equal) o usuário atual, mas veja que utilizamos a variável UserID, que armazena o ID do usuário logado. Após a construção da query é necessário executá-la na lista de tarefas, carregar os resultados com o método Load e então executar a função executeQueryAssync que é quando os dados serão realmente selecionados. Como estamos utilizando JavaScript, todas as chamadas devem ser assíncronas, para isso ele passa as funções onQuerySucceeded e onQueryFailed para exibir os resultados de sucesso ou falha, mas vamos ver essas funções em seguida.
function obterTarefasPendentes() {
var contexto = new SP.ClientContext.get_current();
var listaTarefas = contexto.get_web().get_lists().getByTitle(‘Tarefas’);
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
‘<View><Query><Where>’ +
‘<And>’ +
‘<Neq><FieldRef Name=\’Status\’/><Value Type=\’Text\’>Concluído</Value></Neq>’ +
‘<Eq><FieldRef Name=\’AssignedTo\’/><Value Type=\’Integer\’><UserID/></Value></Eq>’ +
‘</And>’ +
‘</Where></Query></View>’);
this.tarefas = listaTarefas.getItems(camlQuery);
contexto.load(tarefas);
contexto.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
Listagem 02: Função para buscar as tarefas
Se a execução da função obterTarefasPendentes for feita com sucesso, a função onQuerySucceeded será chamada. A listagem 03 mostra o seu código completo.
Nesta função está sendo montado o HTML que será exibido ao usuário, com base no resultado da consulta ao SharePoint. Repare que na construção das linhas da tabela HTML estamos declarando que a função mostrarPopup está sendo relacionada ao link das tarefas, dessa forma quando o usuário clicar no link, um popup para edição será exibido. Logo abaixo a função playBeep está sendo chamada para que sempre que alguma tarefa for encontrada soe um beep para o usuário. Para finalizar esta função, o div "resultado" será selecionado e o HTML criado será adicionado a ele.
function onQuerySucceeded(sender, args) {
var htmlTarefas = ”;
var listItemEnumerator = tarefas.getEnumerator();
if(tarefas.get_count() > 0)
{
var htmlCabecalho = "<table class=’ms-listviewtable’>" +
"<tr class=”>" +
"<th class=’ms-vh2′><div class=’ms-vh-div’>ID</div></th>" +
"<th class=’ms-vh2′><div class=’ms-vh-div’>Título</div></th>" +
"<th class=’ms-vh2′><div class=’ms-vh-div’>Status</div></th>" +
"</tr>"
while (listItemEnumerator.moveNext()) {
var itemTarefa = listItemEnumerator.get_current();
var url = "/sites/WebCast/Lists/Tarefas/DispForm.aspx?ID=" + itemTarefa.get_id();
htmlTarefas += "<tr setEdgeBorder=’true’ class=’ms-alternating’><td class=’ms-vb2′>" + itemTarefa.get_id() + ‘</td>’ +
"<td class=’ms-vb2′><a href=javascript:mostrarPopup(‘" + url + "’);>" + itemTarefa.get_item(‘Title’) + ‘</a></td>’ +
"<td class=’ms-vb2′>" + itemTarefa.get_item(‘Status’) + ‘</td>’ +
"</tr>" ;
}
var divResultado = document.getElementById("resultado");
divResultado.innerHTML = htmlCabecalho + htmlTarefas.toString() + ‘</table>’;
playBeep();
}
else
{
var divResultado = document.getElementById("resultado");
divResultado.innerHTML = "<div>Nenhuma tarefa pendente</div>";
}
}
Listagem 03: Função que monta o HTML de resultado
Caso a execução da consulta das tarefas feita na listagem 02 tenha algum erro, a função onQueryFailed será chamada e a mensagem de erro exibida ao usuário.
function onQueryFailed(sender, args) {
alert(‘failed to get list. Error:’+args.get_message());
}
Listagem 04: Função para exibir erro da consulta
A função mostrarPopup utiliza a API JavaScript do SharePoint para exibir o popup, a listagem 05 mostra como utilizar esta API.
function mostrarPopup(url){
var options = SP.UI.$create_DialogOptions();
options.url = url;
options.height = popUpHeight ;
SP.UI.ModalDialog.showModalDialog(options);
}
Listagem 05: Função para exibir o popup para editar a tarefa
Por fim, a função playBeep que obtém o elemento HTML com o ID sound1 (o elemento Embed) e faz a chamada da função Play, como mostra a listagem 06.
function playBeep() {
var sound = document.getElementById("sound1");
sound.Play();
}
Listagem 06: Função para soar o beep
Pronto, agora edite a web part que foi apresentada na primeira parte do post e coloque todo o código da listagem 01 dentro dela, da mesma forma que está, só trocando os “. . .” pelas funções existentes nas listagens seguintes.
Agora os seus usuários irão ficar doidos com o beep que é disparado a cada vez que a tela é atualizada, ou melhor, irão ficar agradecidos por que não precisam ficar olhando para descobrir quando existem tarefas novas.
Referêcias
- SharePoint 2010: Client Object Model for JavaScript (ECMAScript)
- How do I make Javascript beep?
- Beep Sounds
