...

Index

Formulario Móvil

En el Fluig, es posible mover solicitudes workflow, a partir de aplicaciones móviles. Debido a eso, al guardar un formulario en el Fluig, automáticamente se genera el formulario móvil, de acuerdo con el mapeo de los campos del formulario del proceso.

A pesar de que el Fluig dispone de la generación automática, existen diversas particularidades para el desarrollo y personalización del formulario Móvil, estas se tratarán en el transcurso de esta guía.

Recomendaciones para Procesos con el Formulario Móvil

Mobile Form

In Fluig, it is possible to handle workflow requests from mobile applications. Consequently, when saving a form in Fluig, a Mobile Form is automatically generated, according to the field mapping of the process forms.

In spite of the automatic generation feature of Fluig, there are several points of interest for the development and customization of Mobile Forms, which will be dealt with throughout this guide.

Recommendations for Processes with Mobile Forms

1. Responsive Form: On the market today there are varying sizes of screens and resolutions, so any form developed for Mobile should be responsive, i.e. it should fit any screen size.
    

2. Aesthetics: The visual appearance and HTML design must be attractive to users; we have achieved it through CSS or jQueryMobile, which will be explained in the next sections.
     

3. Usability: The form must be easy to use, containing only fields that are important for tasks or processes.
    

4. Click area: HTML elements must be well positioned in a manner that facilitates the click area because there are devices today whose screens are too small. Here is an example:

   
   

   Image Added

5. Positioning of the actions: The most important actions must be placed where the user can easily access them, as shown in the figure:

   Image Added

   Image Added

6. Customizations: The customizations must be made within the process events or form definitions on the Web. All the events that are applied in web forms are also applied in Mobile Forms. For more information, visit the guide Customization of forms.
   
   
7. Attached files: The attached files from the Web form are not loaded onto the Mobile form, so the CSS and Javascript functions should be implemented within the HTML Mobile.
   
   
8. Access to internal and external services: Any access to Webservices or other external or internal services must be done via javascript. We recommend the use of jQuery Soap for Webservices.
   
   
9. Not all information needs to be in the Mobile Form: The great restrain in Mobile is the screen size, so map the most important fields so that they are prioritized in the form. There are informative fields that don't have great utility for the process or tasks; they don't need to be included in Mobile Form.
   
   
10. Types: The Mobile Form definitions support types

11. Formulario Responsivo: Hoy en el mercado existen variados tamaños de pantallas y resoluciones, por eso cualquier formulario desarrollado para Móvil debe ser responsivo, es decir, se debe ajustar a cualquier tamaño de pantalla.
     

12. Estética: La apariencia visual y design del html deben ser atractivos para los usuarios, conseguimos eso a través de CSS o jQueryMobile que se explicará en las próximas sesiones.
      

13. Usabilidad: El formulario debe ser fácil de usar, conteniendo apenas los campos importantes para tareas o procesos.
     

14. Área de clic: Los elementos del HTML deben estar bien posicionados de tal manera que facilite el área de clic, pues hoy existen dispositivos en que las pantallas son muy pequeñas. Sigue un ejemplo:

    Image Removed
     

15. Posicionamiento de las acciones: Las acciones más importantes deben estar posicionadas donde el usuario consigue alcanzar fácilmente, conforme a la figura:

    Image Removed

    Image Removed
     

16. Personalizaciones: Las personalizaciones se deben realizar dentro de los eventos del proceso o de definiciones de formulario en la Web, todos los eventos que se aplican en los formularios Web también se aplican en los formularios Móvil. Para obtener más informaciones acceda la guía Personalización de Formularios.
    Archivos adjuntos: Los archivos adjuntos del formulario Web no se cargan al formulario Móvil, por eso el CSS y las funciones Javascript's se deben implementar dentro del HTML Móvil.
    Acceso a servicios internos y externos: Cualquier acceso a webservices u otros servicios interno o externo se debe realizar vía javascript. Recomendamos el uso de jQuery Soap para Webservices.
    No todas las informaciones precisan estar en el Formulario Móvil: El gran limitador del Móvil es el tamaño de pantalla, por eso mapee los campos que son más importantes para que tengan prioridad en el formulario. Existen campos que son informativos y no tienen gran utilidad en el proceso o tareas, estos no precisan incluirse en el formulario Móvil.
    Tipos: Definiciones de Formulario Móvil soporta los tipos:
    
    1. text
    2. textArea
    3. radio
    4. select
    5. ComboBoxcombobox
    6. checkbox.
       

