Dynaforms de process Maker

1. DynaForms Avanzados
y Javascript
Ing. Henry Bautista
Processmaker Certified
22-oct-2019
Versión 3.0

2. OBJETIVO
Conocer los modelos y objetos que utiliza Processmaker dentro
de su estructura para diseño y presentación de formularios.
Dar a conocer a los usuarios finales que interactúan con un
formulario a través de los controles disponibles en
Processmaker.
Conocer los controles del diseñador DynaForm sensible a
HTML5 que usan variables globales creadas dentro del proyecto
para interactuar con elementos del proyecto cuando un usuario
debe ingresar los datos necesarios a través de un formulario.
Conocer de manera básica el funcionamiento de código
JavaScript para formularios inteligentes.

3. DYNAFORMS
 Creando Dynaforms
Para crear un nuevo Dynaform,
vaya a la opción Dynaforms en el
menú Objetos de proceso en el
Diseñador de procesos. Mantenga
el puntero del mouse sobre el
ícono más (+) y haga clic
en Crear :
Se mostrará una ventana modal que contiene las
opciones para crear un Dynaform desde cero.

4. DYNAFORMS
 Título: (Campo obligatorio). Ingrese el título de Dynaform en este campo. Cuanto
más descriptivo sea el título, más fácil será comprender de qué se tratará. El título
de Dynaform debe ser único (significa que dos o más Dynaforms no pueden tener el
mismo título en el mismo proyecto).
 Descripción: Introduzca una descripción para el Dynaform. Los usuarios de
producción ordinarios que ejecutan los casos no verán la descripción, así que
complete la descripción para los diseñadores de procesos que quizás necesiten
editar el Dynaform más adelante. Ya que la descripción no se ajusta
automáticamente a la línea, use retornos duros.
 Guardar y abrir: Guarda la configuración realizada sobre el nuevo Dynaform y abre
el editor HTML5 / Responsive Dynaforms.

5. DYNAFORMS
 Controles generales: Cuando se crea un nuevo formulario, el
contenedor donde se agregarán todos los controles (formulario) y el
contenedor donde también se agregará cada control particular (fila)
tienen su propia funcionalidad y propiedades particulares dentro de
ellos. Form y Row.
 Controles web: El diseñador receptivo de DynaForm viene con los
siguientes controles que están directamente relacionados con las
variables creadas en el proyecto. (Textbox y Textarea, Fecha y
hora. Desplegable, Casilla de verificación y grupo de verificación,
Radio (grupo), Sugerir, Oculto)

6. DYNAFORMS
 HTML5 / Responsive Dynaforms
ProcessMaker 3 ha mejorado el diseñador de Dynaforms haciendo que sea mucho más fácil de usar. Este diseñador
proporciona a los usuarios una interfaz para crear Dynaforms de 12 columnas que también cumplen la promesa HTML5
de "escribir una vez, ejecutar en todas partes". Estos Dynaforms se ajustan automáticamente en diferentes tamaños de
pantalla, como pantallas de escritorio, tabletas y móviles. Además, este diseñador se basa en variables, lo que
significa que las variables ya se han creado en una interfaz separada y están listas para usar dentro de Dynaforms
sensibles.

7. DYNAFORMS
 Variables permitidas para cada control
Cada uno de los controles disponibles tiene diferentes propiedades que le dan al
control una funcionalidad principal y permite a los usuarios definir el alcance del
control.
La siguiente tabla detalla los controles disponibles para cada tipo de datos:
Control/Data
Type
String Integer Float Boolean Datetime Grid Array File ** Multiple File
Text X X X
TextArea X X X
Dropdown X X X X
Checkbox * X
Checkgroup * X
Radio (group) X X X X
Suggest X X X X
Datetime X
Hidden X X X X
Grid X
File X
Multiple File
Uploader
X

8. DYNAFORMS
 Exportando y Editando Dynaforms
Para editar un Dynaform, primero exportarlo. Abra el Dynaform para
editarlo, y luego haga clic en el Botón en la barra de herramientas
para exportar el Dynaform.
Al entrar al diseñador por primera vez:

9. PROPIEDADES DE DYNAFORMS
Propiedad Descripción
Tipo form (solo lectura)
ID ID único HTML generado automáticamente (solo lectura). Una cadena de 32 caracteres.
Nombre Nombre del formulario.
Modo [Necesario]
Modo de visualización del formulario:
•editar: el control está habilitado para editar cuando se procesa.
•ver: el control solo se puede ver cuando se representa. El contenido no se puede editar.
•deshabilitado: el control se muestra como deshabilitado. El control se muestra en gris para
indicar el modo deshabilitado. El contenido tampoco se puede editar.
Descripción Breve descripción de qué trata el formulario.
JavaScript Abre el editor de JavaScript utilizado para insertar código JavaScript en el formulario.
Idioma Si hay muchos idiomas guardados para el formulario, el menú desplegable los enumerará y
mostrará el formulario en el idioma seleccionado.
Libs externas Área donde las bibliotecas externas se pueden definir para ser utilizadas en el tiempo de
ejecución.
Imprimir Dynaform Marque esta opción para tener la capacidad de imprimir Dynaform. Esta propiedad también
agrega un icono de impresora en la parte superior derecha de Dynaform cuando se procesa.
Versión disponible: disponible desde 3.0.1.7

10. JavaScript y Formularios Personalizados
 Esta propiedad utiliza el código JavaScript para mejorar y dar
más funcionalidad al comportamiento del formulario.
 Para agregar comandos de JavaScript al formulario, haga clic
en el botón "editar ..." de la propiedad.

11. JavaScript y Formularios Personalizados
 Se abre una ventana de editor donde se debe agregar el
código JavaScript. Por ejemplo, agreguemos una alerta simple
cuando se carga el formulario:
• Guarde el código insertado haciendo clic en
"Guardar" en la parte inferior del editor. Cuando se
abre DynaForm mientras se ejecuta un caso, se
muestra este mensaje:

12. Que puedo hacer con JavaScript
 JavaScript es muy útil para mejorar la facilidad de uso y
aumentar la funcionalidad de DynaForms.
 JavaScript puede utilizar para tareas tales como:
 Dinámicamente mostrar y ocultar campos en función de las
acciones de los usuarios.
 Cambiar el texto y las propiedades de estilo de los campos.
 Ofrecer ayuda y orientar a los usuarios con mensajes y alertas.
 Validación y estandarización de los datos introducidos en los
campos.
 Insertar automáticamente los valores en los campos.
 Haciendo cálculos entre campos.
 La gestión de las operaciones de campo de la grilla.
 Comprobación de los datos y obligando al usuario cambiar los
valores antes de presentar una Dynaform.

13. Librerias externas
 Esta propiedad permite a los usuarios agregar archivos de biblioteca externos a Dynaform
para agregar funcionalidades, contenido o estilos adicionales a Dynaform. Esta propiedad
es útil para agregar archivos JavaScript o CSS (hojas de estilo en cascada) a Dynaform, de
modo que se pueda acceder a ellos mediante un código HTML ubicado en la propiedad
de contenido de un Panel:

14. Imprimir Formulario
 Esta propiedad permite a los usuarios finales imprimir todo el contenido de
un Dynaform (utilizando los valores de campo actuales) al ejecutar casos,
agregando el icono en la esquina superior derecha del formulario.

15. Gracias
Práctica con Mapa de procesos, Formularios,
Editor de Condiciones, y JavaScript.