Manual Diseñador de Formularios 3.2 - formiik.zendesk.com · Este control permite ingresar texto desde el formulario a traves de los moviles, puede ser precargado al momento de enviar

López Cotilla No. 727, Colonia Del Valle Delegación Benito Juarez, Méxixo D.F. C.P. 03100

www.formiik.com thinking Big with Small Devices

Manual Diseñador de Formularios

Documentación

Versión 1.0

Autores: Nicolás Ramírez A. Fecha de Creación: 25-01-2014 Fecha de Actualización:



Tabla de Contenido Manual Diseñador de Formularios ........................................................................................................... 1 Introducción .......................................................................................................................................................... 5 Objetivo ................................................................................................................................................................. 6 1. Ingreso al Portal ....................................................................................................................................... 7 2. Menú Administración .............................................................................................................................. 7

2.1 Nueva .................................................................................................................................................. 7 2.2 Editar ................................................................................................................................................... 9 2.3 Promocionar .................................................................................................................................... 11

3. Controles o Tipod de Campos ........................................................................................................... 12 3.1 Label o Etiqueta .............................................................................................................................. 12 3.2 Titulo ................................................................................................................................................. 13 3.3 Editar texto ....................................................................................................................................... 13 3.4 Contraseña ...................................................................................................................................... 14 3.5 Texto ................................................................................................................................................. 15 3.6 Texto deshabilitado ........................................................................................................................ 16 3.7 Lista de selección ........................................................................................................................... 17 3.8 Caja de verificación ........................................................................................................................ 18 3.9 Botón de radio ................................................................................................................................. 19 3.10 Calendario ....................................................................................................................................... 20 3.11 Tabla ................................................................................................................................................. 20 3.12 Imagen ............................................................................................................................................. 21 3.13 Lista de compras ............................................................................................................................ 22 3.14 Localización ..................................................................................................................................... 23 3.15 Subforma ......................................................................................................................................... 24 3.16 Adjuntar ............................................................................................................................................ 24 3.17 Editar Archivo .................................................................................................................................. 25 3.18 Batería .............................................................................................................................................. 26



3.19 Dispositivo ....................................................................................................................................... 26 3.20 Firma ................................................................................................................................................. 26 3.21 Gps ................................................................................................................................................... 27 3.22 Acción ............................................................................................................................................... 28

4. Propiedades comunes ......................................................................................................................... 30 4.1 Propiedades generales .................................................................................................................. 30 4.2 Valor ................................................................................................................................................. 30 4.3 Condicionales .................................................................................................................................. 32

5. Anexos ..................................................................................................................................................... 33 5.1 Expresiones Regulares comunes ................................................................................................ 33



Tabla de Imágenes. Figura. 1. Pantalla Inicial Aplicación web Formiik .......................................................................... 7 Figura. 2. Menú Administración. ............................................................................................................. 7 Figura. 3. Diseñador de Formularios ..................................................................................................... 8 Figura. 4. Editar formato ............................................................................................................................ 9 Figura. 5. Pantalla de edición ................................................................................................................. 10 Figura. 6. Guardar formato ..................................................................................................................... 10 Figura. 7. Selección de formato -‐ Promoción .................................................................................. 11 Figura. 8. Label ............................................................................................................................................. 12 Figura. 9. Títulos .......................................................................................................................................... 13 Figura. 10. Texto editable ........................................................................................................................ 14 Figura. 11. Password ................................................................................................................................. 15 Figura. 12. Texto .......................................................................................................................................... 16 Figura. 13. Texto deshabilitado ............................................................................................................ 16 Figura. 14. Lista de Selección ................................................................................................................. 18 Figura. 15. Caja de verificación ............................................................................................................. 19 Figura. 16. Botón de Radio ...................................................................................................................... 19 Figura. 17. Calendario ............................................................................................................................... 20 Figura. 18. Calendario ............................................................................................................................... 21 Figura. 19. Imagen ...................................................................................................................................... 22 Figura. 20. Lista de compras .................................................................................................................. 23 Figura. 21. Localización ............................................................................................................................ 24 Figura. 22. Subforma ................................................................................................................................. 24 Figura. 23. Adjunto ..................................................................................................................................... 25 Figura. 24. Editar Archivo ....................................................................................................................... 25 Figura. 25. Batería ...................................................................................................................................... 26 Figura. 26. Dispositivo .............................................................................................................................. 26 Figura. 27. Firma ......................................................................................................................................... 27 Figura. 28. GPS ............................................................................................................................................. 28 Figura. 29. Acción ....................................................................................................................................... 29 Figura. 30. Propiedades generales ...................................................................................................... 30



