Personalizar formularios en SharePoint

17/10/2016

Uno de los grandes dolores de cabeza de SharePoint es cómo personalizar los formularios. Con SharePoint podemos utilizar la maravillosa funcionalidad de las listas personalizadas para simular cualquier base de datos, pero cuando vamos a editar cualquier contenido, nos encontramos con el típico formulario de una custom list, que es feo y poco usable: todos los campos van uno detrás de otro con lo que sí o sí te encuentras con un scroll lateral y además con espacio vacío en la parte derecha.

Entonces intentamos ver cómo personalizar ese formulario y nos encontramos con varias formas:

InfoPath: mejor lo dejamos… es antiguo y Microsoft quiere dejarlo de usar
PowerApps: la mejor opción, si lo tenemos instalado y configurado…
Designer: con la versión 2013 ya nos quitaron la versión web y en 2016 no existe…

Normalmente optamos por la versión de Designer, pero cuando abrimos los formularios nos encontramos con un componente que tiene todos los campos, pero no podemos acceder a él. Podemos añadir código arriba o abajo del formulario, pero no en los campos. Por ejemplo ¿y si quiero poner los campos en 2 columnas para aprovechar mejor el espacio?.

Por suerte, con el Editor de contenido se pueden hacer milagros…

La idea es muy sencilla: creamos un html y un javascript que añadimos a la librería de siteassets y añadimos 2  editores de contenido al formulario que queramos editar.

Componente de SharePoint que permite añadir html, javascript, css...

Componente de SharePoint que permite añadir html, javascript, css…

En uno de ellos enlazamos el javascript y en el otro el html personalizado subidos en la librería de SiteAssets. El Javascript es así:

 

Javascript que subimos a SharePoint

Javascript que subimos a SharePoint

En el script con jquery vamos recorriendo los campos del formulario usando data-displayName. Fijémonos que usa un span denominado hillbillyForm que es el que luego referencia en el html como una class.

El html es muy sencillo, simplemente ponemos en celdas de tablas los campos del customList y como class asociamos hillbillyForm, en este caso las columnas de Incidencia y Familia.

Html que añadimos a SharePoint

Html que añadimos a SharePoint

El html lo formateamos con tablas, capas, css o como queramos y una vez subido y asociado a SharePoint, voilá veremos cómo el formulario se personaliza.

En esta web tenemos la explicación del creador de este script

http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/

y en este video, se detalla paso a paso cómo hacerlo:

 

Funciona tanto en SharePoint Online como OnPremise

Un detalle: para que SharePoint pueda integrar y descargar correctamente el javascript y el html personalizado, es necesario desactivar la característica Estrategia de descarga mínima.

Desactivar la característica Estrategia de descarga mínima

Desactivar la característica Estrategia de descarga mínima

 

https://msdn.microsoft.com/en-us/library/office/dn456544.aspx

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: