Histórico da Página
...
No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveis. Devido a isso, ao salvar formulários no Fluig, automaticamente os formulários mobile são gerados, de acordo com o mapeamento dos campos do formulários do processo.
Existem Apesar do Fluig dispor da geração automática, existem diversas particularidades para o desenvolvimento e customização de formulário Mobile, todos eles serão tradados no decorrer deste guia.
O Formulário Mobile é gerado automaticamente pelo Fluig de acordo com um mapeamento dos campos do formulário do processo. A geração automática não traz integrações, customizações, funções Javascript's e CSS, isso deve ser feito manualmente e adequado conforme necessidade do processo. (Ficou um pouco confuso, parece que o cliente não compreenderá que na exportação os scripts de formulário serão exportados..... Na exportação de um processo workflow, vinculado a um formulário com eventos customizados, os eventos serão também exportados para o formulário mobile.).
Recomendações para Processos com Formulário Mobile
Inicie o desenvolvimento pelo formulário mais restritivo:O Formulário Mobile é mais restritivo que o Formulário Web, por isso é indicado que o desenvolvimento seja iniciado por ele. Quando você conseguir colocar todas as informações necessárias pro processo no Formulário Mobile, o mapeamento para Web será muito mais fácil, uma vez que o tamanho de tela é muito maior.
Obs.: É possível fazer de forma contrária, porém o trabalho normalmente é maior.
Podemos recomendar que a modelagem mobile seja feito antes? Visto que é possível modelar formulários diretamente pela web, na modelagem do processo? Favor confirmar se isso pode ser sugerido, junto a equipe de produto.
...
Formulário Responsivo: Hoje no mercado existe os mais variados tipos de tamanhos de telas e resoluções, por isso qualquer formulário desenvolvido para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.
...
Estética: A aparência visual e design do html devem ser atraentes para os usuários, conseguimos isso através de CSS ou jQueryMobile que será explicado nas próximas sessões.
...
Usabilidade: O Formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.
...
Área de clique: Os elementos do HTML devem estar bem posicionados de forma que facilite a área de clique, pois hoje existem dispositivos que as telas são muito pequenas.Segue um exemplo:
...
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar mais facilmente, conforme a figura:
...
Recomendações para Processos com Formulário Mobile
Formulário Responsivo: Hoje no mercado existe os mais variados tamanhos de telas e resoluções, por isso qualquer formulário desenvolvido para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.
Estética: A aparência visual e design do html devem ser atraentes para os usuários, conseguimos isso através de CSS ou jQueryMobile que será explicado nas próximas sessões.
Usabilidade: O Formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.
Área de clique: Os elementos do HTML devem estar bem posicionados de forma que facilite a área de clique, pois hoje existem dispositivos que as telas são muito pequenas.Segue um exemplo:
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar mais facilmente, conforme a figura:
- Customizações: As customizações devem ser feitas dentro dos eventos do processo ou formulário na Web, todos os eventos que são aplicados nos formulários Web também são aplicados nos formulários Mobile.
- Arquivos anexos: Os arquivos anexos do formulário Web não são carregados para o formulário Mobile, por isso o CSS e as funções Javascript's devem ser implementadas dentro do HTML Mobile.
- Acesso a serviços internos e externos: Qualquer acesso a webservices ou outros serviços interno ou externo deve ser feito via javascript. Recomendamos o uso de jQuery Soap para Webservices.
- Nem todas informações precisam estar no Formulário Mobile: O grande limitador do Mobile é o tamanho de tela, por isso mapeie os campos que são mais importantes para que tenham prioridade no formulário. Existem campos que são informativos e não tem grande utilidade no processo ou tarefas, esses podem ser eliminados do Formulário Mobile.
- Tipos: Formulário Mobile suporta os tipos:
- text
- textArea
- radio
- select
- combobox
- checkbox.
Benefícios
Porque devo usar o Formulário Mobile?
- Permite iniciar/movimentar solicitações de qualquer dispositivo móvel, independente de sua localização geográfica.
- Acesso rápido as informações, mostrando apenas as informações mais relevantes.
- Permite a continuidade do processo, mesmo fora do ambiente empresarial.
- Através da funcionalidade "Processo Off-line" consigo preencher informações mesmo sem acesso a internet, para sincronização posteriormente.
Criando um Formulário Mobile
| Deck of Cards | |||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||
|
...
Benefícios
Porque devo usar o Formulário Mobile?
...
Fluig Studio
Para incluir um novo formulário com suporte a dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluig.
...
Ao acionar o +, o item é expandido:
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas