martes, 27 de mayo de 2014

Infopath: Cómo implementar menús desplegables en cascada (cascading dropdowns).

A estas alturas todos sabréis las grandes limitaciones que tiene actualmente SharePoint out of the box para generar formularios en sus listas (aunque en la siguiente versión quedará cubierto con FoSL). Si tenemos requerimientos que impliquen lógica de formulario, como ocultar ciertos campos según el valor de otros, o implementar un simple dropdown en cascada, nos veremos forzados a hacer un custom form com asp.net o tirar de Infopath. Es este último ejemplo el que vamos a explicar hoy: Cómo crear menús desplegables (dropdowns) en cascada.

El primer paso será crear dos listados en SharePoint (custom lists) donde albergar los contenidos de cada uno de los menús desplegables que queremos crear. En este post crearemos el típico ejemplo de País/Ciudad, así que la primera lista será un simple listado con una única columna de texto libre donde indicaremos los diferentes valores posibles para el campo País (Country).
image
Para la segunda lista crearemos 2 columnas, una de tipo texto libre donde indicaremos los diferentes valores posibles para el campo Ciudad (Country), y otra de tipo Lookup que apuntará a la lista de países que creamos previamente.
image
Una vez construidas estas dos listas en SharePoint, ya podremos ir al Infopath.
En Infopath tendremos que crear en primera instancia los 2 campos que queremos vincular, ambos de tipo menú desplegable (dropdown). Debería tener un aspecto similar al siguiente:

image

Evidentemente podremos continuar creando el resto de campos del formulario, pero lo siguiente para crear la funcionalidad de los dropdown en cascada será generar las 2 conexiones externas a listas de SharePoint, una para conectar a cada una de las listas creadas previamente.

Para crear estas nuevas conexiones iremos a la pestaña “Data” de la Ribbon de Infopath y pulsaremos en “Data Connections”

image

Dentro del menú de conexiones, pulsaremos en el botón de “Add…” para empezar a crear la nueva conexión.

image
Dentro ya del wizard para crear la nueva conexión, nos aseguramos de que estamos marcando “Create a new connection to: Receive data” y pulsamos en “Next”
image

En la siguiente pantalla seleccionamos “SharePoint library or list” como origen de datos y pulsamos en “next”.

image
En la siguiente pantalla introduciremos la URL del
 site donde hemos creado las listas de países y ciudades y pulsamos en “next”.

image

En la siguiente pantalla seleccionaremos la lista que hemos creado para los países y pulsaremos en “next”

image

En la siguiente pantalla seleccionaremos los campos del Título (país) e ID, y pulsaremos en “next”

image

En la siguiente pantalla, no hace falta que seleccionemos poder trabajar en offline con el formulario. Pulsamos directamente en “next”.
image
Y ya en la última pantalla nos aseguramos que el campo “Automatically retrieve data when form is opened” está marcado (garantiza la ejecución de la conexión de datos en el momento de abrir el formulario) y pulsamos en “finish”.

image

Con esto ya habremos creado la primera conexión de datos, a la lista de países. Ahora tendremos que repetir exactamente el mismo proceso para crear la conexión a la lista de ciudades, con la única excepción de que en la pantalla de selección de campos de la lista, tendremos que marcar el campo de ciudad, el de país y el de ID.

image

Una vez tengamos las 2 conexiones a las listas creadas, vamos a configurar cada uno de los campos. Vamos a empezar por el de País. Observad que lo he nombrado “CountryID”, y lo del ID al final es porque para que el dropdown en cascada funcione, este campo ha de almacenar un identificador, no el texto del país en sí mismo. Esto es así porque internamente SharePoint almacena Identificadores para los campos de tipo Lookup, y como aquí las ciudades hacen un lookup a los países, vamos a tener que lidiar con ello. De momento no os preocupéis, ya lo trataremos más adelante.

En la pantalla de configuación del dropdown de Países, tenemos que marcamos la opción “Get choices from an external data source”, y que en “Data source” seleccionamos la conexión que hemos creado para obtener el listado de países.

También hay que tener en cuenta que el valor almacenado ha de ser el ID, y no el país en sí, esto es importante por lo que he comentado 2 párrafos arriba. Si no seleccionamos un ID como valor, no funcionará el dropdown en cascada. Sin embargo en “Display Name” podemos seleccionar el país directamente sin problemas.