Beneficios

¿Por qué debo usar el Formulario Móvil?

...

Benefits

Why should I use Mobile Form?

• It allows you to start/handle requests from any mobile device regardless of their geographic location.
• Quick access to the information, showing only the most relevant information.
• It allows the continuation of the process, even outside the corporate environment.
• Through the feature "Off-line process" I can fill in information even without access to the internet, for future synchronization.
  
  
  

Creating a Mobile Form

In Fluig you can create form definitions in different ways, using Fluig Studio, through the modeling of the workflow processes or through upload form in document navigation.

Now browse the tabs below and follow the ways to create forms:

Creando un Formulario Móvil

En el Fluig es posible crear definiciones de formularios de diferentes maneras, utilizando el Fluig Studio, a través del modelado de procesos workflow o a través de upload de  formulario en la navegación de documentos.

Siga a continuación, moviéndose por las pestañas a seguir, las formas de creación de formularios:

Personalizando de Formulario Móvil

Con la inclusión de formularios que soporten la visualización en dispositivos móviles, es posible mover solicitudes Workflow y realizar el relleno de las informaciones de formularios con mayor movilidad y agilidad.

Como hemos visto, el Formulario Móvil no carga archivos adjuntos, luego, cada personalización se debe realizar dentro del HTML, este posee una serie de particularidades que se tratarán a continuación:

CSS

Al personalizar un Formulario Móvil, el CSS utilizado para parte Web probablemente no se aplica al archivo del dispositivo móvil, por eso se recomienda que el Formulario Móvil use un CSS propio que mantenga el formulario responsivo.

Customizing the Mobile Form

With the inclusion of forms that support visualization on mobile devices, it is possible to handle workflow requests and fill in the form information with greater mobility and agility.

As we have seen, the Mobile Form does not load file attachments so all the customization must be done within the HTML, which has a number of peculiarities that will be addressed below:

CSS

To customize a Mobile Form, the CSS used for the Web part probably does not apply to mobile device file, so it is recommended that the Mobile Form uses its own CSS to keep the form responsive.

The CSS should be inserted inside the head in the file .html Mobile with the El CSS se debe agregar dentro de la head en el archivo .html Mobile y se debe utilizar la tag:

<style type="text/css"> Insira aqui o CSS </style>.

Siga a continuación, moviéndose por las pestañas a seguir, algunos ejemplos de componentes CSS que se pueden aplicar en el formulario Móvil:

 Now browse the tabs below and follow some examples of CSS components that can be applied in Mobile Forms:

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */ 
min-width:300px;
}

h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}

ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
 
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
 position:relative;
}

.mylabel {
width: 28%;
 overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display:inline-block;
 position:relative;
 float:left;
 line-height:32px;
}