Introducción El presente manual pretende orientar al lector sobre el uso del diseñador de formularios, el cual le permite administrar todos los formatos así como crear nuevos.



Objetivo Mostrar y explicar el funcionamiento de la funcionalidad de administración de formatos, así como a cada uno de los controles existentes, detallando su parametrización y configuración; dando un entendimiento profundo de la mejor forma de uso de cada uno.



1. Ingreso al Portal Ingresar la siguiente url: http://app.formiik.com

Figura. 1. Pantalla Inicial Aplicación web Formiik

Ingresar los datos de usuario. Ejemplo (Usuario: cliente\usuario - Contraseña: clave secreta)

2. Menú Administración Este menú solo está disponible para usuarios con perfil administrador, pues es en este donde se realizan las configuraciones de los formatos y usuarios con posibilidad de ingresar al sistema. En la primera sección de este menú se encuentran las opciones del diseñador.

Figura. 2. Menú Administración.

2.1 Nueva Esta opción sirve para crear y diseñar un nuevo formulario



Figura. 3. Diseñador de Formularios

El diseñador de formularios se divide en 3 grandes secciones verticales. A. Tipos de Campos

En esta sección se encuentran todos los controles disponibles para la construcción de formularios, de aquí es posible arrastrarlos y ponerlos en la posición deseada.

B. Diseño Esta sección es la zona de trabajo donde se construirán los formularios. Esta zona se divide en tres como se ve en la imagen “Figura 3”, cada una de estas tendrá por defecto un control de sub forma (Este será explicado en el numeral 3.15 de este manual). - Forma: Esta contendrá los controles que serán visibles al momento de gestionar una orden ya

sea desde el móvil o del portal web de Formiik. - Vista Previa: Esta contendrá controles que permiten la exposición de información estática o

precargada en él sistema, le servirán al operador para identificar si la orden que ha seleccionado es la correcta sin necesidad de abrirla. Esta vista también está disponible desde el portal web.

- Detalle: En esta se pueden realizar las mismas acciones que se comentaron en la sección de Vista Previa.

C. Propiedades



En esta sección se visualizaran las opciones de configuración y parametrización que poseen los controles. Las propiedades se visualizaran al dar clic en el control que se encuentra en la sección de diseño. Para agregar un control arrástrelo desde la sección de los tipos de campos hacia la vista de diseño (el medio) y suéltelo en la posición deseada.

2.2 Editar Esta opción permite modificar un formulario previamente guardado, ya sea en draft o en productivo. Seleccionar el formato a editar Draft o producción: Si lo que se busca es utilizar una versión basada en lo que actualmente se encuentra en producción, debe seleccionar producción. Si por el contrario ya tienes la versión en borrador (draft) selecciona esta opción. Proceso: Seleccionar el proceso al cual está asociado el formulario que desea modificar. Forma: Seleccionar el formato que se va a modificar. Versión: es posible que de un mismo formato existan varias versiones que serán identificadas por números, este campo cargara las versiones que existen de un formulario.

Figura. 4. Editar formato

Luego de seleccionar el formato que se desea modificar, se cargara en la sección 2 las tres pestañas (Forma, vista previa y detalle)



Figura. 5. Pantalla de edición

NOTA: Para guardar los cambios realizados en una forma, hay que tener en cuenta que es posible realizar las modificaciones en los ambientes de borrador o prueba y en el ambiente de producción. En este último los cambios no se verán reflejados inmediatamente pues por seguridad se almacenaran como borrador y luego tendrá que ser promocionado.

Figura. 6. Guardar formato

Si tiene dudas de acerca de cómo finalmente debe ser el formato le sugerimos que lo almacene como una versión diferente y conserve el historial de los formatos evitando perdidas por si debe devolver los cambios.



2.3 Promocionar Esta opción nos sirve para publicar un formulario que ya tengamos realizado al ambiente productivo, y este está disponible para poder ser descargado u originado en el móvil. Las páginas de esta sección, traen una ayuda que lo orientara si tiene alguna duda. Pasos para promocionar: Paso 1. En el menú administración seleccionar la opción “Promocionar”, seleccionar el proceso, el formato, y la versión del formato. Inmediatamente se cargaran las opciones de Persistente, Originada en campo y actualizable tal y como fueron configurados inicialmente.

Figura. 7. Selección de formato -‐ Promoción

