Liferay – Web Forms con campos dinámicos


Después del artículo sobre redirección de un web form a otro, seguimos con ellos para mostrar un truco para hacer sus campos dinámicos.

Los Web Forms de Liferay son una forma sencilla de añadir formularios tipo encuesta o de recogida de datos pero están un poco limitados en cuanto a funcionalidades, como por ejemplo mostrar u ocultar campos dependiendo de las respuestas seleccionadas en otros campos.

Para añadir esta funcionalidad optamos por un camino sencillo, jugar con jQuery (Javascript) para dinamizar un poco el formulario, a continuación veremos un ejemplo sencillo.

Mostrar campos ocultos según los valores de otros campos

1) Crear el formulario con todos los campos posibles

Vamos a querer guardar y/o enviar todos los posibles campos por email, por eso debemos crear el formulario completo mediante la herramienta de configuración que presenta el web-form-portlet oficial.

2) Añadir un script en la misma página que el Web Form

Este punto puede variar mucho depende de dónde se encuentre el cuestionario, por ejemplo si está insertado en una página, dentro de un asset publisher, dentro de un portlet, etc

Por ejemplo, si está dentro de un ‘Asset Publisher’ deberemos acceder al editor del código del template y localizar dónde se incluye el Widget.

De todos modos se trata de localizar un sitio para poder añadir un <script></script> que pueda tener efecto sobre el formulario, es decir, que se carguen ambos sea cual sea el orden.

3) Ejemplo de código

4.1) Acceder al iframe

$(“iframe[src^=’http://www.example.com/en/widget/web/guest/forms/-/1_WAR_webformportlet_INSTANCE_’]).on("load", function () { // dentro del iframe var iframeObj = $(this);    // objecto iframe });

4.2) Esconder uno de los campos por su nombre (se puede por ID, atributo,…)

$("iframe[src^='http://www.example.com/en/widget/web/guest/forms/-/1_WAR_webformportlet_INSTANCE_’]).on("load", function () { // dentro del iframe var iframeObj = $(this);    // objecto iframe iframeObj.contents().find("#_1_WAR_webformportlet_INSTANCE_po7hMMYtyCfU_field2").parent().parent().hide();    // buscamos el campo y lo escondemos });

4.3) Mostrar el campo escondido según la opción seleccionada en otro campo

$("iframe[src^='http://www.example.com/en/widget/web/guest/forms/-/1_WAR_webformportlet_INSTANCE_’]).on("load", function () { // dentro del iframe var iframeObj = $(this);    // objecto iframe iframeObj.contents().find("#_1_WAR_webformportlet_INSTANCE_po7hMMYtyCfU_field2").parent().parent().hide();    // buscamos el campo y lo escondemos // mostramos el campo según otro campo var radButton = iframeObj.contents().find("input[name='_1_WAR_webformportlet_INSTANCE_po7hMMYtyCfU_field1']"); radButton.change(function() { var radIndex = radButton.index(radButton.filter(':checked')); if(radIndex == 0 || radIndex == 1 || radIndex == 4) { iframeObj.contents().find("#_1_WAR_webformportlet_INSTANCE_po7hMMYtyCfU_field2").parent().parent().show(); } }); });

Con esta idea las opciones pueden ser muchas y se puede complicar bastante el funcionamiento de los formularios.

¡Esperamos que os sea de utilidad!


Leave a Reply

Your email address will not be published. Required fields are marked *