CSA - Web Parts en SharePoint 2010

Patricio Belardo

Web Parts en SharePoint 2010

Web Parts

Framework de Diálogos

Barra de estados y area de notificación

Modelo de objetos de cliente

Sumario

Características generales


Nuevas características

Web Parts Visuales

Nuevas Plantillas en Visual Studio 2010


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.

Web Parts

Nuevas Características

Web Part Visuales

Demo Web Part Visuales


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.


Objetivos de diseño


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.


Extensibilidad

function myCallback(dialogResult, returnValue)

{

alert(“Hello World!”);

}

var options = {

url: “/_layouts/somepage.aspx”,

width: 500,

dialogReturnValueCallback:myCallback};

SP.UI.ModalDialog.showModalDialog(options);


Ejemplo de utilización

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

(bool) { true | false }

Habilita o no el botón de maximizado

dialogReturnValueCallback Una función de callback será invocada cuando el diálogo sea cerrado

Demo Framework de diálogos

Barra de Estados / Á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 / Área de Notificación

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”

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

API de Barra de Estado

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

Á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.

API de Área de Notificación

Demo Barra de Estados / Área de

notificación

Modelo de objetos de Cliente

Modelo de objetos de cliente

Modelo de Objetos de Cliente

ECMAScript

Silverlight

Comparativa de Modelos de Objetos

Servidor

(namespace

Microsoft.SharePoint)

Código manejado de .NET y

Silverlight

(namespace

Microsoft.SharePoint.Client)

ECMAScript

(namespace SP)

SPContext ClientContext ClientContext

SPSite Site Site

SPWeb Web Web

SPList List List

SPListItem ListItem ListItem

SPField (including major

derived classes) Field Field

WebPartPages.SPLimitedWebPartManager

WebParts.LimitedWebPartManager

WebParts.LimitedWebPartManager

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() + "\r\n";

}

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.

¿Preguntas?

Muchas gracias!!!

Technology

CSA - Web Parts en SharePoint 2010