Usando Client Object Model do SharePoint 2010 para melhorar a Experiência do Usuário (UX)

Com o lançamento do SharePoint Foundation 2010 e SharePoint Server 2010, a Microsoft introduziu novas funcionalidades ao produto. Uma delas, o Client Object Model, usando Javascript podemos, rapidamente, dar uma experiência muito mais rica ao usuário que utilizar a plataforma SharePoint 2010.

por Thiago Silva

Overview

Com o lançamento do SharePoint Foundation 2010 e SharePoint Server 2010, a Microsoft introduziu novas funcionalidades ao produto. Uma delas, o Client Object Model, usando Javascript podemos, rapidamente, dar uma experiência muito mais rica ao usuário que utilizar a plataforma SharePoint 2010.

Neste artigo, vou detalhar como podemos utilizar o Dialog Box, Notification Area e o Alert Area. Veja, nas imagens abaixo estes recursos em ação:

Dialog Box – SP.UI.ModalDialog

Notification Area - SP.UI.Notify

Alert Area - SP.UI.Status

Solução

Para essa solução vou trabalhar com os seguintes produtos e tecnologias:

· Windows 7 Enterprise;

· SharePoint Foundation 2010 BETA;

· Visual Studio 2010 Ultimate BETA;

· SQL Server 2008 Express;

Vamos nessa?! Go! Go!

Criando nosso projeto no Visual Studio 2010 para SharePoint 2010

Este artigo não irá detalhar como criar, configurar e efetuar o deploy de WebParts no SharePoint 2010, caso precise de informações sobre este passo, veja: Visual Web Parts no SharePoint 2010.

1. Usando o Dialog Box do SharePoint 2010

1.1. Crie uma nova Visual WebPart, dê o nome de UIDemo (vamos utilizar esta mesma Web Part em todas as demonstrações realizadas neste artigo) e depois clique em Add;

1.2. Automaticamente, o Visual Studio irá abrir o arquivo .ascx, ou, no nosso caso, o UIDemoUserControl.ascx. Logo abaixo das tags de registro, adicione o seguinte script que usa o SP.UI.ModalDialog:

<script type="text/javascript">

//Abrir o Dialog

function OpenDialog() {

var options = SP.UI.$create_DialogOptions(); //variável que recebe as opções do Dialog

options.url = "http://www.bing.com.br/"; //URL que o Dialog irá abrir

options.width = 500; //largura do Dialog

options.height = 400; //altura do Dialog

options.dialogReturnValueCallback = Function.createDelegate(null, null); //função que recebe a resposta da ação do usuário, iremos usar isso posteriormente

SP.UI.ModalDialog.showModalDialog(options); //chamando o Dialog Box

}

</script>

1.3. Logo abaixo da tag de fechamento do Script, vamos usar um hyperlink para iniciar a função, algo bem simples, como este código abaixo:

<br /> <a href="Javascript:OpenDialog();">Clique aqui</a> para iniciar a Demo!

1.4. Ao realizar estas tarefas, seu código deve se parecer com este abaixo:

1.5. Efetue o deploy da nossa WebPart e depois adicione-a ao seu site SharePoint, vamos testá-la!

Neste ponto, utilizamos o Dialog Box para abrir uma URL que escolhemos. No próximo passo, vamos utilizar o Notification Area pegando o Callback do Dialog Box, e assim mudando a mensagem pro usuário de acordo com a ação Ok ou Cancel do Dialog Box.

2. Usando o Notification Area juntamente com o Dialog Box

2.1. Voltando ao nosso projeto, vamos adicionar mais linhas ao nosso script. Adicione o seguinte:

var messageId; //variável que irá receber a notificação

//função que recebe a resposta da ação do usuário

function CloseCallback(result, target) {

if (result === SP.UI.DialogResult.OK) //Se o usuário fechar clicando em Ok ou Save

{

messageId = SP.UI.Notify.addNotification("<img src="_layouts/images/loadingcirclests16.gif"> Operação realizada com <b>sucesso!</b>...", false, "", null);

}

if (result === SP.UI.DialogResult.cancel) //Se o usuário fechar clicando em Cancel ou fechando a janela no "X"

{

SP.UI.Notify.addNotification("A Operação foi cancelada...", false, "", null);

}

}

2.1.1. Nota: Observem que usei tags HTML no Notification Area.

2.2. Mude a linha do script do Dialog para pegar esta função, remova as definições de tamanho do Dialog, e altere a URL para uma URL válida de New Item de uma das listas do SharePoint. Veja como fica a função atualizada:

//Abrir o Dialog

function OpenDialog() {

var options = SP.UI.$create_DialogOptions(); //variável que recebe as opções do Dialog

options.url = "http://doneit-note-002/Lists/Announcements/NewForm.aspx?RootFolder=&IsDlg=1"; //URL que o Dialog irá abrir

options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback); //função que recebe a resposta da ação do usuário