input[type=text] {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

textarea {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

select {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

Usted debe tratar en el CSS todos los componentes que se utilizarán en su HTML Móvil para que todos tengan el mismo estándar, su HTML Móvil con CSS debe tener esa estructuraYou must handle in the CSS all the components that will be used in your HTML Mobile so all of them follow the same standard, your HTML Mobile with CSS should have this structure:

<html< html >
<head>
<title>Formulário<title> dePurchase ComprasForm </title>
<style< style type = "text/css" >
 <!--Aquíhere ustedyou debemust incluiradd lathe estructuraCSS delstructure CSSof deeach cada componentecomponent-->
</style>
</head>
<body>
</ body >
</html>

...

jQuery Mobile

El jQuery Móvil es un framework de interfaz para dispositivos móviles que tiene el objetivo de dar un layout responsivo para las definiciones de formularios. Él facilita mucho en el desarrollo, pues usted no precisa crear un CSS proprio para cada elemento y se puede utilizar en el Fluig Móvil. Es posible seguir ejemplos en el jQuery Mobile is a framework for interface of mobile devices that aims to give a responsive layout to form definitions. It greatly facilitates the development, because you don't need to create a CSS for each element and it can be used in Fluig Mobile. It is possible to follow examples in the link: http://demos.jquerymobile.com/1.4.2/.

Este se puede incorporar en el HMTL Móvil de forma simpleThis can be embedded into Mobile HTML in a simple way:

<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html>

JavaScript

Así como el As well as the CSS, el javascript también debe estar dentro del HTML Móvil, luego toda lógica que en la web, normalmente, queda en archivos .js, se debe transferir al Formulario Móvil.javascript must also be within the HTML Mobile, so all the logic that on the web is usually in .js files should be transferred to the Mobile Form.

To keep organization within the HTML, we recommend leaving the logics at the end of the filePara mantener una organización dentro del HTML, recomendamos dejar las lógicas al final en el archivo:

<html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
 /* AquíHere ustedyou debeshould incluiradd la lógicalogic javascript */
</script>

Servicios

Para utilizar servicios internos o externos al Fluig es necesario instanciar, ejecutar y tratar el retorno del servicio vía javascript. Para webservices, recomendamos el uso de jQuery Soap.

A continuación algunas sugerencias:

• El uso de servicios internos del Fluig, como por ejemplo Dataset, se deben realizar preferentemente en los eventos de personalización de Formulario y Procesos, de esta manera lo que se personalizará para la web, también se adoptará para móvil, evitando la replicación del código.
• Técnicas especiales para el formulario web, como por ejemplo a llamadas de dataset dentro del formulario, no se aplican en el Móvil. 

Traducción de Formularios

La traducción de Formulario Móvil se debe realizar siguiendo la guía de Traducción de Formularios . Pero el diferencial, es que será necesario incluir tres nuevos archivos con las literales siguiendo la nomenclatura a continuación:

Services

In order to use internal or external services to Fluig, it is necessary to instantiate, execute and handle the return of service via javascript. For webservices, we recommend the use of jQuery Soap.

Here are a few tips:

• The use of Fluig internal services, such as Dataset, should be made preferably in customizing events for Formand Processes, so what will be customized for the web will also be adopted for mobiles, avoiding code replication.
• Special techniques for web forms, such as the dataset calls within the form, are not applied to Mobile. 

Translation of forms

The translation of Mobile Forms must be made by following the guide to Translation of Forms . However, the difference is that you will need to add three new files with the literals following the nomenclature below:

• Portuguese: name_of_mobile_formPortugués: nome_do_formulario_mobile_pt_BR. properties;
• InglésEnglish: nome name_doof_formulariomobile_mobileform_en_US. properties;
• EspañolSpanish: nome name_doof_formulariomobile_mobileform_es. properties.

Principal secundario para dispositivos médicos

Los campos que emplean la técnica de principal y secundario no se ingresarán en el formulario generado automáticamente para dispositivos móviles por el Fluig. Pero el producto le permite desarrollar un formulario personalizado para dispositivos móviles consultando estos campos.

La consulta a los espacios padre e hijo en dispositivos móviles se realiza a través de funciones javaScript, disponibles dentro del objeto masterList  al momento de exhibir el formulario. Son ellas:

getValue

Parent Child pages for mobile devices

The fields that employ the technique of parent and child pages are not inserted into the automatically generated form for mobile devices by Fluig. But the product allows you to develop a customized form for mobile devices by consulting these fields.

The query to the parent and child fields on mobile devices is performed by means of javaScript functions available within the masterList object when the form is displayed. They are:

getValue

Returns a string with the value of a parent and child field, receiving the sequence number of the child, and the name of the field as parameters.

masterList.getValue(sequence,field);

getValues

Returns an object with all the values of the parent and child fields, grouped by sequence number. This method has no parametersDevuelve una string con el valor de un campo principal y secundario, recibiendo como parámetros el número de secuencia del secundario y el nombre del campo.

masterList.getValuegetValues(sequence,field);

getValues

getValuesBySequence

Returns an object with all the values of the fields of a given sequence. Receives the sequence number as parameterDevuelve un objeto con todos los valores de los campos principal y secundario, agrupados por el número de secuencia. Este método no posee parámetros.

masterList.getValuesgetValuesBySequence(sequence);

getValuesBySequence

Devuelve un objeto con todos los valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuencia.

masterList.getValuesBySequence(sequence);

getValuesByField

Devuelve todas las secuencias y valores de un determinado campo. Recibe como parámetros el nombre del espacio.

masterList.getValuesByField(field);

Ingrese adjuntos de la solicitud directamente desde el Formulario

getValuesByField

Returns all the sequences and values of a given field. Receives the name of the field as parameter.

masterList.getValuesByField(field);

Insert request attachments directly from the form.

There is a very simple way to save attachments upload through a button on the form. To do this, it is necessary to insert in the event onclink of the button the method Existe una forma bien simple para guardar adjuntos upload a través de un botón en el formulario. Para eso es necesario ingresar en el evento onclink del button el método showCamera:

<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
 
<script language="javascript">
          
          function showCamera(parameter) {
              JSInterface.showCamera(parameter);
          }
</script>

El parámetro nome_do_anexo es una String y corresponde al nombre del anexo que se guardará en la lista de adjuntos de aquella solicitud. 

¿Cómo identificar que estoy usando el Móvil en los eventos?

Con ese recurso es posible aplicar una personalización o/y restricción solamente en el Formulario Móvil, independiente de la Web. Así puedo definir que un proceso o actividad va a recibir un valor diferenciado o que determinada actividad no se puede ejecutar por el Móvil vía personalización.

Existen dos formas de hacer esa personalización:

The parameter name_of_attachment is a string and corresponds to the name of the attachment that will be saved in the list of attachments of that request. 

How to identify that I'm using Mobile in the events?

With this feature, it is possible to apply a customization and/or restriction only in the Mobile Form, regardless of the Web. So, I can define that a process or activity will receive a distinguished value or that a particular activity cannot be performed by Mobile via customization.

There are two ways to do this customization:

• Form events
  All the events that receive the form in the method can have a unique customization for the Mobile Form, namelyEventos del Formulario
  Todos los eventos que reciben en el método el form pueden hacer una personalización exclusiva para el Formulario Móvil, son los eventos:

  • AfterProcessing
  • AfterSaveNew
  • BeforeProcessing
  • DisplayFields
  • EnableFields
  • InputFields
  • ValidadeForm
  • ValidateForm

  To use the event, it is necessary to make the following call Para utilizar el evento es necesario hacer la siguiente llamada form.getMobile(), donde retornará un booleano indicando si es un formulario móvil o no. Ejemplo: which returns a Boolean indicating whether it is a Mobile Form or not. Example:

  
  
  

  Bloco de código
  language javascript
  function displayFields(form, customHTML) { if ( form.getMobile() != null && form.getMobile()) { form.setValue('mtr_usuario', new java.lang.Integer(123456)); } }

  
  
  

• Eventos del Proceso
  En los eventos de proceso, la propiedad WKMobile identifica si la acción fue realizada por el dispositivo móvil, ella puede ser utilizada en los eventos del proceso conforme al ejemploProcess events
  In the process events, the property WKMobile identifies if the action was performed by the mobile device, it can be used in the process events as in the example:
  
  

  Bloco de código
  language javascript
  function beforeStateEntry(sequenceId){ var isMobile = getValue("WKMobile"); if (isMobile!=null && isMobile==true){ throw "Esethis procesoprocess nocannot puedebe serexecuted ejecutado por el móvil."; by mobile."; } }

...

Example

Haga el download de los archivos ejemplo aquí. 

A continuación un ejemplo de formulario que se mapeó para uso en dispositivos móviles:

• Formulário Web

Image Removed

• Formulario Móvil

Image Removed

Ítems que están en una tabla se pueden transformar en un collapsible del jQueryMobile.

Please download the example files here. 

Below is an example of a form that has been mapped for use on mobile devices:

• Web Form

Image Added

• Mobile Form

Image Added

Items that are in a table can be transformed into a collapsible of jQueryMobile.

By clicking the button '+', the item is expandedAl activar el botón '+', el ítem se expande: