rodolpho/apitdn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
apitdn/fluig_rag_docs/Plataforma Documentação técnica/Configuração/Mobile/Desenvolvimento de formulário mobile.md
T
rodolpho c64f698400 Initial commit
2026-05-06 13:35:47 -03:00

14 KiB
Raw Permalink Blame History

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

Índice

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.

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

  • **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.
  • 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.
  • 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 e 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 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 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;

(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, aqui e aqui. Como medida de correção, a sugestão é utilizar o componente de Zoom: Desenvolvimento de Formulários - 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.

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;

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;

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?.

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.

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 offline

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.

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.

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.

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

Reference in New Issue View Git Blame Copy Permalink