SP.UI.ModalDialog.showModalDialog(options); //chamando o Dialog Box

}

2.3. Ao final de todas estas modificações, seu código deverá se parecer com este aqui:

2.4. Agora vamos lá, Deploy e vamos testar nossa WebPart atualizada:

2.4.1. Ao cancelar a janela:

2.4.2. Ao salvar o item:

Neste ponto, usamos o Notification Area para quando a resposta do usuário ao Dialog Box, exibir determinada mensagem. Agora vamos um pouco mais de funcionalidade à nossa demo usando o Alert Area.

3. Usando o Alert Area para indicar uma área restrita do site

3.1. Voltando ao nosso projeto, vamos adicionar mais linhas ao nosso script. Adicione o seguinte à nossa função de retorno da ação do DialogBox (CloseCallback):

//adicionando o alerta, vejam que aqui também podemos utilizar Tags HTML

statusId = SP.UI.Status.addStatus("Alerta: ",

"Área Restrita. <a href="#" onclick="javascript:RemoveStatus();">Clique aqui</a> para remover este aviso.", true);

SP.UI.Status.setStatusPriColor(statusId, "red"); //setando a cor do respectivo alerta

3.2. E também a função que chamamos para remover o Alerta:

//função para remover o Alerta

function RemoveStatus() {

SP.UI.Status.removeStatus(statusId);

}

3.3. Como obersaram usei um nova variável, então, também devemos declará-la no código:

var statusId; //variável que irá receber os alertas para Alert Area

3.4. No final, implementei mais uma função para ilustrar um pouco, como podemos usar essas novas funcionalidades para melhorar a Experiência do Usuário:

//função apenas para ilustrar como podemos usar o Notification Área

function Loading() {

SP.UI.Notify.addNotification("<img src="_layouts/images/loadingcirclests16.gif"> loading...", false, "", null);

}

3.5. Nosso código deverá se parecer com este:

<script type="text/javascript">

//Abrir o Dialog

function OpenDialog() {

var options = SP.UI.$create_DialogOptions(); //variável que recebe as opções do Dialog

options.url = "http://doneit-note-002/Lists/Announcements/NewForm.aspx?RootFolder=&IsDlg=1"; //URL que o Dialog irá abrir

options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback); //função que recebe a resposta da ação do usuário

SP.UI.ModalDialog.showModalDialog(options); //chamando o Dialog Box

}

var messageId; //variável que irá receber a notificação

var statusId; //variável que irá receber os alertas para Alert Area

//função que recebe a resposta da ação do usuário

function CloseCallback(result, target) {

if (result === SP.UI.DialogResult.OK) //Se o usuário fechar clicando em Ok ou Save

{

messageId = SP.UI.Notify.addNotification("<img src="_layouts/images/loadingcirclests16.gif"> Operação realizada com <b>sucesso!</b>...", false, "", null);

//adicionando o alerta, vejam que aqui também podemos utilizar Tags HTML

statusId = SP.UI.Status.addStatus("Alerta: ", "Área Restrita. <a href="#" onclick="javascript:RemoveStatus();">Clique aqui</a> para remover este aviso.", true);

SP.UI.Status.setStatusPriColor(statusId, "red"); //setando a cor do respectivo alerta

}

if (result === SP.UI.DialogResult.cancel) //Se o usuário fechar clicando em Cancel ou fechando a janela no "X"

{

SP.UI.Notify.addNotification("A Operação foi cancelada...", false, "", null);

}

}

//função para remover o Alerta

function RemoveStatus() {

SP.UI.Status.removeStatus(statusId);

}

//função apenas para ilustrar como podemos usar o Notification Área

function Loading() {

SP.UI.Notify.addNotification("<img src="_layouts/images/loadingcirclests16.gif"> loading...", false, "", null);

}

</script>

<br /> <a href="Javascript:Loading();OpenDialog();">Clique aqui</a> para iniciar a Demo!

3.6. Vamos lá, novo teste! Faça o Deploy da Webpart e vamos testar o que acontece quando salvamos um novo item:

É isso aí pessoal! Enjoy it!

Conclusão

Nesse artigo nós apresentamos como utilizar três das principais novidades na Experiência do Usuário (UX) usando o novo SharePoint 2010.

Como puderam perceber, podemos utilizar estes recursos em nossas aplicacões customizadas e garantir uma boa experiência do usuário que utiliza a plataforma SharePoint 2010.

E o SharePoint 2010 não para por aqui, ainda há muito coisa nova, como os Ribbons, por exemplo!

Informações adicionais:

Podemos utilizar o Client Object Model do SharePoint para muita coisa e não somente para UI. Confiram:

http://msdn.microsoft.com/en-us/library/ee857094(office.14).aspx – Using the SharePoint Foundation 2010 Managed Client Object Model