Botón de adjuntar documentos

Trabajando con SharePoint 2013 es común que cuando utilizamos una lista como formulario, nos digan: "Pero quiero que también se pueda adjuntar documentos..."

Esto se debe a que el botón de adjuntar se encuentra en la Ribbon superior dentro del menú Editar y si no se tiene conocimiento de SharePoint no es intuitivo encontrarlo:

Para ello, lo que suelo hacer es crear una vista de datos del formulario de nuevo elemento. Lo cual me permite personalizarlo tal y como nos lo pidan. Y adicionalmente, puedo hacer dos cosas para solucionar el problema del adjunto.

La primera es utilizar la función de Javascript UploadAttachment() que hace exactamente lo mismo que la opción adjuntar de la Ribbon superior. En teoría se puede utilizar con enlace o como botón:

<a href="javascript:UploadAttachment()">Attach File</a>

<button onclick="javascript:UploadAttachment()">Attach File</button>

Lo cierto es que la opción button, suele presentar un comportamiento anómalo, del cual desconozco el motivo y lo que suelo hacer es falsear el enlace para que parezca un botón:

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Adjuntar archivo
</nobr>
</H3>  
</td>
<td width="200px" valign="top">
<a href="javascript:UploadAttachment()" style="border:1px solid #ababab;padding:5px;text-decoration:none;color:#444;">Adjuntar archivo</a>
</td>
</tr>

Y esto nos genera un botón como:

Que tras hacer clic nos presenta el formulario de selección:

Y nos mostrará los elementos adjuntados:

La otra opción es mostrar directamente el formulario de selección en el formulario de nuevo elemento. Para ello bastará con el siguiente código:

<tr>

<td width="190px" valign="top" class="ms-formlabel">

<H3 class="ms-standardheader">

<nobr>Adjuntar</nobr>

</H3>

</td>

<td width="400px" valign="top" class="ms-formbody">

<table>

<tr>

<td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 300px">

<span dir="ltr">

<input type="file" name="fileupload0"  id="onetidIOFile" size="20" title="Name"></input>

</span>

</td>

<td width="100px" valign="top" class="ms-formbody">

<input name="Button1" type="button" value="Adjuntar" onclick='OkAttach()' style="width: 6em;" />

<span id="idSpace"></span>

</td>

</tr>

</table>

</td>

</tr>

Esto nos mostrará lo siguiente:

Y mostrará el comportamiento similar al anterior, con la salvedad de que nos ahorra un clic.

Ambos son igual de validos y facilitan al usuario el poder adjuntar documentos.

Copia Oculta en SharePoint Designer

Recientemente un cliente nos ha solicitado que quería estar en copia oculta de los correos electrónicos que se generan desde los flujos de trabajo de SharePoint.

Al abrir SharePoint Designer 2013, vemos que tenemos la acción de enviar correo electrónico disponible, si la ponemos en nuestro flujo, podemos ver que nos presenta sólo las opciones de Para y Copia, pero no la de Copia Oculta:

Para poder acceder a la copia oculta, tendremos que acceder a las Propiedades de la acción en el flujo de trabajo:

Esto hará que se abra la ventana emergente que nos permitirá incluir los destinatarios en copia urgente:

Desde el menú de BBC podremos incluir a dichos miembros:

Botón de Guardar y Cancelar personalizados en SharePoint

Normalmente cuando hacemos una vista de datos en SharePoint, nos suelen aparecer dos botones de Guardar y Cancelar.

En dichos botones, en algunas versiones de SharePoint no ha funcionado el modificar el redirect, ni el value. Es decir, a donde deben enviarnos tras hacer clic en ellos y cual es el texto a mostrar en el botón.

La manera que yo utilizo es en lugar de utilizar un control de tipo SharePoint, utilizar uno de tipo button. Quedando en la vista de datos, un código equivalente al siguiente:

<table>

  <tr>

    <td width="99%" class="ms-toolbar" nowrap="">

      <IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/>

    </td>

    <td class="ms-toolbar" nowrap="">

      <input type="button" id="savebutton1" value="  Enviar  " name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={/Misitio/Paginas/SolicitudRegistrada.aspx}')}" />

    </td>

    <td class="ms-separator">&#160;</td>

    <td class="ms-toolbar" nowrap="" align="right">

      <input type="button" id="cancelbutton1" value="   Salir   " name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent('__redirect={/Mistio/Paginas/SolicitudCancelada.aspx}')}" />

    </td>

  </tr>

</table>

Donde lo que nosotros personalizaremos serán los valores del campo Value y las URL de las llamadas Javascript de los onclick. 

Guardar como plantilla un sitio de publicación

Una característica muy útil en SharePoint es la opción de guardar un sitio como plantilla, para poder generar otros similares.

Esta opción esta dentro de la configuración del sitio:

Pero en los sitio de tipo Publicación, no encontraremos esta opción. Porque Microsoft lo ha deshabilitado:

Por suerte, hay una puerta trasera que nos permite guardarlo. Lo primero que deberemos hacer, es abrir dicho espacio con SharePoint Designer y desde la Ribbon Superior, podremos acceder a Opciones de sitio. Lo cual nos permitirá cambiar a true, el valor del parámetro SaveSiteAsTemplate:

Tras modificarlo y guardarlo, veremos que seguimos sin tener disponible la opción de guardar en configuración del sitio. Pero si accedemos vía URL, si que lo podremos guardar. Para ello bastará con completar la URL de nuestros sitio con /_layouts/15/savetmpl.aspx (SharePoint 2013) o su correspondiente según la versión de SharePoint que trabajemos. Pasando de:
http://miespacio/misitioaguarda/Paginas/default.aspx
a
http://miespacio/misitioaguarda/_layouts/15/savetmpl.aspx

Y podremos guardar nuestro sitio como plantilla, para que posteriormente este disponible para la creación desde la pestaña de personalizadas.

Personalizar los correos de los flujos de trabajo en HTML

Desde versiones anteriores como SharePoint 2007 hemos podido personalizar el cuerpo de los correos, con la apariencia que deseábamos mediante su personalización con código HTML.

En versiones como SharePoint 2007, bastaba con poner el código HTML en el cuerpo del correo electrónico. Pero sí hacemos eso en la versión 2013 no obtendremos el mismo resultado.

Para ello, deberemos acceder desde las Propiedades de la acción Enviar por correo electrónico:

En la ventana que se nos abrirá tendremos la opción de poder editar el cuerpo del correo a nuestro gusto:

Eso nos abrirá la ventana de generador de cadenas, donde podremos poner todo el código HTML y CSS que deseemos, pudiendo personalizar el cuerpo del correo, de una manera más rica que la permitida por la barra de edición del cuerpo del correo, que nos facilita SharePoint Designer:

Campos dependientes en SharePoint

Esta es una entrada que tal vez debiera haber hecho hace mucho tiempo. Una de las limitaciones que más sorprende a la gente cuando se acerca por primera vez a SharePoint, es el hecho de que no se pueda establecer una dependencia entre los campos de tipo elección.

La verdad es que es una gran limitación en el día a día. Por suerte, como siempre tenemos JQuery y en este caso en concreto SPServices.

Uno de mis clientes nos solicito un formulario para etiquetar empresas que ofrecían servicios, clasificables en tres niveles, niveles dependientes entre ellos.

Lo primero que tuve que hacer es una lista con los valores del primer nivel:

Tras ello, crearemos otra lista, que tendrá un campo de tipo texto, donde irán los valores del segundo nivel, y un campo de tipo búsqueda que buscará sobre la columna de la primera lista:

Y de manera análoga el para el tercer nivel:

Estas serán nuestras tres listas maestras, desde donde podremos gestionar los valores de los tres campos de elección. Lo siguiente que haremos será crear tres columnas de tipo búsqueda, en la lista donde queremos utilizar los valores:

Cada una de las columnas, buscará sobre la lista correspondiente a su nivel, eligiendo al crearlas, si son de valor único o múltiple selección (en mi caso los tres son de múltiple selección):

Y por último tendremos que añadir en los formularios que deseemos que se comporten como campos dependientes el siguiente código:

<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: "Nivel 2",
relationshipListParentColumn: "Nivel",
relationshipListChildColumn: "Title",
parentColumn: "Listado1",
childColumn: "Listado2";
});  
$().SPServices.SPCascadeDropdowns({
relationshipList: "Nivel 3",
relationshipListParentColumn: "Nivel",
relationshipListChildColumn: "Title",
parentColumn: "Listado2",
childColumn: "Listado3";
});
});
</script>

En la primera llamada a SPCascadeDropdowns, lo que se indica es la lista sobre la que se va a filtrar el valor, en nuestro caso Nivel 2, que es donde se encuentra la relación. Lo siguiente que diremos es sobre que columna de esa lista va a actuar como Padre y cual sobre Hijo, es decir, cual la que nos permite seleccionar el valor para filtrar y sobre cual se filtran los valores. Por último, indicaremos sobre que campos de nuestra actual lista actuará.

En la segunda llamada a SPCascadeDropdowns, se repite la operación pero sobre el segundo y tercer valor.

Quedando un funcionamiento de campos dependientes:

NOTAS: 

• Se da por supuesto, que en la página maestra o bien en el código de la página, se encuentra una referencia a JQuery y otra SPServices.
• Los líneas relationshipListParentColumn: "Nivel" y relationshipListChildColumn: "Title", hacen referencia al Nombre interno del campo en la lista donde hacemos la relación "Nivel 2". De hecho, en mi ejemplo, como utilizo SharePoint en Español, el nombre externo es Título y no Title.
• Las segundas referencias parentColumn: "Listado1" y childColumn: "Listado2", hacen referencia al nombre a mostrar de la columna y no al nombre interno.
• En esta última referencia, si un campo es obligatorio, la referencia debe ser de la forma: parentColumn: "Listado1 Campo requerido", que corresponde con el title en HTML del campo. En mi caso es Campo requerido, porque mi SharePoint esta en Español, si lo tenéis en Inglés, posiblemente sea Requiered field.

Fuentes:
http://sympmarc.github.io/SPServices/value-added/SPCascadeDropdowns.html
http://www.bentedder.com/sharepoint-sketches-spservices-cascading-dropdowns/