Usando Client Object Model do SharePoint 2010 para melhorar a Experiência do Usuário (UX) | Thiago Silva - Especialista SharePoint
Home > Artigo, SharePoint - Tips & Tricks	> Usando Client Object Model do SharePoint 2010 para melhorar a Experiência do Usuário (UX)
April 25, 2010 Thiago Silva	Leave a comment Go to comments
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
· 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:
//Abrir o Dialog
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
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
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:
options.url = "http://doneit-note-002/Lists/Announcements/NewForm.aspx?RootFolder=&IsDlg=1&quot;; //URL que o Dialog irá abrir
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback); //função que recebe a resposta da ação do usuário
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
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
SP.UI.Notify.addNotification("<img src='_layouts/images/loadingcirclests16.gif'> loading…", false, "", null);
3.5. Nosso código deverá se parecer com este:
statusId = SP.UI.Status.addStatus("Alerta: ", "Área Restrita. <a href='#' onclick='javascript:RemoveStatus();'>Clique aqui</a> para remover este aviso.", true);
<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!
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!
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
Categories: Artigo, SharePoint - Tips & Tricks Tags: Client Object Model, Modal Dialog, Notify, SharePoint 2010, Status, User Experience, UX
Herdando e setando MasterPage usando o Site Pai Vinculando Controles ASP.NET no SharePoint usando WebUserControl