Interagindo com o Usuários Utilizando ECMAScript (SP.UI.Notify e SP.UI.Status)

Overview

Interagir com o usuário através de mensagens em tela é algo muito comum e indispensável, mas como fazer isso utilizando os recursos do SharePoint?

A resposta é utilizando as classes ECMAScript (JS, JavaScript) SP.UI.Notify e SP.UI.Status, ela nos permite interagir com o usuário da mesma forma que o SharePoint faz. 

Solução

O SharePoint 2010 veio com várias classes ECMAScript, as que vamos ver neste post são SP.UI.Notify e SP.UI.Status. Notificações são mensagens exibidas no canto superior esquerdo e status são mensagens exibidas no logo abaixo do cabeçalho. A imagem 01 mostra o resultado dessas classes, a mensagem “Olá Usuário” é uma notificação e a mensagem “Procedimento executado com sucesso!” é um status.

Imagem 01: Notificações ao usuário

Abaixo os principais métodos disponíveis:

  • SP.UI.Notify.addNotification: adiciona uma notificação;
  • SP.UI.Notify.removeNotification: remove a notificação;
  • SP.UI.Status.serStatusPriColor: adiciona um status  com cor de fundo;
  • SP.UI.Status.removeStatus:  remove um status;
  • SP.UI.Status.removeAllStatus: remove todos os status.

A listagem 01 possui exemplos da declaração de funções para serem utilizadas posteriormente, ela mostra a implementação de todos os métodos acima.

<script type="text/ecmascript" language="ecmascript">

var statusId = ”;
var notificacaoId = ”;

function AdicionarNotificacao() {
    notificacaoId = SP.UI.Notify.addNotification("Olá Usuário!", true);
}

function RemoverNotificacao() {
    SP.UI.Notify.removeNotification(notificacaoId);
    notificacaoId = ”;
}

function AdicionarStatusErro() {
    statusId = SP.UI.Status.addStatus("Erro ao executar procedimento");
    SP.UI.Status.setStatusPriColor(statusId, ‘red’);
}

function AdicionarStatusSucesso() {
    statusId = SP.UI.Status.addStatus("Procedimento executado com sucesso!");
    SP.UI.Status.setStatusPriColor(statusId, ‘green’);
}

function RemoverUltimoStatus() {
    SP.UI.Status.removeStatus(statusId);
    statusId = ”;
}

function RemoverTodosStatus() {
    SP.UI.Status.removeAllStatus(true);
}

</script>

Listagem 01: Exemplo de utilização das funções de interação com o usuário

A listagem 02 mostra exemplos de como utilizar as funções da listagem 01.

<input id="Button1" type="button" value="Adcionar Notificação" onclick="AdicionarNotificacao()" />
<input id="Button2" type="button" value="Remover Notificação" onclick="RemoverNotificacao()" />
<p></p>
<input id="Button3" type="button" value="Adicionar status dee sucesso" onclick="AdicionarStatusSucesso()" />
<input id="Button13" type="button" value="Add status de erro" onclick="AdicionarStatusErro()" />
<input id="Button4" type="button" value="Remover último status" onclick="RemoverUltimoStatus()" />
<input id="Button5" type="button" value="Remover todos os status" onclick="RemoverTodosStatus()" />

Listagem 02: Exemplo de utilização das funções da listagem 01

Um bom exemplo de utilização dessas funções é em web parts desenvolvidas, por exemplo, ao salvar um registro exibir a notificação “Salvando…” e ao final da gravação, ocultá-la.

Agradecimento especial ao meu amigo Marlon (@marlonschramm) pela dica.

Fonte: http://msdn.microsoft.com/en-us/library/ff408137.aspx

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s

%d blogueiros gostam disto: