Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveis. Devido a isso, ao salvar um formulário um formulário no Fluig, automaticamente o formulário 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 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

...

  • .

...

...

Image Added


  • Posicionamento das ações:

...

  • as ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a

...

  • imagem abaixo.


Image Added

Image Removed

...

Image Added


  • 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

...

...

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

...


Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypeslide
Card
id1
labelCódigo que deve ser evitado

...

Bloco de código
languagejs
$(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.

Como sugestão:

    1. Incluir a função metodoDeCarregamento() dentro de um timeout:

      Bloco de código
      languagejs
      setTimeout(function() { metodoDeCarregamento(); }, 1);


    2.  Usar o método dentro do evento onload

      Bloco de código
      languagexml
      <body onload=metodoDeCarregamento()>
  1. 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.

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

  3. 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:   

    Bloco de código
    languagejs
    <input type="text" id="idCampo" name="campoTxt">

                                                                                                                                                                                                                      

  4. Tipos: Definições de Formulário Mobile suporta os tipos:
    1. text
    2. textArea
    3. radio
    4. select
    5. combobox
    6. checkbox.
    7. email (3)
    8. tel (3)
    9. range (3)
    10. date (3)
    11. time (1)(3)
    12. week (2)(3)
    13. number
    14. hidden
    15. password

...

Informações
titleInformaçõ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.
Nota
titleAtençã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 plataformaVersão mínima de cada browser
Android 4.0 (Ice Cream Sandwich)Webkit 534.30
iOS 7Mobile Safari 9537.53

...

Guia de estilos off-line

Agora é possível utilizar o guia de estilos em modo off-line sem a necessidade de qualquer conexão a internet, ficou bem mais fácil e independente personalizar seu formulário para processo off-line. Uma vez ao dia o Fluig Mobile ira verificar novas atualizações, caso alguma atualização esteja disponível, o download da mesma será feita automaticamente de forma rápida e transparente, sem precisar se atentar a formas manuais e demoradas para atualização. O guia de estilos off-line está disponível tanto para Android como para IOS. 


...