Comunidad SharePoint de Argentina - Presentación sobre Web Parts en SharePoint 2010 por Patricio Belardo

1. Web Parts en SharePoint
2010
Patricio Belardo

2. Sumario
Características generales
Web Parts
Framework de Diálogos
Barra de estados y area de notificación
Modelo de objetos de cliente

3. Web Parts en SharePoint
2010

4. Web Parts en SharePoint 2010
Características
Nuevas características
Web Parts Visuales
Nuevas Plantillas en Visual Studio 2010

5. Web Parts
Nuevas Características
En las versiones anteriores de SharePoint, el
desarrollo de webparts era todo un desafío.
No se podía trabajar “visualmente” en el resultado
que se quería obtener.
Una de las nuevas plantillas de Visual Studio 2010
es la de “Web Part Visuales”, la cual permite a los
desarrolladores diseñar visualmente el webpart y
hacer el deploy de manera directa e intuitiva.

6. Web Part Visuales

7. Demo
Web Part Visuales

8. Framework de Diálogos

9. Framework de Diálogos
Objetivos de diseño
Reducir la transición de páginas y mantener al
usuario en contexto.
Los contenidos se mostrarán en un iframe que
estará dentro de un div
Los diálogos son modales
Pueden ser maximizados como ventanas normales.

10. Framework de Diálogos

11. Framework de Diálogos
Extensibilidad
API de Javascript para el control de diálogos
Los contenidos pueden ser una página o un
DOMElement
Tenemos otros parámetros opcionales, como
ser título, ancho, alto, estado de ventana, etc.
Un diseño de página puede ser utilizado para
mostrarse dentro de un diálogo o fuera de él.

12. Framework de Diálogos
Ejemplo de utilización
function myCallback(dialogResult, returnValue)
{
alert(“Hello World!”);
}
var options = {
url: “/_layouts/somepage.aspx”,
width: 500,
dialogReturnValueCallback:myCallback};
SP.UI.ModalDialog.showModalDialog(options);

