SharePoint Latin Rotating Header Image

15458

Usando SharePoint Designer 2013 como si fuera la versión 2007 o 2010

Por razones relacionadas con el soporte que SharePoint 2013 le da a HTML5 en SharePoint Designer 2013 se ha removido la opción de pre visualización la cual es y ha sido parte esencial para manipular ciertas funcionalidades del producto, dejándonos sin la posibilidad de ser tan productivos como antes en ciertas opciones. Quejarnos no es del todo una opción ya que SharePoint Designer 2013 al ser un producto sin costo y disponible abiertamente no se tiene un panorama de funcionalidad y soporte planeado.


He aquí dos videos en torno a SharePoint Desginer 2013 donde muestro como hacer uso de algunas de las funcionalidades que se vieron afectadas por el cambio.


Desde ya gracias y no olvide suscribirse a mi canal de Youtube.



Y aqui otro video mas



Si tienes alguna duda con SharePoint Designer 2013, adelante dejala comentario y buscare como respoderla.

La resistencia natural al cambio

Mi cliente me hace entrega de la cuenta de Office 365 para el desarrollo de una solución de colaboración que ya coticé y dimensioné sobre SharePoint 2010. Cuando quiero abrir el sitio en cuestión con SharePoint Designer 2010 marca un mensaje de error explicando que estoy usando la versión incorrecta de SharePoint y que no puedo abrir el sitio por esa razón.



Al dar clic en el enlace More información te remite a un artículo donde se sugiere utilizar SharePoint Designer 2013. Lo cual me dejó ver algo está sucediendo, de hecho la página de Inicio de Sesión también ha cambiado.



Después de revisar las características de sitio encontré que en efecto por ahí se encuentra el enlace llamado “Actualización de la colección de sitios” el cual me deja ver que en la plataforma subyacente ha cambiado.



Al parecer las nuevas instancias de Office 365 ya están bajo SharePoint 2013 o algunas instancias ya están sujetas a migrarse a SharePoint 2013. He de mencionar que de 2 soluciones Sandbox que he subido una ha funcionado perfectamente, la otra aun no la pruebo.


En fin, decido utilizar SharePoint Designer 2013 “con todo y sus implicaciones de configuración las cuales consisten en desinstalar SharePoint Designer 2010″ para abrir el sitio en cuestión y todo funciona sobre ruedas excepto que en SharePoint Designer 2013 ya no existe las vistas de diseño que nos permite la pre visualización de HTML, solo la vista de código por ende ciertas características se dificultan de usar como la de insertar un Data View vacío. Después me encuentro que un colega MVP publica que DataView WebParts ya no está soportado en SharePoint Designer 2013. En mi caso y seguramente el de muchos puede que múltiples webparts construidos en nuestros proyecto usen esta funcionalidad y pues seguro habrá cuestionamientos sobre como la inversión de tiempo y de esfuerzo desde la perspectiva de productividad ha quedado a un lado. Ahora, no todo está perdido. A pesar de que la herramienta no soporta la generación de nuevos DataViewWebParts o DataFormWebParts con solo editar el código XML generado pude lograr mi objetivo y hacerlos funcionar sobre SharePoint Designer 2013, en otras palabras, la plataforma si sigue soportando el uso de esta funcionalidad declarativa, es la herramienta de construcción quien no lo soporta.


La razón del cambio según este artículo es:


Compared to current versions of Internet Explorer, Design view is an older technology that does not support many new HTML5 and CSS tags.


Lo cual puede que tengan razón debido a las características de SharePoint 2013 también hace mucho sentido, sin embargo, debido al nivel de inversión en esfuerzo que se tiene hay varias cosas que podemos hacer:


  1. Configurar en una instancia de SharePoint 2010 on premise y construir nuestros desarrollos con SharePoint Designer 2010 para crear DataView WebParts y hacer copy paste del código XML, solo hay que tener cuidado con los GUIDs a los que hace referencia, tanto en parámetros como en la declaración del WebPart. 


