Histórico da Página

...

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.
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.
Usability: The form must be easy to use, containing only fields that are important for tasks or processes.
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:
Positioning of the actions: The most important actions must be placed where the user can easily access them, as shown in the figure:
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.
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.
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.
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.
Types: The Mobile Form definitions support types:
1. text
2. textArea
3. radio
4. select
5. combobox
6. checkbox.

...

Deck of Cards

effectDuration	0.5
id	install-windows
history	false
effectType	fade

Card

default	true
id	1
label	Fluig Studio
title	Select the Language

Fluig Studio

To add a new form with support for mobile devices, execute the standard procedure for export of form and select the fields that will compose the Mobile Form on the screen before the conclusion of the export.

After the export, another HTML file marked as "mobile" in the folder forms of theFluig project will be included.

See in the following image the mobile selection screen when exporting a form:

Figure 15 - Mobile Form.

After the export, the form must be as the following image:

Informações

title	Note

After Fluig has identified the Mobile Form by name, it must have the same name as the web form plus the word "_ ecmMobile".

Example: After the web form "compras.html" has been created, the Mobile Form necessarily must be named: "compras_ecmmobile.html".

Card

id	2
label	Mobile Forms is Processes
title	Usage Term

Setting Mobile Form in Processes

You can enable the creation of Mobile Form through the Form Generator, as in the step below:

Step 1: Create or edit an existing process and click the item Form.

Step 2: Select the target folder where the form will be published, also assign a title and description. After that, click Create form.

Step 3: Include fields and in each of them, select whether this will also be added to the form for mobile devices by clicking on the option Mobile Form?.

Informações

icon	false
title	Info

Information

Not all mapped fields on the process form can be mapped onto the form for mobile devices. The fields that can be mapped show the option "Mobile Form?".

Card

id	3
label	Upload by document browsing
title	Fluig's Installation

Upload via Document browsing

In the upload via document browsing a standard post of form is executed where the web form must have a defined name and the term _ecmmobile must be added to the Mobile Form.

.

Informações

title	Note

After Fluig has identified the Mobile Form by name, the Mobile Form must have the same name as the web form plus the word "_ecmMobile".

Example: After the web form "compras.html" has been created, the Mobile Form necessarily must be named: "compras_ecmmobile.html".

Nota

title	Attention

Form definitions generated by the methods of creation listed above need to be edited; in case there is need for any special customization, they are automatically generated containing the basic items for its functioning.

...

Process 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 "this process cannot be executed by mobile."; 
	}
}

...

Example

Faça o download dos arquivos exemplo aqui.

Please download the example files here.

Below is an example of a form that has been mapped for use on mobile devicesAbaixo segue um exemplo de formulário que foi mapeado para uso em dispositivos móveis:

Web Form

Mobile Form

Informações

title	Note

As we can see, the Web Form has many fields and its mapping for mobile devices must be done very carefully.

The fields Proposal Data were mapped for Mobile, note that there are fields that do not exist in the Mobile as they are not necessary in this context:

...

Árvore de páginas

Versões comparadas

Versão antiga 3

Nova versão 4

Chave

Example