image

Una vez configurado, pulsamos el bótón de OK y vamos a configurar el segundo dropdown, el de ciudades. Esta vez será exactamente lo mismo que en el anterior, seleccionando la conexión al listado de ciudades y pudiendo seleccionar en el campo valor esta vez la ciudad directamente (Aquí no hace falta seleccionar el ID).

image

Al terminar la configuración, pulsamos el botón de “OK” para guardar los cambios realizados.
En este punto ya tendremos creada la base de los menús desplegables en cascada. Sin embargo, nos quedan por resolver 2 problemas:
  1. Cuando cambio el país, no borra automáticamente la ciudad seleccionada anteriormente (puede dar origen a incoherencias).
  2. El valor que se está guardando en “CountryID” es un número, y no el “texto” de la ciudad en sí.
Para solucionar el primer punto pendiente hay que crear directamente una regla de tipo “Action” sobre el campo “CountryID”. No estableceremos ninguna condición (se ejecutará siempre que haya un cambio en el campo”"), pero como acción estableceremos que el campo “City” (nuestro dropdown de ciudades) se ponga en blanco.

image
Una vez creada esta norma ya tendremos solucionado que al cambiar el valor del país, la ciudad previamente seleccionada se borre y se quede en blanco.

Ya solo nos queda solucionar el último punto pendiente (almacenar el valor real de Country, no únicamente su ID). Para ello, primero crearemos un nuevo campo en el formulario, de tipo String, que esta vez sí llamaremos “Country” a secas. Este será el campo que contendrá el valor deseado para Country (un texto y no un número), así que este será el campo que publicaremos como visible en el listado de SharePoint.
image

Una vez tengamos el campo “Country” creado, volveremos a crear una nueva regla de tipo “Action” sobre el campo CountryID. La regla se basará en “Set a field’s value”, donde el campo Field será el recién creado nuevo campo de texto “Country”, que recibirá el valor del campo que especificaremos a continuación (pulsad en “Insert Field or group”)

image

El campo a seleccionar será, de nuestra conexión secundara al listado de Paises (cambiar la conexión “main” que sale por defecto), en el conjunto de “dataFields”, el campo “Country” (ver imagen abajo). Sin embargo, este campo tendremos que filtrarlo (pulsar en botón “Filter Data”) de forma que el campo “ID” (también de la conexión secundaria y en el grupo de “dataFields”) sea igual al campo principal del formulario “CountryID”, que es nuestro dropdown de países (este último sí que se encuentra en la rama “Main”).

Filtering

Una vez establecido este filtro, aceptamos todo hasta salir de todas las ventanas y volver nuevo al formulario principal. Sobretodo recordar que al publicar, el campo que debéis mostrar en el listado de SharePoint es "Country" (texto) y no "CountryID" (número).

Ahora sí, ¡Ya lo tenemos! Al hacer una vista previa o publicar el formulario, podremos comprobar que si seleccionamos un país en concreto, tan solo podremos seleccionar las ciudades relacionadas con dicho país.

image

Así que eso ha sido todo por hoy, aunque espero poder contaros a la vuelta del verano las novedades que FoSL nos traerá en la edición de formularios y que supondrá la sustitución definitiva de nuestro “viejo amigo” Infopath.

¡¡Un saludo!!

3 comentarios:

Tats Jalón dijo...

Me parece excelente su tema pero ahora quisiera saber si se puede hacer lo mismo con mas de 2 campos para que al seleccionar 1 nos ponga la información de otros campos que le correspondan.
Podría darme un ejemplo??

Cesil Roa dijo...

Claro que si, Se puede hacer eso...
Lo he hecho.

Flo dijo...

Hola Ignasi, tu tutorial me ayudó a hacer los menús desplegables en cascada, nada más quería decirte que te faltó un paso importantísimo que sin ese paso, no se filtrarán las ciudades de un país. Cuando se procede a configurar los campos País y Cuidad, en las propiedades del campo cuidad, en Entradas: se debe agregar un Filtro de País es igual a País utilizando la Selección de campo o grupo eligiendo el Principal, en el dataFields my:SharePointListItem_RW, Datos adjuntos elegir el campo País y aceptar todo.