Yo ya lo probé y funciono.




    En resumen, si hay que analizar detalladamente que implicaciones tiene este esfuerzo de migración ya que en el caso muy particular se tiene cotizada y dimensionada la construcción de una funcionalidad usando SharePoint Designer 2010 como la herramienta de construcción.


     


     

    Como validar campos en formularios de listas personalizadas de SharePoint con SharePoint Designer

    Lo único que puedo decir es que aquellos pequeños y finos detalles dejan un sabor mucho más agradable a la experiencia.

    Durante un pasado servicio de soporte se solicitó un requerimiento de validar que el campo fecha de una lista personalizada, no permitiera ingresar fechas mayores o iguales al día de hoy. Sin duda, de primera mano y como todo un programador piensas en construir un Custom Field que contenga la funcionalidad solicitada, sin embargo, todas las implicaciones y costo de desarrollar, probar, implementar y mantener una funcionalidad como tal no se justifica como para esta necesidad solicitada y el sentido de urgencia.

    El folclórico y temperamental SharePoint Desginer 2007 a.k.a “SPD” hace su aparición como una alternativa para realizar la validación solicitada.

    Básicamente la solución será:

    1. Copiar y pegar la página NewForm.aspx de la lista en cuestión con el nombre de NewFormEnhancement.aspx
    2. Abrir la página y poner invisible el primer WebPart
    3. Agregar un Custom List Form de tipo New para la lista en cuestión
    4. Agregar validadores a field donde requerimos la funcionalidad

    1. Copiar y pegar la página NewForm.aspx de la lista en cuestión con el nombre de NewFormEnhanced.aspx image

    • Cargamos el sitio en cuestión usando SPD, asegúrate de firmarte al sitio en cuestión  con una cuenta que por lo menos el permiso de Site Collection owner.
    • Cuando cargas el sitio podrás ver en forma de árbol el contenido.
    • Expande la carpeta Lists y de los elementos mostrados expandes la lista que deseas personalizar. Observa que se tienen un conjunto de archivos .aspx, selecciona NewForm.aspx y da clic derecho, copia la página y ahí mismo pegas con el nombre de NewFormEnhancements.aspx

    2. image Abrir la página y poner invisible el primer WebPart

    • Das doble clic sobre NewFormEnhanced.aspx. SPD carga la página para poder ser editada.
    • Da clic sobre el único WebPart en la página y da clic derecho para elegir la opción de WebPart Properties. WebPart Properties carga el panel de propiedades correspondiente.
    • Expande la sección de Layout y da clic sobre el cuadro de verificación Hidden. Esto hace que en la página en cuestión el WebPart pre determinado no este visible.

    3. Agregar un Custom List Form de tipo New para la lista en cuestión

    • imageEn el código Markup de la página en cuestión buscamos el lugar donde se encuentra  </WebPartPages:
      ListFormWebPart>
      </ZoneTemplate>
      </WebPartPages:
      WebPartZone>
      y justo debajo posicionamos nuestro cursor.
    • Seleccionamos del menú Insert la opción SharePoint Controls y Custom List Form. Esto carga una ventana de dialogo que nos permite seleccionar el tipo de WebPart que deseamos insertar sobre nuestra página personalizada.
    • image Configuramos el tipo de forma de captura que será aprovisionado por esta ventana de dialogo. Básicamente elegimos la lista de la cual necesitamos una instancia del formulario de captura y muy importante es el tipo de formulario de captura que requerimos como la forma de nuevo elemento, forma de modificación de un elemento o forma de visualización de un elemento. Elegimos New Item form, damos clic en Ok y esto genera una nueva instancia de la forma de captura para nuevos elementos de la lista que elegimos. Esta forma de captura es aprovisionada en código Markup de tipo WebPartPages:DataFormWebPart el cual expone los fields que el formulario tiene y el layout HTML donde estos fields son ubicados en la forma, esto nos da grandes posibilidades de personalización visual.

    4. Agregar validadores a field donde requerimos la funcionalidad

    • image Buscamos el field de tipo fecha que deseamos validar.
    • Nos aseguramos de modificar el tipo de control que se tiene configurado. Simplemente seleccionamos el control en cuestión y damos clic derecho sobre él, elegimos la opción de Show common control task cargando con ello una sección donde podemos elegir el tipo de control. Como podemos ver seguramente tenemos la opción de Form Field como Format As, damos clic sobre el cuadro de selección y elegimos Date Picker. Esto hace una especie de cambio en el control.
    • Damos clic derecho Properties sobre el control y buscamos la propiedad ID en mi caso fue “ff6_1”. Este ID es muy importante ya que con el podremos asociarlos a otros controles del lado servidor como TextBox, Validation Controls,. etc. Lo único importante que se debe de contemplar es que cuando utilizamos los controles de ASP.NET o nativos de SharePoint, estos hacen referencia al control no con el ID como tal, sino con el siguiente patrón “ID$IDTipoDeDato” en otras palabras “ff6_1$ ff6_1Date”.
    • Dentro del código Markup buscamos la terminación de la declaración del control Date Picker “</SharePoint:DateTimeControl>” y justo abajo pegamos el siguiente código:

    <SharePoint:InputFormCustomValidator

    ClientValidationFunction="IsValidDate"

    ID="custvDueDate"

    runat="server"

    Display="Dynamic"

    SetFocusOnError="false"

    ControlToValidate="ff6_1$ff6_1Date"

    BreakBefore="true"

    BreakAfter="false"

    ErrorMessage="Date must be grater than today" />

    Como se puede observar, tenemos controles del lado servidor específicos de SharePoint. Estos controles heredan de los controles de validación de ASP.NET y agregan otro comportamiento adicional muy similar a los de ASP.NET pero especial para SharePoint. Mediante las directivas pre definidas en la página podemos acceder a ellos.  Karine Bosch explica aquí cada uno de estos controles y lo hace muy bien. Favor de ver este post antes de continuar.

    En el caso de InputFormCustomValidator lo estamos usando para realizar una validación sobre el field Due Date. Recuerda que la regla es NO permitir la captura de fechas mayores o iguales al dia de hoy. El control de validación custom InputFormCustomValidator  nos permite asignar código compilado .NET para realizar la validación en cuestión, solo que bajo el contexto de ejecución de SharePoint se requeriría hacer algunas modificaciones en el web.config para permitir la compilación de la página, sin embargo, este control nos permite hacer lo mismo utilizando código del lado del cliente. Y justo ese es el escenario que pienso compartir aquí.

    Básicamente estamos confiando en realizar la validación desde el navegador de internet utilizando Javascript. Como ven, la propiedad ClientValidationFunction apunta a una función Javascript “IsValidDate” encargada de realizar la validación personalizada y este código javascript deberá de estar referenciado o registrado en la página en cuestión y lo hacemos agregandolo dentro de un Content Place Holder especial. Cuando el usuario capture una fecha sobre el control, este dispara el uso de la función javascript para validar la información capturada, la funcion javascript recibe en sus argumentos el source y args, en otras palabras el objeto que lo dispara y algunos argumentos del objeto como el valor que contiene. Cuando args.IsValid es igual a true significa que la validacion es correcta y por lo tanto hace que el control InputFormCustomValidator no muestre el mensaje de error. Cuando es false, hace lo contrario.

    Este código javascipt lo podemos agregar justo al inicio de la página después de la declaración de las directivas:

    <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

    <script language="javascript" type="text/javascript">

    function IsValidDate(source, args)

    {

    var today = new Date(new Date().setHours(0,0,0,0));

    var arrayDate = args.Value.split("/");

    var controlDate = new Date(arrayDate[2], arrayDate[0]-1, arrayDate[1]);

    args.IsValid =( today<controlDate);

    }

    </script>

    </asp:Content>

    Como podemos ver utilizamos un Content Place Holder que no propiamente estaba declarado dentro de la página y adentro agregamos el javascript de la función IsValidDate el cual recibe como argumento el dato que se desea validar. Con funcionalidad javascript se generan variables de tipo date para gestionar la comparación.

    El resultado:

    image

    No olvides dar check in a la pagina para poder probarla. Para terminar, asegurate de especificar en las propiedades de la lista en cuestion tu nueva pagina como la pagina principal para agregar elementos en la lista. Con esto cuando un usuario de clic en New dentro de la lista, SharePoint carge la nueva pagina personalizada.

    • En SPD, das clic derecho sobre la lista en cuestion.
    • Seleccionas Properties.
    • Seleccionas la pestaña Supporting Files y en new item from buscas la nueva pagina creada.

    image

    Credito a Hector Mata por el codigo javascript, gracias!

    Obteniendo el correo electrónico de un campo de tipo Persona sin programación en SharePoint 2007

    Sucede que algunos clientes en ocasiones buscan tener cosas que desde el punto de vista técnico tendemos a pensar que no tienen sentido, sin embargo para nuestro cliente si y si así es el caso, para nosotros también.

    Problema

    Solicitaron visualizar en los elementos de una lista el nombre y correo electrónico de un campo de tipo persona y claro, lograrlo sin programación y para ayer.

    Solución

    Convertir a DataView WebPart la página de AllItems.aspx de la lista en cuestión para agregar una columna nueva y con XSLT buscar en el contenido del campo de tipo Persona el correo electrónico para mostrarlo. Sucede que un campo “Field” de tipo Persona almacena en su interior contenido HTML para mostrar un hipervínculo que apunta al perfil o My Site del usuario y dentro de este contenido se encuentra el correo electrónico. A continuacion un ejemplo del contenido del campo Persona.

    <nobr><span><A HREF="/Global/temp/_layouts/userdisp.aspx?ID=26">haaron.gonzalez</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href=’javascript:’ onclick=’IMNImageOnClick();return false;’ class=’ms-imnlink’><img name=’imnmark’ title=” border=’0′ height=’12’ width=’12’ src=’/_layouts/images/blank.gif’ alt=’No presence information’ sip=‘haaron.gonzalez@splatin.com’ id=’imn_10,type=smtp’/></a></span></nobr>;

    He marcado en verde los datos que me interesa obtener. Lo que haremos es utilizar XSLT para buscar dentro del HTML el atributo “sip” el cual retorna el correo electrónico que deseamos.
    El resultado es:

    <xsl:value-of select= ‘substring-before(substring-after(@Persona, concat("sip=",$dvt_apos)), $dvt_apos)’ disable-output-escaping="no"/>

    Veamos entonces como lograr lo que nos pide el cliente

    1. Cargamos SharePoint Designer 2007 y abrimos el sitio donde se encuentra la lista en cuestión.

    clip_image001

    2. Convertimos la lista en DataView WebPart dando clic derecho sobre la lista y seleccionando la opción Convert XSLT Data View

    image

    3. Agregamos una nueva columna en el DataView WebPart, nos posicionamos justo despues del campo Persona y damos clic derecho para cargar el menu contextual y elegir la opcion.

    image

    4. Dentro del HTML de la pagina pegamos el código XSLT que busca dentro del campo Persona el correo electrónico. También no olvides agregar el título de la columna como “Correo electrónico”

    image

    Y listo damos check in al archive AllItems.aspx y probamos nuestra solución.

    image

    Suerte!