13. Framework de Diálogos - Parámetros
Parameter Description
url (string) La URL de la página a ser incluida dentro del diáloo.
SharePoint automáticamente le va a agregar el “Source”
al querystring. Este parámetro especifica a qué página
debería retornar el browser cuando finalice.
html (DOMElement) Se puede especificar un DOMElement en vez de pasar
una URL
title (string) Especifica el título. Si no se especifica se muestra el
título de la página.
x (int) Posición izquierda (píxeles)
y (int) Posición superior (píxeles)
width (int) Ancho (píxeles)
height (int) Alto (píxeles)
showMaximized (bool) { true | false }
Determina el tamaño inicial del diálogo
allowMaximize (maximizable { true | false }
(bool) Habilita o no el botón de maximizado
dialogReturnValueCallback Una función de callback será invocada cuando el
diálogo sea cerrado

14. Demo
Framework de diálogos

15. Barra de Estados / Área de
notificación

16. Barra de Estado / Área de Notificación
Entrega información al usuario sin que sea una distracción en
sus operatorias normales
La barra de estado debería ser utilizada para mostrar
información de persistencia

17. Barra de Estado
Diseño:
Se muestra debajo de la Ribbon
Se utilizarán colores predefinidos dependiendo de la
importancia
Extensibilidad:
API de Javascript para agregar o eliminar mensajes y
especificar el color
API de Server para definir el estado al momento del
render de la página
El mensaje es un HTML y podría incluir links o íconos
Cuando se quieran mostrar múltiples colores, la barra
seleccionará el más “importante”

18. API de Barra de Estado
String SP.UI.Status.addStatus(String Html)
Agrega un mensaje con el HTML dentro de la barra de estado. El
mensaje va a ser siempre agregado a la derecha. Este método
retorna el ID del mensaje.
String SP.UI.Status.appendStatus(sid, strTitle, strHtml)
Agrega un mensaje al mensaje existente especificado por el
parámetro SID. Un nuevo mensaje se creará y el mismo será
retornado.
Bool SP.UI.Status.removeStatus(String sid)
Quita el mensaje indicado en el SID.
Void SP.UI.Status.removeAllStatus()
Remueve todos los mensajes de la barra de estado.
Bool SP.UI.Status.updateStatus(String sid, String Html)
Actualiza el estado en base al SID indicado y el parámetro Html
Void SP.UI.Status.setStatusPriColor(sid, strColor)
Define el color del mensaje

19. Área de Notificación
Diseño:
Aparece a la derecha de la página, por debajo de la
Ribbon
El mensaje por defecto se mostrará por 5 segundos.
Extensibilidad:
API de Javascript para agregar o eliminar mensajes
API de Server para definir el estado al momento del
render de la página
El mensaje es un HTML y podría incluir links o íconos
Existe un parámetro opcional llamado “Sticky” que está
definido para que el mensaje quede fijo. Luego el
mensaje de debería quitar manualmente

20. API de Área de Notificación
String SP.UI.Notify addNotification(String Message, Bool Sticky)
Agrega el mensaje a la barra de notificación. Este método retorna
el ID del mensaje.
Bool SP.UI.Notify.removeNotification(String ID)
Remueve el mensaje indicado en el ID.

21. Demo
Barra de Estados / Área de
notificación

22. Modelo de objetos de Cliente

23. Modelo de objetos de cliente
Modelo de Objetos de Cliente
ECMAScript
Silverlight

24. Comparativa de Modelos de Objetos
Código manejado de .NET y
Servidor
Silverlight ECMAScript
(namespace
(namespace (namespace SP)
Microsoft.SharePoint)
Microsoft.SharePoint.Client)
SPContext ClientContext ClientContext
SPSite Site Site
SPWeb Web Web
SPList List List
SPListItem ListItem ListItem
SPField (including major Field Field
derived classes)
WebPartPages.SPLimitedWe WebParts.LimitedWebPartMa WebParts.LimitedWebP
bPartManager nager artManager

25. Obtención de Datos
El contexto de cliente es obtenido mediante el uso del constructor ClientContext().
Luego se debe utilizar el modelo de objetos para especificar qué objetos obtener.
Para cargar el objeto o colección se puede utilizar una de las siguientes opciones:
A través de un llamado al método “Load()” para obtener el dato específico,
Utilizando una carga queryable que utilice el método LoadQuery() y retorne una colección
de objetos enumerables
El query es ejecutado llamando al método ExecuteQuery().

26. Obtención de Datos
Ejemplo
ClientContext clientContext = new
ClientContext("http://MyServer/sites/MySiteCollection ");
Web oWebsite = clientContext.Web;
clientContext.Load(oWebsite);
clientContext.ExecuteQuery();
Console.WriteLine("Title: {0} Created: {1}", oWebsite.Title,
oWebsite.Created);

27. Obtención de Datos
Ejemplo – Query de estilo LINQ
var query = from list
in clientContext.Web.Lists
where list.Title != null
select list;
var result = clientContext.LoadQuery(query);
clientContext.ExecuteQuery();

28. Obtención de datos utilizando el modelo
de objetos de cliente
Algunas propiedades no están disponibles por fefecto cuando se obtienen
ciertos objetos.
Se deben especificar los objetos que se quieran cargar, en el método
“load”
Ejemplo:
clientContext.Load(oList,
list => list.Title,
list => list.Created,
list => list.OnQuickLaunch,
list => list.Items);

29. Propiedades que no están disponibles por
defecto.
Objeto Propiedades
Folder ContentTypeOrder, UniqueContentTypeOrder
List BrowserFileHandling, DataSource, EffectiveBasePermissions,
HasUniqueRoleAssignments, IsAttachmentLibrary(), OnQuickLaunch,
RoleAssignments, SchemaXml, ValidationFormula, ValidationMessage
ListItem DisplayName, EffectiveBasePermissions, HasUniqueRoleAssignments,
RoleAssignments
SecurableObject HasUniqueRoleAssignments, RoleAssignments
Site Usage
Web EffectiveBasePermissions, HasUniqueRoleAssignments,
RoleAssignments

30. Obtener datos de una lista
Utilizando un Query CAML
El método GetItems(CamlQuery) permite definir un query de formato CAML que especifique qué items
retornar.
Se puede llamar al método CamlQuery.CreateAllItemsQuery() para generar el query que retorne todos los
items.
Ejemplo:
ClientContext clientContext = new ClientContext(siteUrl);
SP.List oList = clientContext.Web.Lists.GetByTitle("Announcements");
CamlQuery camlQuery = new CamlQuery();
camlQuery.ViewXml =
"<View><Query><Where><Geq><FieldRef Name='ID'/>" + "<Value
Type='Number'>10</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>";
ListItemCollection collListItem = oList.GetItems(camlQuery);
clientContext.Load(collListItem);
clientContext.ExecuteQuery();

31. Obtener datos de una lista
Utilizando un query LINQ
Ejemplo:
ClientContext clientContext = new ClientContext("http://spdev0220");
List list = clientContext.Web.Lists.GetByTitle("Announcements");
var query1 = from item in list.Items
where item.Id > 0
select item;
var result = clientContext.LoadQuery(query1);
clientContext.ExecuteQuery();
foreach (var item in result)
{
textBox1.Text += item["Title"].ToString() + "rn";
}

32. Actualización de objetos
Ejemplo
ClientContext clientContext = new ClientContext("http://MyServer/sites/MySiteCollection");
Web oWebsite = clientContext.Web;
ListCollection collList = oWebsite.Lists;
List oList = collList.GetByTitle("My List");
oList.Description = "Changed description...";
oList.Update();
clientContext.ExecuteQuery();

33. Creación de objetos desde el cliente
WebCreationInformation
ListCreationInformation
ListItemCreationInformation
Ejemplo
ClientContext clientContext = new
ClientContext("http://MyServer/sites/MySiteCollection/MyWebSite");
WebCollection collWeb = clientContext.Web.Webs;
WebCreationInformation webCreationInfo = new WebCreationInformation();
webCreationInfo.Title = "My New Web Site";
webCreationInfo.Description = "Description of new Web site...";
webCreationInfo.Language = 1033;
webCreationInfo.Url = "MyNewWebSite";
webCreationInfo.UseSamePermissionsAsParentSite = true;
webCreationInfo.WebTemplate = "STS#0";
Web oNewWebsite = collWeb.Add(webCreationInfo);
clientContext.ExecuteQuery();

34. Modelo de objetos de Silverlight
Silverlight incluye 2 assemblies:
Microsoft.SharePoint.Client.Silverlight.dll
Microsoft.SharePoint.Client.Silverlight.Runtime.dll
Silverlight comparte la mayoría de namespaces, objetos y métodos con el modelo
de objetos de cliente.
La excepción la hace el hecho de que los llamados que ejecutan los queries son
asincrónicos.

35. ¿Preguntas?

36. Muchas gracias!!!