Paso 2. Al igual que el paso anterior donde se selecciona la información que se va a promocionar, en esta ocasión es necesario seleccionar y completar toda la información de donde va a estar disponible. Por eso se debe seleccionar el proceso al que va a pertenecer, poner el nombre con el que se va a llamar el formulario y la versión que este va a tener. Adicional debe definir si es persistente, si este va a ser originado en campo y finalmente si el formato es actualizable o no. Una vez terminado este proceso debe hacer clic en el botón Promocionar.



3. Controles o Tipos de Campos En este apartado del manual se explicará la forma de configurar cada control, pero es necesario tener en cuenta que los controles tienen propiedades iguales para cada uno. Estas propiedades iguales a todos o a la mayoria de controles seran explicadas en el apartado 4.

3.1 Label o Etiqueta

Este control es empleado como texto informativo unicamente, puede tener valores predefinidos al momento de su creación o puede ser cargado al momento de enviar la información de la orden al sistema de Formiik

Figura. 8. Label



3.2 Titulo

El titulo se utiliza con el fin de dividir secciones dentro de un mismo formulario, este es simplemente informativo y no cuenta con el parámetro diccionario, es decir la información que se ponga en el parámetro caption es estática, se diferencia de la etiqueta porque este se visualiza con formato negrilla.

Figura. 9. Títulos

3.3 Editar texto Este control permite ingresar texto desde el formulario a traves de los moviles, puede ser precargado al momento de enviar las ordenes al sistema de formiik Actualizable: Indic a que este campo es empleado en la consulta de las formas actualizables. Visible: Indica que este campo es visible desde el primer momento en que se carga la orden en el movil. Esta propiedad puede ser modificada por los condicionales de otros campos. Solo lectura: Indica que el campo no va a poder ser modificable desde el formulario. La información que contiene debe ser precargada. Contraseña: Indica que el campo se comportara como tipo Password, este parametro convierte los caracteres escritos en puntos.



Figura. 10. Texto editable

3.4 Contraseña

Este control permite ocultar los caracteres que en se escriben reemplazandolos por puntos. Este campo es similar al editar texto. Las propiedades que posee este control estan descritas en la la sección 4 de este manual.



Figura. 11. Password

3.5 Texto

Este control funciona de manera similar al editar texto, pero este debe ser empleado para ingresar textos de longitud mayor como cometarios, explicaciones, entre otros. Las propiedades que posee estan descritas en la sección 4.



Figura. 12. Texto

3.6 Texto deshabilitado

Este control es empleado para mostrar información al usuario en campo, la información debe ser cargada previamente utilizando la propiedad Diccionario. La informació mostrada en este control no podra ser modificada por los asesores en campo.

Figura. 13. Texto deshabilitado



3.7 Lista de selección

Este control permite tener una lista de selección tipo combobox. La información puede ser cargada mediante catalogos o de manera manual. Lista en lazada: Esta opción se utiliza para manejar catalogos dependientes (ej. estado, municipio) En este campo se debe indciar el nombre del campo que depende, solo se configura en el campo dependiente (ej. Municipio) Elemento enlazado: Esta opción se utiliza para manejar catalogos dependientes (ej. estado, municipio) En este campo se debe indciar el nombre del tag xml (dentro del catalogo) que filtra las opciones ej (id_estado) Fuente de datos manual: Esta opción se debe elegir cuando los datos que va a contener la lista se ingresaran de forma manual, es decir se debe ingresar la descripción o el valor visible por la aplicación y el Fuente de datos catalogo: Esta opción se debe seleccionar cuando los datos de la lista seran precargados mediante un catalogo. Interruptor: Valor: Contiene la descripcion que sera visualizada en el dispositivo móvil. Cuando la carga de información es a través de catalogos aquí se debe poner el nombre del parametro que contiene la descripción. Llave: Contiene el valor a almacenar cuando se seleccióne una opción. Cuando la carga de información es a través de catalogos aquí se debe poner el nombre del parametro que contiene el valor.



Figura. 14. Lista de Selección

3.8 Caja de verificación Este control permite crear un conjunto de cajas verificación, el usuario podra seleccionar uno o varios datos según sea el caso. Valor: Contiene la descripción de la opción, esta sera visualizada en la aplicación móvil. Llave: Contiene el valor que identificara la respuesta. Cheked: Al usar este parametro, la opcion que se encuentre seleccionada estrá chequeada al momento de abrir el formulario.



Figura. 15. Caja de verificación

3.9 Botón de radio

