CSA - Web Parts en SharePoint 2010

Web Parts en SharePoint
2010

Patricio Belardo

Sumario
Características generales

Web Parts
Framework de Diálogos
Barra de estados y area de notificación
Modelo de objetos de cliente

Web Parts en SharePoint 2010
Características

Nuevas características
Web Parts Visuales
Nuevas Plantillas en Visual Studio 2010

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.

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.

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.

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);

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

Barra de Estados / Área de
notificación

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

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”

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

Á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

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.

Demo
Barra de Estados / Área de
notificación

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

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

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().

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);

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);

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);

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

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);


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);

foreach (var item in result)
{
textBox1.Text += item["Title"].ToString() + "rn";
}

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();

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);

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.

CSA - Web Parts en SharePoint 2010

Más contenido relacionado

La actualidad más candente

Destacado

Similar a CSA - Web Parts en SharePoint 2010

Más de Comunidad SharePoint

CSA - Web Parts en SharePoint 2010