apitdn/fluig_rag_docs/Plataforma Documentação técnica/Configuração/Mobile/Desenvolvimento de formulário mobile.md

---
title: Desenvolvimento de formulário mobile
source: https://tdn.totvs.com/pages/viewpage.action?pageId=146181573
path: \Plataforma  Documentação técnica\Configuração\Mobile\Desenvolvimento de formulário mobile.md
---

# Índice

- 1 [Formulário mobile](#Desenvolvimentodeformuláriomobile-Formuláriomobile)
- 2 [Recomendações para processos com formulário mobile](#Desenvolvimentodeformuláriomobile-Recomendaçõesparaprocessoscomformuláriomobile)
- 3 [Benefícios](#Desenvolvimentodeformuláriomobile-Benefícios)
- 4 [Criando um formulário mobile](#Desenvolvimentodeformuláriomobile-Criandoumformuláriomobile)
- 5 [Carregando dados do dataset em modo offline](#Desenvolvimentodeformuláriomobile-Carregandodadosdodatasetemmodooffline)
- 6 [Desenvolvimento de formulário mobile](#Desenvolvimentodeformuláriomobile-Desenvolvimentodeformuláriomobile)
  - 6.1 [Funções mobile](#Desenvolvimentodeformuláriomobile-Funçõesmobile)
    - 6.1.1 [getAttachments](#Desenvolvimentodeformuláriomobile-getAttachments)
    - 6.1.2 [beforeValidateAttachments](#Desenvolvimentodeformuláriomobile-beforeValidateAttachments)
  - 6.2 [Pai x Filho e Zoom para dispositivos móveis](#Desenvolvimentodeformuláriomobile-PaixFilhoeZoomparadispositivosmóveis)
    - 6.2.1 [Inserir anexos da solicitação diretamente do formulário](#Desenvolvimentodeformuláriomobile-Inseriranexosdasolicitaçãodiretamentedoformulário)
    - 6.2.2 [Desabilite o evento Pull to refresh do componente nativo](#Desenvolvimentodeformuláriomobile-DesabiliteoeventoPulltorefreshdocomponentenativo)
    - 6.2.3 [Como identificar se estou usando o mobile nos eventos?](#Desenvolvimentodeformuláriomobile-Comoidentificarseestouusandoomobilenoseventos?)
    - 6.2.4 [Consumo de Datasets via xmlRPC](#Desenvolvimentodeformuláriomobile-ConsumodeDatasetsviaxmlRPC)
    - 6.2.5 [Explorando o input file no mobile](#Desenvolvimentodeformuláriomobile-Explorandooinputfilenomobile)
    - 6.2.6 [Formulário único](#Desenvolvimentodeformuláriomobile-Formulárioúnico)
    - 6.2.7 [Anexos de formulário](#Desenvolvimentodeformuláriomobile-Anexosdeformulário)
    - 6.2.8 [Guia de estilos off-line](#Desenvolvimentodeformuláriomobile-Guiadeestilosoff-line)
    - 6.2.9 [Versões mínimas dos browsers suportados](#Desenvolvimentodeformuláriomobile-Versõesmínimasdosbrowserssuportados)
    - 6.2.10 [Atualizar anexos de javascript de formulário mantendo sua versão ao importar para o Eclipse](#Desenvolvimentodeformuláriomobile-AtualizaranexosdejavascriptdeformuláriomantendosuaversãoaoimportarparaoEclipse)

# Formulário *mobile*

---

No Fluig, é possível movimentar solicitações *workflow*, a partir de aplicativos. Devido a isso, ao salvar um formulário no Fluig, automaticamente o formulário mobile é gerado, de acordo com o mapeamento dos campos do formulário do processo.

Apesar do Fluig dispor da geração automática de formulários, existem diversas particularidades para o desenvolvimento de formulário mobile. Estas serão tratadas no decorrer deste guia.

# Recomendações para processos com formulário *mobile*

---

- **Formulário responsivo:** hoje no mercado existem variados tamanhos de telas e resoluções dos dispositivos, por isso qualquer formulário desenvolvido para mobile deve ser responsivo, ou seja, deve se adequar 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, por isso recomendamos a utilização do Fluig Style Guide.
- **Usabilidade:** o formulário deve ser fácil de usar, contendo apenas os campos importantes para a tarefa ou processo.
- **Área de clique:** os elementos do HTML devem estar bem posicionados de forma que facilite a área de clique.

![](..\..\..\images\simula%C3%A7%C3%A3o-forms-mobile(2).png)

- **Posicionamento das ações:** as ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a imagem abaixo.

![](..\..\..\images\image2014-6-23%20123259.png)

![](..\..\..\images\image2014-6-23%2012337.png)

- **Desenvolvimentos:**os desenvolvimentos devem ser feitos dentro dos eventos do processo ou de definições de formulário na Web, todos os eventos que são aplicados nos formulários Web também são aplicados nos formulários mobile. Para mais informações acesse o guia **[Desenvolvimento de Formulários](http://tdn.totvs.com/pages/viewpage.action?pageId=75270483)**.
- **Acesso a serviços internos**: o acesso a serviços internos pode ser feito através de Datasets via xmlRPC. Para mais informações, **[clique aqui](https://tdn.totvs.com/pages/viewpage.action?pageId=146181573#Desenvolvimentodeformul%C3%A1riomobile-ConsumodeDatasetsviaxmlRPC)**.
- **Acesso a serviços externos:** recomendamos a utilização de Datasets para acessar serviços externos, esses Datasets são acessados no mobile via xmlRPC conforme descrito acima.
- **Nem todas informações precisam estar no formulário mobile:** o grande limitador do mobile é o tamanho de tela do dispositivo, por isso mapeie os campos que são mais importantes para que tenham prioridade no formulário. Existem campos que são de teor informativo e sem grande utilidade no processo ou tarefas, estes não precisam ser inclusos no formulário mobile.
- **Consultas aos datasets via Javascript em eventos para validação de formulários:** não é recomendada a consulta em Datasets dentro dos eventos **[beforeMovementOptions](https://tdn.totvs.com/pages/viewpage.action?pageId=270924158#EventosdeFormul%C3%A1rio-beforeMovementOptions)** e **[beforeSendValidate](https://tdn.totvs.com/pages/viewpage.action?pageId=270924158#EventosdeFormul%C3%A1rio-beforeSendValidate)**, pois cada requisição gera uma atividade assíncrona, cujo tempo de retorno pode interferir na lógica de validação definida.
- **Carregamento inicial do formulário dentro de Javascript**: dependendo da plataforma e da versão do sistema operacional, o tempo e a ordem de carregamento do formulário a partir de um .js pode resultar em um comportamento diferente do planejado.

```
$(document).ready(function() { metodoDeCarregamento(); } //código presente em arquivo .js que será executado em tempo de carregamento (load) do mesmo e não do formulário.
```

- Incluir a função metodoDeCarregamento() dentro de um *timeout*:

```
setTimeout(function() { metodoDeCarregamento(); }, 1);
```

- Usar o método dentro do evento *onload*:

```
<body onload=metodoDeCarregamento()>
```

- **Formulários offline:** para a plataforma Android, o serviço da API pública [/public/ecm/dataset/search](http://fluig.totvs.com/api/public/ecm/dataset/search) não carregará os dados em modo *offline*, quando a requisição for realizada através do método POST.
- **Eventos de teclado na plataforma Android:** o evento *onkeypress*, atribuído para campos HTML, não é detectado pelo teclado da plataforma Android. Recomendamos utilizar o evento *oninput* e realizar os tratamentos necessários na chamada desse evento.

- A tag <input> possui a capacidade de suportar diferentes tipos de dados, dessa forma, como boa prática quando a mesma for utilizada, o atributo type deve ser definido, por exemplo:

```
<input type="text" id="idCampo" name="campoTxt">
```

**Tipos:**Definições de formulário mobile suporta os tipos abaixo:

- text
- textArea
- radio
- select
- combobox
- checkbox.
- email (3)
- tel (3)
- range (3)
- date (3)
- time (1)(3)
- week (2)(3)
- number
- hidden
- password

**(1)** Existe um bug no Android Lollipop (5.0) que inviabiliza o uso do tipo *time*. Para mais informações, [clique aqui](https://code.google.com/p/chromium/issues/detail?id=434695);

**(2)** O campo *week* não é suportado pelo iOS;

**(3)** Existe um bug no Android Jelly Bean (4.1, 4.2 e 4.3) que inviabiliza o uso do tipo *select*. Para mais informações, [clique aqui](https://code.google.com/p/android/issues/detail?id=42518#c12), [aqui](http://stackoverflow.com/questions/12090899/android-webview-jellybean-should-not-happen-no-rect-based-test-nodes-found/15153292#15153292) e [aqui](http://stackoverflow.com/questions/13438189/android-webview-in-different-tabs). Como medida de correção, a sugestão é utilizar o componente de Zoom: [Desenvolvimento de Formulários - Zoom](http://tdn.totvs.com/pages/viewpage.action?pageId=75270483#DesenvolvimentodeFormul%C3%A1rios-Zoom).

Atenção

Não está homologada a implementação de evento que utilizem *Gestures* (*swipe*, *longpress*, *tap*, entre outros) em formulário no Fluig Mobile.

# Benefícios

---

**Porque devo usar formulários no 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 informações mais relevantes;
- Permite a continuidade do processo, mesmo fora do ambiente empresarial;
- Através do recurso "Processo *Off-line*" é possível preencher informações mesmo sem acesso a internet, para futura sincronização.

# Criando um formulário mobile

---

Informações

Ao criar formulários para dispositivos móveis, é importante adotar algumas diretrizes para assegurar uma experiência eficaz para o usuário e garantir que a disposição dos campos e botões não comprometa a usabilidade. Nesse sentido:

- Evite posicionar os botões personalizados do formulário em áreas que concorram com o espaço reservado para o botão flutuante, geralmente utilizado ao acessar um processo ou tarefa. Isso visa garantir que os usuários não enfrentem dificuldades ao inserir dados no formulário.
- Garanta que os botões e campos do formulário sejam adaptáveis a diferentes tamanhos de tela e orientações, proporcionando uma experiência consistente em diversos dispositivos.
- Evite sobrecarregar a tela com múltiplos botões inferiores no formulário, dando prioridade à ação principal associada ao botão flutuante. Isso simplifica a interação do usuário, focando na funcionalidade mais relevante.

Atenção!

Ao realizar customizações, atente-se para que a renderização seja feita de forma correta em navegadores mobile. A customização deve estar compatível com o Safari para iOS e Chrome para Android.

Versões mínimas de cada plataforma que devem ser consideradas durante o desenvolvimento

| Versão mínima de cada plataforma | Versão mínima de cada browser |
| --- | --- |
| Android 4.0 (Ice Cream Sandwich) | Webkit 534.30 |
| iOS 7 | Mobile Safari 9537.53 |

No Fluig é possível criar definições de formulários de diferentes maneiras, utilizando o Fluig Studio, através da modelagem de processos *workflow* ou através de upload de formulário na navegação de documentos.

Acompanhe a seguir, movimentando-se pelas abas abaixo, as formas de criação de formulários:

Atenção!

Formulários de processos que possuem versões em rascunho não são carregados quando o usuário está offline (sem conexão com a internet). Somente informações do rascunho do processo são apresentadas.

**Fluig Studio**

Para incluir um novo formulário com suporte a dispositivos móveis, desenvolva um único formulário que atenda todos requisitos para o funcionamento na web e mobile, e realize o procedimento padrão para **[exportação de formulário](https://tdn.totvs.com/pages/viewpage.action?pageId=73894420#Guiar%C3%A1pidodaplataforma-Exportandoumformul%C3%A1rio)**.

**Configuração de formulário mobile em processos**

É possível permitir a criação do Formulário mobile também através do **Gerador de Formulário**, conforme os passos abaixo:

**01.** Crie ou edite um processo existente e acionar o item **Formulário**;

![](..\..\..\images\geracaoFormulario3%20-%20C%C3%B3pia.png)

---

**02.** Selecione a pasta destino onde o formulário será publicado, também atribua um título e descrição. Após isso, clique em **Criar Formulário**;

![](..\..\..\images\geracaoFormulario2%20-%20C%C3%B3pia.png)

---

**03.**  Inclua os campos e em cada um deles, selecione se este será também adicionado ao formulário para dispositivos móveis, clicando na opção **Formulário Mobile?**.

![](..\..\..\images\geracaoFormulario.png)

Informação

Nem todos os campos mapeados no formulário do processo podem ser mapeados para o formulário em dispositivos m´oveis. Os campos que podem ser mapeados exibem a opção **Formulário mobile?**

**Upload via navegação de documentos**

No upload via navegação de documentos é feito uma publicação de um formulário único, que deve atender os requisitos de funcionamento para web e mobile.

![](..\..\..\images\UPLOAD.png)

Atenção

As definições de formulários geradas pelos métodos de criação acima elencados, precisam ser editados e caso necessite de algum desenvolvimento especial, eles são gerados automaticamente contendo os itens básicos para seu funcionamento.

Atenção

Ao contrário da web, o comportamento da função *setHidePrintLink* no mobile não esconde o botão de impressão. Mas também não permite que o usuário efetue a impressão do formulário.

# Carregando dados do dataset em modo o*ffline*

---

Para realizar o carregamento dos dados do dataset em modo *offline* no formulário do processo, é necessário relacionar o dataset ao campo zoom faz uso durante o modo *offline.*Acompanhe a seguir, o procedimento para configuração do carregamento:

**Localizar o formulário**

**01.** Dentro do ECM, localize o formulário que está sendo utilizado no processo e em seguida acione **Propriedades**.

**![](..\..\..\images\Localizar%20formul%C3%A1rio.png)**

**Datasets do formulário**

**02.** Após clicar nas propriedades do formulário, navegue até a aba **Datasets do Formulário** e relacione o dataset ao qual está sendo utilizado no campo zoom.

![](..\..\..\images\Datasets%20do%20formul%C3%A1rio.png)

Atenção

Após definir as configurações, é necessário efetuar a limpeza de cache no aplicativo e realizar uma nova consulta.

Acesse nossa documentação e saiba mais sobre como **[Habilitar dataset offline no mobile](https://tdn.totvs.com/pages/viewpage.action?pageId=235598394#Plataforma%E2%9D%99Datasets-Habilitardatasetofflinenomobile)**.

# Desenvolvimento de formulário mobile

---

Com a inclusão de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações *workflow* e realizar o preenchimento das informações de formulários com maior mobilidade e agilidade.

## Funções mobile

---