Este control permite al usuario seleccionar una unica opción, se recomienda el uso para casos en los que se desea conocer el genero de la persona o en encuestas Valor:

Figura. 16. Botón de Radio



3.10 Calendario Este control permite ingresar fechas en el formulaio, el objetivo es guardar el valor de las fechas Default: Sirve para poder seleccionar una fecha predeterminada. Rango: Activa los campos de Inicial y Final para poder sólo seleccionar de un rango de fechas. Inicial: Controla que se ingresen valores de fecha anteriores al estipulado en este campo FormatDate: Permite controlar el formato en que se almacenara la fecha seleccionada.

Figura. 17. Calendario

3.11 Tabla

Este control permite cargar información organizada en una tabla HTML, se recomienda usar este control en una exclusiva para él. Es obligatorio el uso del diccionario, pues la información que se visualiza en él debe ser precargada.



Figura. 18. Calendario

3.12 Imagen

Este control permite tomar una foto con la camara del dispositivo móvil, aduntandola a la orden a la que pertenece. Calidad: Permite cofigurar la calidad con la que se desea que se almacene la imagen, esto evita depender de que se haya configurado previamente la resolución de la camara del móvil.



Figura. 19. Imagen

3.13 Lista de compras

Este control permite realizar un pedido en modo carrito de venta (solo valido para Formiik-IPAD)



Figura. 20. Lista de compras

3.14 Localización

Este control permite tomar la posición en la que se encuentra el asesor en el momento de presionarlo, almacena las cordenadas (latitud y longitud). Leyenda: Mensaje que se muestra sobre el control de gps Tiempo de espera: Máximo tiempo en segundos en el que la aplicación busca la geo posición. Agps: Este parametro se activa para permitir a la aplicación usar el GPS asistido, disminuyendo el tiempo de respuesta para encontrar las cordenas de la geo posición



Figura. 21. Localización

3.15 Subforma

El control de subforma permite organizar la información a recolectar subdividiendo el formulario, lo que permite al asesor tener una mejor visualización de las secciones a llenar. Este control en el movil se visualiza como una pestaña dentro del formulario.

Figura. 22. Subforma

3.16 Adjuntar



Este control permite adjuntar un archivo al formulario, ya sea una imagen un archivo de office entre otros. Leyenda: Es el texto que muestra sobre el control Tipo de archivo: Permite limitar que tipo de archivo se debe subir ej (.xls, .pdf) Prioridad: Se indica si los archivos adjuntos son prioritarios al subirlos en comparación con los demás archivos

Figura. 23. Adjunto

3.17 Editar Archivo

Este control permite adjuntar una archivo externo al formulario, se emplea principalmente para reconocimientos de clientes ya que es posible adjuntar una imagen y para el calculo financiero de cuotas o prevalidacion finianciera mediante un archivo de excel, posteriormente este archivo puede ser modificado y adjuntado al formato. Solo lectura: Esta propiedad evita que el archivo se vuelva a adjuntar como parte de la respuesta

Figura. 24. Editar Archivo



3.18 Batería

Este control permite llevar una registro del porcentaje de batería con la que cuenta el celular al momento de responder una orden.

Figura. 25. Batería

3.19 Dispositivo

Este control permite registrar imei del celular del que se responde la orden.

Figura. 26. Dispositivo

3.20 Firma



Este control permite ingresar una firma digitalizada mediante el touch del teléfono móvil. Esta se almacena como una imagen, es posible utilizarlo para aceptar teminos y condiciones del cliente como consulta a centrales de riesgo.

Figura. 27. Firma

3.21 Gps

Este control es una evolución del control de localizacion por lo que cuenta con las mismas fuciones basicas de este control y una avanzadas que se describen a continuación. Valido: Exige que se obtenga por lo menos una coordenada valida para ser almacenada, en caso de no consguirla no permite guardar el formulario. Primer valido: Bloquea el control cuando al ser presionado consigue una corrdenada valida Nivel: Es el nivel de presición con la que se quiere obtener la coordenada. A mayor presicion mayor tiempo tomara obtener una coordenada valida Resultado: Este parametro permite configurar la visualización de las coordenadas después de haber sido tomada Numero de intentos: numero de intentos maximo para obtener una coordenada valida, despues de este numero de intentos si no se consigue una coordenada valida, permite almacenar el formulario.



Disparador: Esta opción permite desencadenar (iniciar) la toma de gps a partir de un control de foto y/o choicelist, solo debe elegir de que control dispara ese inicio de geolocalización

Figura. 28. GPS

