Fabián Imaz – Página 28 – Otro sitio más de Geeks.ms

Xslt, JavaScript y WebService en Sharepoint – Demo 2

No solo de WebParts vive el hombre – Parte 1 – Demostración 2

En el día de ayer, 06-12-2007 tuvimos la oportunidad de realizar un WebCast a la comunidad de desarrolladores de Sharepoint y le damos las gracias a Brandon Aday de Microsoft por la oportunidad que nos brindo.

En este WebCast presentamos una forma alternativa de realizar componentes para Sharepoint sin utilizar código de servidor.

Acá les dejamos parte del código fuente de la primera presentación realizada, los archivos JavaScript y el formulario ASPX utilizado

Código Fuente – Formulario aspx

<%@ Page Language="C#" masterpagefile="~masterurl/default.master" title="Demo WebService" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %>

<asp:Content id="Content1" runat="Server" contentplaceholderid="PlaceHolderMain">

_spBodyOnLoadFunctionNames.push("InvocarWebService");

</script>

</div>

</asp:Content>

<asp:Content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">

</asp:Content>

Código Fuente – JavaScript demo2.js

function OnLoadListsStart(){

alert("Comienza invocación al WebService.");

}

function OnLoadListsComplete(pStrXml){

LoadResultado(pStrXml);

}

function OnLoadListsError(){

alert(‘Se produjo un error en la invocación.’);

}

function LoadResultado(successResponse)

{

var strHtml;

var XmlRsp = successResponse;

successResponse = null;

var XMLDoc;

boolLoadSltList = false;

if (window.ActiveXObject)

{

XMLDoc=new ActiveXObject("Microsoft.XMLDOM");

XMLDoc.async=false;

XMLDoc.loadXML(XmlRsp);

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

XMLDoc=document.implementation.createDocument("","",null);

XMLDoc.load(XmlRsp);

}

strHtml = "<table cellSpacing=’0′ class=’ms-menutoolbar’ cellPadding=’0′ border=’0′ width=’100%’>";

strHtml += "<tr>";

strHtml += "<td class=’ms-toolbar’ width=’80%’>Documentos de la lista</td>";

strHtml += "</tr>";

strHtml += "</table>";

strHtml += "<table>";

var nodeList = XMLDoc.getElementsByTagName("rs:data");

var node = nodeList.item(0);

if(node.childNodes.length > 0)

{

for(i=0; i < node.childNodes.length; i++)

{

strHtml += "<tr>";

var childNode = node.childNodes[i];

strHtml += "<td>" + DevolverImg(childNode.getAttribute("ows_DocIcon"));

strHtml += "</td>";

strHtml += "<td class=’ms-vb’>" + "<a href=’/" + childNode.getAttribute("ows_FileRef").split(‘#’)[1] + "’>" + childNode.getAttribute("ows_LinkFilename");

strHtml += "</a>";

strHtml += "</td>";

strHtml += "</tr>";

}

else

{

strHtml += "<tr>";

strHtml += "<td> No hay elementos que mostrar en esta vista.";

strHtml += "</td>";

strHtml += "</tr>";

}

strHtml += "</table>";

var divRes = document.getElementById("divResultado");

divRes.innerHTML = strHtml;

}

function DevolverImg(tipoDoc)

{

var strImg = "<img border=’0′ src=’";

var src;

if(tipoDoc=="docx")

{

src="_layouts/images/icdocx.gif";

}

else if (tipoDoc=="doc")

{

src="_layouts/images/icdocx.gif";

}

else if (tipoDoc=="xlsx")

{

src="_layouts/images/icxlsx.gif";

}

else if (tipoDoc=="xls")

{

src="_layouts/images/icxlsx.gif";

}

else

{

src="_layouts/images/edit.gif";

}

strImg += src + "’ width=’16’ height=’16’ />";

return strImg;

}

function InvocarWebService()

{

var lUrlWebService = ‘/webcast/_vti_bin/Lists.asmx’;

var lSoapActionNamespace = ‘http://schemas.microsoft.com/sharepoint/soap/’;

var lSoapAction = ‘GetListItems’;

var lParameters = new Array();

lParameters[0] = ‘listName’;

lParameters[1] = ‘Documentos’;

CallWebService(lUrlWebService,lSoapActionNamespace,lSoapAction,

lParameters,OnLoadListsStart,OnLoadListsComplete,OnLoadListsError);

}

Código Fuente – Soap.js

/// Libreria para consumir webservices

// Objeto para crear el envelop

var Soap = {

createEnvelope: function(action, ns, parameters){

var soap = ‘<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://www.w3.org/2003/05/soap-envelope"><soap:Body>’;

//var soap = ‘<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/ "><soap:Body>’;

soap += ‘<‘ + action + ‘ xmlns="’ + ns + ‘">’;

soap += Soap.__parseParameters(parameters);

soap += ‘</’ + action + ‘></soap:Body></soap:Envelope>’;

return soap;

__parseParameters: function(parameters){

var params = "";

if (typeof parameters == ‘object’){

// check if we were provided an array or an object

if (typeof parameters.push == ‘function’){

for (var i = 0, length = parameters.length; i < length; i += 2){

params += "<" + parameters[i] + ">" + parameters[i+1] + "</" + parameters[i] + ">";

}

else{

$H(parameters).each(

function(pair){

params += "<" + pair.key + ">" + pair.value + "</" + pair.key + ">";

});

}

return params;

}

// CallWebServices

// pUrlWebService

// pSoapActionNamespace

// pSoapAction

// pParameters

// pStartEvent

// pCompleteEvent

// pErrorEvent

function CallWebService(pUrlWebService, pSoapActionNamespace, pSoapAction, pParameters, pStartEvent, pCompleteEvent, pErrorEvent){

var lXmlSoap = Soap.createEnvelope(pSoapAction,pSoapActionNamespace,pParameters);

__getServiceResults(pUrlWebService,pSoapActionNamespace + pSoapAction,lXmlSoap,pStartEvent,pCompleteEvent,pErrorEvent);

}

function __getServiceResults(pUrlWebService, pSoapAction, pXmlSoap, pStartEvent, pCompleteEvent, pErrorEvent){

var lXmlHttp;

function onReadyStateChange(e){

switch(lXmlHttp.readyState){

case 1:

//pStartEvent();

break;

case 4:

if(lXmlHttp.status == 200){

pCompleteEvent(lXmlHttp.responseText);

}

else{

pErrorEvent();

}

break;

default:

break;

}

try{

if (pXmlSoap.length > 0){

pStartEvent();

// debug:

//alert(pXmlSoap);

if (window.XMLHttpRequest){

lXmlHttp = new XMLHttpRequest()

}

else if (window.ActiveXObject){

lXmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

}

lXmlHttp.open("POST", pUrlWebService, true);

lXmlHttp.onreadystatechange = onReadyStateChange;

lXmlHttp.setRequestHeader("SOAPAction", pSoapAction);

lXmlHttp.setRequestHeader("Content-Type", "text/xml");

lXmlHttp.send(pXmlSoap);

}

catch(e){

alert(e.message);

pErrorEvent();

}

Muchas gracias a los que asistieron y nos hicieron llegar sus comentarios………

Xslt, JavaScript y WebService en Sharepoint – Demo 1

No solo de WebParts vive el hombre – Parte 1

En el día de ayer, 06-12-2007 tuvimos la oportunidad de realizar un WebCast a la comunidad de desarrolladores de Sharepoint y le damos las gracias a Brandon Aday de Microsoft por la oportunidad que nos brindo.

En este WebCast presentamos una forma alternativa de realizar componentes para Sharepoint sin utilizar código de servidor.

Acá les dejamos el parte del código fuente de la primera presentación realizada, el mismo pertenece a un formulario con la WebPart DataFormWebPart y el código Xslt utilizado.

Código Fuente.

<asp:Content id="Content1" runat="Server" contentplaceholderid="PlaceHolderMain">

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" FrameType="None" NoDefaultStyle=’TRUE’ ViewFlag=’0′ Title=’Documentos’ __markuptype=’vsattributemarkup’ __WebPartId='{38D879FD-A279-4CA4-BF45-E4FE9AE57280}’ id=’g_2c3bed60_be55_4bef_90c7_5d9ba443f80a’ __AllowXSLTEditing=’true’ WebPart=’true’ Height=» Width=» showwithsampledata=’false’>

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" selectcommand="<View></View>" id="Documentos1"><UpdateParameters><WebPartPages:dataformparameter PropertyName="ParameterValues" ParameterKey="ListID" DefaultValue="{2256D73A-FF33-4F07-A8E4-EBC8B69C47D9}" Name="ListID">

</WebPartPages:dataformparameter>

</UpdateParameters><DeleteParameters><WebPartPages:dataformparameter PropertyName="ParameterValues" ParameterKey="ListID" DefaultValue="{2256D73A-FF33-4F07-A8E4-EBC8B69C47D9}" Name="ListID">

</WebPartPages:dataformparameter>

</DeleteParameters><InsertParameters><WebPartPages:dataformparameter PropertyName="ParameterValues" ParameterKey="ListItemId" DefaultValue="0" Name="ListItemId">

</WebPartPages:dataformparameter><WebPartPages:dataformparameter PropertyName="ParameterValues" ParameterKey="ListID" DefaultValue="{2256D73A-FF33-4F07-A8E4-EBC8B69C47D9}" Name="ListID">

</WebPartPages:dataformparameter>

</InsertParameters><SelectParameters><WebPartPages:dataformparameter PropertyName="ParameterValues" ParameterKey="ListID" DefaultValue="{2256D73A-FF33-4F07-A8E4-EBC8B69C47D9}" Name="ListID">

</WebPartPages:dataformparameter>

</SelectParameters>

</SharePoint:SPDataSource>

</DataSources>

</ParameterBindings>

<datafields>@FileLeafRef,Nombre (para uso en formularios);@Title,Título;@_DCDateCreated,Fecha de creación;@ID,ID;@ContentType,Tipo de contenido;@Created,Creado;@Author,Creado por;@Modified,Modificado;@Editor,Modificado por;@_CopySource,Copiar origen;@CheckoutUser,Desprotegido para;@_CheckinComment,Comentario de protección;@CheckedOutTitle,Desprotegido para;@CheckedOutUserId,Id. del usuario que tiene desprotegido el elemento;@FileDirRef,Ruta;@FSObjType,Tipo de elemento;@HTML_x0020_File_x0020_Type,Tipo de archivo HTML;@File_x0020_Type,Tipo de archivo;@IsCheckedoutToLocal,Está desprotegido en local;@_SourceUrl,Dirección URL de origen;@_HasCopyDestinations,Tiene destinos de copia;@ContentTypeId,Id. de tipos de contenido;@_ModerationStatus,Estado de aprobación;@_UIVersion,Versión de IU;@Created_x0020_Date,Creado;@FileRef,Dirección URL;@File_x0020_Size,Tamaño de archivo;@_UIVersionString,Versión;@ParentVersionString,Versión del origen (documento convertido);@ParentLeafName,Nombre del origen (documento convertido);@TemplateUrl,Vinculo de la plantilla;</datafields>

<XSL>

<xsl:stylesheet

xmlns:x="http://www.w3.org/2001/XMLSchema"

xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"

version="1.0"

exclude-result-prefixes="dt s z rs xsl msxsl ddwrt"

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

xmlns:asp="http://schemas.microsoft.com/ASPNET/20"

xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:msxsl="urn:schemas-microsoft-com:xslt"

xmlns:SharePoint="Microsoft.SharePoint.WebControls"

xmlns:ddwrt2="urn:frontpage:internal"

xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"

xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"

xmlns:rs="urn:schemas-microsoft-com:rowset"

xmlns:z="#RowsetSchema">

<xsl:output method="html" indent="no"/>

<xsl:decimal-format NaN=""/>

<xsl:param name="dvt_apos">'</xsl:param>

<xsl:param name="ListID">{2256D73A-FF33-4F07-A8E4-EBC8B69C47D9}</xsl:param>

<xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:variable name="CountRow" select="count(//Row)" ></xsl:variable>

<xsl:variable name="listName" select="self::text"></xsl:variable>

<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">

<xsl:call-template name="dvt_1"/>

</xsl:template>

<xsl:template name="dvt_1">

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)" />

<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0" />

<xsl:choose>

<xsl:when test="$dvt_IsEmpty">

<xsl:call-template name="dvt_1.empty" />

</xsl:when>

<xsl:otherwise>

<xsl:call-template name="dvt_1.header">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

<xsl:if test="$dvt_1_automode = ‘1’" ddwrt:cf_ignore="1">

</xsl:if>

<xsl:attribute name="onClick">javascript:SelectAllRow(<xsl:value-of select="$CountRow"></xsl:value-of>);</xsl:attribute>

</input>

</th>

<th class="ms-vh" nowrap="" align="left">Título</th>

<th class="ms-vh" nowrap="" align="left">Fecha Creación</th>

<th class="ms-vh" nowrap="" align="left">Creado por</th>

<th class="ms-vh" nowrap="" align="left">Modificado por</th>

</tr>

<xsl:call-template name="dvt_1.body">

<xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>

</table></xsl:otherwise>

</xsl:choose>

</xsl:template>

<xsl:template name="dvt_1.body">

<xsl:param name="Rows"/>

<xsl:for-each select="$Rows">

<xsl:call-template name="dvt_1.rowview">

<xsl:with-param name="Pos" select="concat(‘_’, position())" />

</xsl:call-template>

</xsl:for-each>

</xsl:template>

<xsl:template name="dvt_1.rowview">

<xsl:param name="Pos" />

<tr>

<xsl:attribute name="id">row<xsl:value-of select="$Pos"></xsl:value-of></xsl:attribute>

<xsl:if test="position() mod 2 = 1">

<xsl:attribute name="class">ms-alternating</xsl:attribute>

</xsl:if>

<xsl:if test="$dvt_1_automode = ‘1’" ddwrt:cf_ignore="1">

</td>

</xsl:if>

<xsl:attribute name="id">chk<xsl:value-of select="$Pos"></xsl:value-of></xsl:attribute>

<xsl:attribute name="onclick">javascript:SelectRow(‘<xsl:value-of select="$Pos"></xsl:value-of>’);</xsl:attribute>

</input>

</td>

<xsl:value-of select="format-number(@ID, ‘#,##0.#;-#,##0.#’)"/>

</td>

<xsl:if test="@DocIcon=’docx’">

</xsl:if>

<xsl:if test="@DocIcon=’doc’">

</xsl:if>

<xsl:if test="@DocIcon=’xlsx’">

</xsl:if>

<xsl:if test="@DocIcon=’xls’">

</xsl:if>

</td>

<a>

<xsl:attribute name="href"><xsl:value-of select="@FileRef"></xsl:value-of></xsl:attribute>

<xsl:value-of select="@Title"/>

</a>

</td>

<xsl:value-of select="ddwrt:FormatDate(string(@_DCDateCreated), 3082, 1)"/>

</td>

<xsl:value-of select="@Author" disable-output-escaping="yes"/>

</td>

<xsl:value-of select="@Editor" disable-output-escaping="yes"/>

</td>

</tr>

</xsl:template>

<xsl:template name="dvt_1.header">

<xsl:param name="Rows" />

<tr>

Documentos de la lista</td>

documentos activos

<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp; </xsl:text>

</td>

</tr>

</table>

</xsl:template>

<xsl:template name="dvt_1.empty">

<xsl:variable name="dvt_ViewEmptyText">No hay elementos que mostrar en esta vista.</xsl:variable>

<tr>

<xsl:value-of select="$dvt_ViewEmptyText" />

</td>

</tr>

</table>

</xsl:template>

</xsl:stylesheet>

</XSL>

</WebPartPages:DataFormWebPart>

</asp:Content>

<asp:Content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">

Muchas gracias a los que asistieron y nos hicieron llegar sus comentarios………

XSLT, JavaScript y WebService en Sharepoint

No solo de WebParts vive el hombre – Parte 1

En este WebCast presentamos una forma alternativa de realizar componentes para Sharepoint sin utilizar código de servidor. En el mismo vimos como podemos interactuar con esta plataforma de desarrollo altamente robusta y escalable sin utilizar componentes que se necesiten instalar en el servidor, usamos Xslt, JavaScript, WebService y como herramienta de desarrollo Sharepoint Designer.

Estamos muy contentos por sus comentarios y agradecimientos que nos hicieron llegar y más contento nos puso al saber que nuestro WebCast fue de utilidad para más de uno de los asistentes, eso para nosotros es lo más importante, saber que pudimos colaborar…

Presentación

Muchas gracias a los que asistieron y nos hicieron llegar sus comentarios………

Ámbitos de búsqueda Sharepoint 2007

Creando un ámbito de búsqueda en Sharepoint 2007

En el artículo anterior configuramos y extendimos la pagina de resultado de Sharepoint agregando columnas nuevas y XSLT para colocar un link al formulario de edición de las propiedades del documento mostrado por la búsqueda.

En este artículo vamos a crear un ámbito de búsqueda para poder utilizar el mismo en el ComboBox donde se listan las distintas opciones para buscar contenido.

Los ámbitos de búsqueda se pueden crear en dos lugares, el primero lugar es el Shared Service Provider (SSP), para que los ámbitos creados en dicho lugar sean utilizados por todas las aplicaciones Web que tengan asociados. El segundo lugar es en el propio sitio que queremos que contenga ese ámbito de búsqueda.

Nosotros vamos a crear el ámbito en el sitio donde lo vamos a utilizar, para lo cual lo primero que tenemos que hacer es acceder a la configuración de la colección de sitio de nuestro portal, en la imagen 1 se muestra la pantalla de configuración.

Imagen 1

Una vez en la administración de la colección de sitio, seleccionamos el link “Ámbitos de búsqueda” y accedemos a la configuración de ámbitos como se muestra en la imagen 2

Imagen 2

Una vez en la administración de ámbitos vamos a crear uno nuevo, para lo cual seleccionamos el link “Nuevo ámbito” y accedemos a la pantalla de creación de un nuevo ámbito de búsqueda como se muestra en la imagen 3

Imagen 3

Una vez en la pagina para crear un nuevo ámbito de búsqueda debemos agregar el Nombre, descripción. De la sección “Mostrar Grupos” debemos seleccionar donde queremos que aparezca nuestro nuevo ámbito de búsqueda, en nuestro caso, vamos a seleccionar solo la opción “Cuadro desplegable de búsqueda” y de la sección “Página de resultados de destino” vamos a dejar la opción que nos indica que se utilizara la pagina predeterminada de resultado.

Una vez cargado los datos, presionamos el botón “Aceptar”, a lo cual el nuevo ámbito es creado y volvemos a la página de configuración de ámbitos y como se puede ver en la imagen 4, el nuevo ámbito esta creado.

Imagen 4

Ahora lo que vamos hacer es crear una regla para nuestro ámbito de búsqueda, para eso presionamos sobre el link “Agregar regla” para acceder a la pantalla de configuración de la nueva regla como se ve en la imagen 5.

Las propiedades que podremos utilizar para crear la regla son las que previamente establecimos en la configuración de la búsqueda del SSP y seleccionamos en la propiedad la opción de que la misma pueda ser utilizada en un ámbito de búsqueda. Para ver como se realiza la configuración de la búsqueda en el Shared Service Provider ver el post siguiente que se detalla paso a paso como realizar la configuración “Configuración Búsqueda Sharepoint 2007”

Imagen 5

Podemos crear más la regla basándonos en tres criterios, a partir de una dirección web, a partir de una consulta a una propiedad de los metadatos o que la regla sea para todo el contenido rastreado y almacenado en el índice.

Nosotros vamos a crear la regla a partir de una propiedad así que seleccionamos esta opción y el sistema desplegara un nueva sección llamada “Consulta de propiedad” donde vamos a tener que elegir qué propiedad vamos a utilizar y cuál será el valor que utilizaremos, vamos a seleccionar la propiedad creada en el artículo anterior llamada “Filename”. Cargamos el valor que queremos utilizar para realizar la consulta sobre la propiedad. Debemos tener en cuenta que al crear de esta forma el ámbito utilizando una propiedad con un valor asociado, estamos haciendo que la misma sea estática, puesto que no podremos cambiarle el valor una vez la misma sea compilada y almacenada en nuestro sitio. Esto nos puede llegar a limitar un poco las búsquedas, pero podemos ofrecerle al usuario de nuestro portal búsquedas rápidas contra ciertos tipos de propiedades y así mostrar resultados asociados.

Al terminar de configurar la regla lo que debemos hacer es guardarla, para eso presionamos el botón “Aceptar” y volvemos a la pantalla de configuración donde vemos que la regla fue creada y debe ser procesada para ser utilizada como vemos en la figura 6.

Imagen 6

Para poder utilizar en nuevo ámbito de búsqueda debemos acceder al Shared Service Provider (SSP) para actualizar los ámbitos modificados. Esto lo podemos realizar de forma manual o dejar que la programación estipulada por Sharepoint actualice el ámbito. Una vez finalizada la actualización vamos a iniciar un rastreo de la búsqueda.

Si tenemos el motor de búsqueda configurado para que se hagan los rastreos en un cierto periodo de tiempo, podemos utilizarlo cuando el mismo se lleva a cabo, si no podemos acceder a la configuración de la búsqueda en nuestro Shared Service Provider y comenzar nosotros mismos el rastreo para poder probarlo. En la siguiente imagen vemos como nuestro nuevo ámbito de búsqueda aparece en el ComboBox de la búsqueda de nuestro sitio.

Imagen 7

Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part III

Parte III – Formularios personalizados de lista en Sharepoint 2007

Una vez que tenemos construido el formulario personalizado para la lista de Sharepoint y está funcionando correctamente vamos a colocar las validaciones necesarias para que no se pueda guardar un elemento hasta que los datos ingresados en la misma están correctos o los campos obligatorios fueron ingresados.

Como comentamos anteriormente Sharepoint nos provee mecanismos para la validación de los datos ingresados en cada campo de la lista, pero los mismos son ejecutados en el Servidor, lo que implica que nuestro formulario tenga que ir al servidor para realizar la misma y retornar al cliente si se produjo un error. Este mecanismo es rápido cuando nos encontramos en un ambiente de Intranet, pero cuando el ambiente es de Extranet o Internet la rapidez con la cual se ejecute la validación dependerá de la velocidad que contemos y de que tan cargado de trabajo se encuentre el servidor donde está alojada la solución Sharepoint.

Lo que nos llevo a nosotros a implementar esta solución fue que el servidor de Sharepoint tiene exposición a Internet y además el formulario que debíamos realizar era bastante complejo y las validaciones que debíamos realizar eran también complejas, debido a que algunas de ellas dependían de otros campos ingresados en el dicho formulario.

No podíamos utilizar código servidor para realizar las mismas puesto que no teníamos permisos y acceso al servidor de producción para instalar un Assembly con el código necesario para realizar las validaciones. Este problema es muy común en servidores administrados por terceros y donde nosotros no podemos instalar directamente ninguna solución (WSP o CAB) en el server o ni siquiera podemos colocar el Assembly en el directorio Bin de ejecución de nuestra aplicación.

Utilizando JavaScript colocado en el formulario hemos desarrollado una solución rápida y sencilla para resolver este problema, la cual nos permitió realizar todas las validaciones necesarias.

En este ejemplo que estamos haciendo vamos a colocar la validación de un campo de la lista y la misma se llevara a cabo cuando el usuario presione el botón Guardar, que está en el formulario. El problema principal que debemos sortear es poder anticiparnos al evento click del botón Guardar desde JavaScript, puesto que el control de Sharepoint "SharePoint:SaveButton" que utilizamos en el formulario para guardar no expone públicamente un evento el cual podamos programar. La solución a este problema la tenemos utilizando una función de JavaScript llamada "attachEvent" que nos permite registrarnos a cualquier evento de un control indicándole el evento que queremos registrarnos y un puntero a la función JavaScript que manejara dicho evento cuando se produzca. Tampoco podemos registrarnos al evento click del control (Submit) puesto que cuando nuestra función es notificada de que se produjo el mismo el formulario ya paso por el proceso de Submit y la pagina se está enviando al servidor y no podemos cancelar este proceso, lo que vamos hacer es registrarnos al evento "onmouseup" el cual se produce antes y podemos cancelar todos los eventos producidos, con esto logramos que el formulario no sea enviando al servidor hasta que la validación este correcta. Esta función "attachEvent" pertenece a cada control por lo que tenemos que buscar el control dentro del formulario, para eso podemos utilizar las funciones JavaScript getElementById o getElementByName. A la primera función le tenemos que pasar el ID del control y a la segunda el Name del control, pero en ambos casos son generados por Sharepoint en la renderización del formulario, por lo cual tenemos dos opciones de ver cuál es el ID del control en el cliente (browser). La primera opción es inspeccionar el código fuente y sacar todos los Ids que necesitamos o si no podemos utilizar una función que nos extraiga el Name a partir del tagName, identifier, title dle control que colocamos en nuestro formulario Sharepoint. La implementación de esta función fue extraída de la siguiente página "Microsoft SharePoint Designer Team Blog" y nos permite en tiempo de ejecución saber el name del control al que queremos registrarnos. Una vez tengamos el Name, utilizamos la función getElementByName para obtener una referencia al control en la página y así poder registrarnos al evento correspondiente.

Debido a que nos encontramos en un formulario de Sharepoint y el mismo tiene una Master Page asociada, no contamos con el tag body para poder colocar nuestro código en el evento Load del formulario, pero dentro de los JavaScript que nos provee Sharepoint contamos con una función que nos permite poner una función nuestra JavaScript en la pila de funciones que serán disparadas en el evento Load del mismo cuando se cargue, esta función se llama "_spBodyOnLoadFunctionNames.push".

En la siguiente sección (Ver Sección 1) vamos a ver cómo nos registrarnos al evento "onmouseup" de los dos botones que están en nuestro formulario.

Sección 1

_spBodyOnLoadFunctionNames.push("EventButton"); //Función que registra una función de JavaScript para que sea disparada en el evento Load del formulario.

function EventButton()
{
    var objAceptar = getTagFromIdentifierAndTitle("input","SaveItem","");//Se registra al evento "onmouseup" del botón aceptar
    objAceptar.attachEvent("onmouseup",AceptarClick);
    var objCancelar = getTagFromIdentifierAndTitle("input","GoBack","");//Se registra al evento "onmouseup" del botón cancelar.
    objCancelar.attachEvent("onmouseup",CancelarClick);
}

En la sección anterior nos registrarnos a los eventos de los botones Aceptar y Cancelar del formulario de Sharepoint realizados y establecimos una manejador para cada uno de los controles adjuntos. Podríamos registrar un manejador genérico para ambas funciones y que en el mismo ejecutar las validaciones necesarias. Ahora vamos a ver el código de cada una de las funciones registradas, en la siguiente sección (Ver Sección 2) vamos a ver el código para manejar el evento del botón Aceptar y en la sección 3 (Ver Sección 3) vamos a ver el código para el evento del botón Cancelar.

Sección 2

function AceptarClick()
{
    var lCancelarEvento = false;
    var lTxtTitulo = null;
    lTxtTitulo = getTagFromIdentifierAndTitle("input", "TextField", "Título");
    if(lTxtTitulo.value == "")
    {
        alert("El campo Título no puede estar vacio.");
        lTxtTitulo.focus();
    }
    return lCancelarEvento;
}

Sección 3

function CancelarClick()
{
    var lCancelarEvento = false;
    alert("Cancelo la creación del nuevo item");
    return lCancelarEvento;
}

En la próxima sección (Ver Sección 4) vamos a ver el código de la función "getTagFromIdentifierAndTitle" la cual nos permite obtener una referencia al control que queremos de forma dinámica.

Sección 4

Hemos completado el código necesario para llevar a cabo las validaciones en nuestro formulario, vamos a ver como quedan las mismas cuando probamos el formulario, la siguiente imagen (Ver Imagen 1) muestra como se dispara el evento del botón Aceptar y en la imagen 2 (Ver Imagen 2) muestra como se dispara el evento del botón Cancelar.

Imagen 1

Imagen 2

Espero que esta serie de artículos le haya servido de utilidad como nos sirvió a nosotros para implementar una solución diferente para realizar validaciones.

Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part II

Parte II – Formularios personalizados de lista en Sharepoint 2007

Hemos vuelto y como comentamos, vamos a ver cómo podemos crear un formulario personalizado para una lista y asociarlo a la misma. Esperamos que instalaran el Sharepoint Designer como les recomendamos en el artículo anterior, puesto que vamos a utilizarlo como herramienta para llevar a cabo este desarrollo.
En el artículo anterior (Ver parte I), hablamos de los formularios por defecto (Ver Imagen 1) que nos coloca Sharepoint cuando creamos una lista en nuestro sitio, estos formularios son asociados a la lista para cada una de las tareas que queremos realizar (Nuevo, Editar y Ver un Elemento) y cada vez que realizamos alguna de estas tareas, Sharepoint nos muestra dicho formulario para llevarla a cabo.
Algunas veces nos encontramos con el caso que dichos formularios no son del todo útiles y debemos construir formularios personalizados para trabajar con la lista en Sharepoint, dado los requerimientos solicitados en nuestra aplicación.
Para comenzar a trabajar debemos abrir Sharepoint Designer y conectarnos al sitio donde está la lista a la que le queremos cambiar los formularios por defecto, una vez conectados la pantalla del Sharepoint Designer se tiene que ver como lo muestra la imagen (Ver Imagen 2).
Usando el panel izquierdo (Lista de Carpetas) navegamos hasta la carpeta de la lista y buscamos la lista a la cual deseamos cambiarles los formularios por defecto y la abrimos. Vamos a encontrarnos con los formularios (paginas ASPX) que describimos en el artículo anterior, como lo muestra la imagen (Ver Imagen 3). Si abrimos unos de los formularios (por ejemplo EditForm.aspx) verán como está conformado el mismo y encontraran la WebPart que le mencionamos anteriormente.
Ahora vamos a empezar a crear el formulario personalizado, vamos a crear uno para insertar nuevos elementos en la lista, lo primero que tenemos que hacer es crear un pagina ASPX en la raíz de la lista (como están los demás archivos), para ello seleccionamos la lista y vamos al menú, Archivo->Nuevo->ASPX y nos tiene que abrir una página nueva. Lo que vamos hacer inmediatamente es guardarla y darle un nombre, así la misma queda almacenada en la base de datos de Sharepoint, para ello vamos de nuevo al menú y seleccionamos, Archivo->Guardar, le colocamos un nombre y la misma queda almacenada con los demás formularios dentro de la carpeta de la lista.

Imagen 1

Imagen 2

Imagen 3

Una vez que tenemos el formulario guardado, lo que vamos hacer es colocar un formulario de lista personalizado, para realizar esta tarea vamos al menú y seleccionamos, Insertar->Controles de Sharepoint->Formulario de lista Personalizado. Se nos despliega una nueva ventana donde deberemos seleccionar:

Lista o Biblioteca: La lista para la cual queremos crear el nuevo formulario.
Tipo de Contenido: En el DropDow seleccionamos Elemento.
Tipo de Formulario: Seleccionamos la opción "Formulario de Nuevo Elemento.

Si queremos la barra de herramientas activada, dejamos marcada la casilla "Mostrar barra de herramientas estándar". El formulario nos debería quedar como se muestra en la imagen (Ver Imagen 4).

Imagen 4

Lo que debemos hacer nosotros es modificar el HTML y los controles que acaba de colocar el Sharepoint Designer para armar el formulario. Los controles de Sharepoint tienen la utilidad de poderse transformar en otro control, incluso en un control de Asp.Net. Lo que no podemos hacer es cambiar la estructura del formulario y debemos respetar como está armado, podemos agregar más controles y código HTML, incluso podemos utilizar XSLT para realizar transformaciones de datos y así conseguir un formulario que deseamos.
Para cada campo de la lista, Sharepoint Designer nos coloca el siguiente control
<SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="WebPage" __designer:bind="{ddwrt:DataBind(‘i’,concat(‘ff5′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@WebPage’)}"/>, el cual representa al mismo en el formulario. Este control posee una serie de propiedades que no debemos modificar puesto que son utilizadas para mostrar el valor del campo o guardar el valor introducido por el usuario en la lista. Debemos tener en cuenta que el Sharepoint Designer enlaza el campo de la lista con el control por intermedio de la propiedad __designer:bind y la propiedad ControlMode establece el modo del control a la hora de dibujarse, en el ejemplo la misma se estable a "New", quiere decir que se está ingresando un valor nuevo. Si estuviéramos creando un formulario para editar un elemento el valor de esta propiedad sería "Edit" y si el formulario es para desplegar los datos el valor de la propiedad es "Display" y el id del control en conformado por un texto y una variable XSLT.
Una vez que realizamos las modificaciones, vamos a proceder a colocarle la Master Page utilizada por el sitio, así nuestro formulario queda con el mismo estilo que todo el sitio. La Master Page que le vamos a asociar es la por defecto, pero podemos asociar cualquier Master Page que tengamos creada, para llevar a cabo esta tarea debemos ir al menú y seleccionamos Formato->Página Principal->Adjuntar Página Principal (Si esta opción aparece deshabilitada, es debido a que tenemos que guardar los cambios realizados en el formulario) al seleccionar esta opción se nos despliega una nueva ventana que nos permite seleccionar la Página Maestra, nosotros vamos a dejar la opción por defecto (la primera de las tres opciones) y presionamos Aceptar. Nuestro formulario debería quedar como lo muestra la imagen (Ver Imagen 5)

Imagen 5

Una vez terminado el formulario, lo próximo que tenemos que hacer es asociarlo a la lista, para que cuando presionemos el botón nuevo en Sharepoint nos muestre el formulario creado, para realizar esta tarea en la sección izquierda (Lista de Carpetas) seleccionamos la lista y vamos a las propiedades de la mismas, para ellos presionamos el boton derecho del ratón. Se nos despliega una nueva ventana la cual tiene 4 solapas para manejar las distintas propiedades, seleccionamos la ultima solapa (Archivos Auxiliares), seleccionamos "Elemento" para el tipo de contenido y en la sección "Formulario de nuevo Elemento" apretamos el botón examinar y navegamos hasta el formulario que acabamos de crear, lo seleccionamos y presionamos Aceptar en la nueva ventana que se nos acabo de abrir. Una vez seleccionado el formulario en el cuadro de texto, nos quedo cargada la ruta al archivo y volvemos a presionar el botón aceptar para cerrar la ventana de propiedades de la lista.
Si vamos a la lista en Sharepoint y presionamos el botón Nuevo, el formulario que nos debería mostrar es el que acabamos de crear como se puede ver en la imagen (Ver Imagen 6).

Imagen 6

En este artículo acabamos de crear un formulario personalizado en Sharepoint utilizando el Sharepoint Designer y lo asociamos a una lista. En el próximo y última parte vamos a colocar validaciones utilizando JavaScript para controlar los datos obligatorios y el tipo de dato que ingresa el usuario del lado del cliente, puesto Sharepoint nos provee una cantidad de controles de validación, como los controles de validación de ASP.Net pero la misma se realizada en el servidor.

Validación de campos en un formulario personalizado de Shrepoint 2007 con JavaScript – Part I

Parte I – Introducción a los formularios de lista en Sharepoint 2007

Al crear una lista en un sitio de Sharepoint la misma se crea con formularios que nos permiten manipular todos los campos de la lista desde el sitio de Sharepoint. Estos formularios creados por defectos están basados en las WebParts ListViewWebPart y ListFormWebPart las cuales son utilizados para desplegar todos los elementos y para desplegar un elemento particular. En la siguiente tabla se muestran los formularios por defecto creados y la utilizada de cada uno de ellos:

Formularios por defectos:

Formulario	WebPart	Descripcion
AllItems.aspx	ListViewWebPart	Formulario utilizado para mostrar todos los elementos de una lista de Sharepoint. Se utiliza la WebPart ListViewWebPart la cual muestro todos los elementos en un formato de tabla.
DispForm.aspx	ListFormWebPart	Este formulario se utiliza para mostrar un elemento de la lista en formato de solo lectura, el cual nos permite ver los valores cargados en los distintos campos de la lista. Utiliza la WebPart ListFormWebPart la cual muestra todos los campos que conforman la lista en forma de un formulario.
EditForm.aspx	ListFormWebPart	Este formulario se utiliza para editar un elemento de la lista, el cual despliega todos los campos de la lista cargados en cajas de texto que nos permiten modificar los valores. Utiliza la WebPart ListFormWebPart para realizar esta tarea.
NewForm.aspx	ListFormWebPart	Este formulario se utiliza para crear un nuevo elemento en la lista, el cual despliega todos los campos de la lista y cajas de texto vacías para cargar información en los mismos. Utiliza la WebPart ListFormWebPart para realizar esta tarea.

Como comentamos, estos formulario son creados por Sharepoint cuando creamos una nueva lista en un sitio Web, para brindarnos la posibilidad de manipular la información que vamos a ir almacenando en la misma. Los forma de mostrar los campos en cada formulario dependerá de la configuración que tengamos realizada en la lista y el Tipo de contenido asociado y que campos queremos mostrar o no, pero el formato del mismo no cambia. El formulario AllItems.aspx muestra la vista creada por Sharepoint para esta lista y los campos que se muestran dependerá de la configuración de esta vista.

Si tenemos habilitado el manejo de contenidos en nuestra lista, el cual se habilita en la propiedades avanzadas (Ver Imagen 1), podemos manejar el orden en que se desplegaran los campos en los formularios, DispForm.aspx, EditForm.aspx y NewForm.aspx, para ello cuando habilitamos el manejo de contenido en la pantalla principal de de la configuración de la lista nos aparece una nueva sección llamada "Tipos de contenido" y ahí se listan todos los tipos de contenidos que están asociados en nuestra lisa (una lista puede tener asociados varios tipos de contenido, en un próximo articulo hablaremos de la utilidad de los mismos y la forma de crear tipos de contenidos personalidades), al seleccionar el tipo de contenido vamos a la pantalla de configuración del tipo seleccionado (Ver Imagen 2).

En la pantalla de configuración podremos establecer el orden de aparición de los campos en los formularios como se muestra en la imagen (Ver Imagen 3), para lo cual debemos acceder a través del link que se encuentra al final de este formulario y se llama "Orden de Columnas" y ahí simplemente debemos seleccionar en que posición deberán aparecer nuestros campos en a los formularios.

También contamos con la posibilidad de ocultar algunos campos en los formularios si no queremos que los mismos sean mostrados a nuestros usuarios a la hora de trabajar con los mismos, para realizar esta tarea en la pantalla de configuración del tipo de contenido debemos ir campo por campo y configurar el comportamiento de los mismos. Contamos con tres opciones:

Requerida: Esta columna debe contener información y el elemento que estamos manejando no se guardara en la lista hasta que el mismo no se complete.
Opcional: Esta columna puede no contener información.
Oculta: Este campo no se mostrara en los formularios por defecto creados por la lista (DispForm.aspx, EditForm.aspx y NewForm.aspx), en al formulario AllItems.aspx, dependerá de la configuración de la vista que tengamos.

Imagen 1

Imagen 2

Imagen 3

En este artículo nos introducimos al manejo de los formularios que nos provee Sharepoint 2007 por defecto y los cuales podemos modificar algunas de las configuraciones. En la parte II estaremos hablando de cómo podemos crear formularios personalizados por nosotros y agregarlos a la lista sustituyendo los formularios por defecto de Sharepoint 2007.
Para llevar a cabo esta tarea estaremos utilizando el Sharepoint Designer, así que les recomiendo que se lo vayan instalando y familiarizándose con él.