domingo, 10 de diciembre de 2017

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.