3.22 Acción Este control permite realizar el llamado de un servicio creado por el cliente con el fin de obtener una respuesta dados unos parámetros. Leyenda del botón: En este parámetro debe poner el texto que se visualizará en el botón que ejecutara la acción Datos a enviar: aquí esta todos los controles empleados para la construcción del formulario, de este listado se debe escoger cuales son necesarios para llevar acabo la acción. Requerido: Este check debe estar seleccionado para agregar los campos requeridos, para ejecutar la acción. Del listado de datos a enviar seleccionar uno, activar el check de requerido y dar clic en el botó agregar. Seleccionados: En esta lista se encolan los campos seleccionados para realizar la acción. Acción: En esta opción se puede indicar el nombre del método (del desarrollo del cliente) que enviara los cambios hacia el formato (se recomienda dejarlo vacío para que sea controlado por el servicio mismo)



Figura. 29. Acción

3.23 Formedit

Este control permite asociar el contenido de otro formato de manera que pueda visualizarse en tipo Grid (sirve para emular la captura horizontal de pedidos, formas de pago u otra necesidad de visualizar por línea los datos capturados), como funciona este control es que al dar clic abre la vista Grid y permite agregar/borrar o editar las líneas en forma de Grid al dar Editar se permite abrir el formato incrustado lo que la posibilidad de hacer la función que el cliente necesite mediante otro formato.



4. Propiedades comunes

4.1 Propiedades generales Nombre: Es como se identifica el control. Todos los controles poseen esta propiedad. Tiene como restricción que debe empezar con una letra. Puede contener números Título: Es la etiqueta con la que se visualizará el campo en el dispositivo móvil o en el portal web KeyForSave: Es el identificador único del campo. Se recomienda usar el mismo tanto para el nombre como para el KeyForSave. Este parámetro permite identificar el campo en el XML, es decir tal como se configure aquí es como se encontrara en el XML. Diccionario: El diccionario se utiliza para precargar información en el campo. Por ejemplo si tenemos un control de texto, y en este queremos visualizar el nombre del cliente, entonces debemos configurar para que este campo con el nombre del dato que queremos tomar para el ejemplo podría ser “Nombre_Cliente”. También se recomienda usar el mismo valor que se usa en el KeyForSave. Actualizable: Indic a que este campo es empleado en la consulta de las formas actualizables.

Figura. 30. Propiedades generales

4.2 Valor



Estos parámetros permiten configurar la obligatorierad del campo, adicionalmente si es texto permite configurar mediante expresiones regulares como debe llenarse el campo. Requerido: Indica que el asesor está obligado a llenar o seleccionar una opción para poder consular o almacenar la información del formulario. Mensaje 1: Mensaje que se visualizara cuando el campo no haya sido completado Regex: Check que indica si el campo se le va a configurar expresiones regulares. En caso de ser así es obligatorio ponerle un mensaje Regex: En este campo se debe escribir la expresión regular con la que se quiere validar el texto escrito. Mensaje 2: Este mensaje aparecerá cuando no se cumpla la condición interpuesta por el regex



4.3 Condicionales Los formatos condicionales permiten agregar a los controles la posibilidad de ser ocultos o visibles mediante el cumplimiento de la parametrización establecida. Si el campo es visible en el formulario y se desea ocultar cuando otro campo tenga la respuesta que indique ocultar entonces la casilla del campo es visible deberá permanecer deschequeada. En el caso contrario, es decir, que el control este invisible desde el formulario y quiera ser visible cuando la condición se cumpla la casilla deberá estar chequeada. Signo + : Permite adicionar una nueva fila para realizar combinaciones de condiciones a cumplir. Operador: Esta lista desplegable contiene los operadores lógicos a través de los cuales se relacionarán las condiciones. Field Name: En este campo debe ir el KeyFor Save del control que se desea evaluar. Text: Valor esperado para que se cumpla la condición. Signo - : Permite eliminar la fila de condición.



5. Anexos

5.1 Expresiones Regulares comunes Numero con decimales: ^[0-9]+(\.[0-9]{1,2})?$ Solo números ^[0-9]{0,3}$ Alfa numérico ^[A-Za-z\sñÑáÁéÉíÍóÓúÚüÜ#0-9\.\,\;\:\+\-\*\/]{0,40}$ Códigos postales ^[0-9]{0,5}$ Correo electrónico ^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$

Documents

Manual Diseñador de Formularios 3.2 - formiik.zendesk.com · Este control permite ingresar texto desde el formulario a traves de los moviles, puede ser precargado al momento de enviar