Skip to end of metadata
Go to start of metadata

Índice

Formulário Mobile 

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

Apesar do fluig dispor da geração automática, 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

  1. Formulário Responsivo: Hoje no mercado existem variados tamanhos de telas e resoluções, por isso qualquer formulário desenvolvida para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.

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

  3. Usabilidade: O formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.

  4. Á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:


  5. Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:


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

  7. Acesso a serviços internos: O acesso a serviços interno pode ser feita através de Datasets via xmlRPC. Para mais informações, clique aqui.

  8. Acesso a serviços externos: Recomendamos a utilização de Datasets para acessar serviços externos, esse Datasets são acessados no mobile via xmlRPC conforme descrito acima.

  9. 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, estes não precisam ser inclusos no formulário Mobile.

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

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

    Este código deve ser evitado:

    $(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:

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


    2.  Usar o método dentro do evento onload

      <body onload=metodoDeCarregamento()>
  12. 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.

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

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


(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 aquiaqui 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 as informações mais relevantes.
  • Permite a continuidade do processo, mesmo fora do ambiente empresarial.
  • Através do recurso "Processo Off-line" consigo preencher informações mesmo sem acesso a internet, para futura sincronização.


Criando um formulário Mobile

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:


    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 passo a seguir:


    Passo 1: Criar ou editar um processo existente e acionar o item Formulário.


    Passo 2: Selecionar a pasta destino onde esse formulário será publicada, também atribua um título e descrição. Após isso, clique em Criar Formulário.


    Passo 3:  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 para dispositivos móveis. 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 com 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 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.


    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.


    Pai Filho e Zoom para dispositivos móveis

    A partir do fluig 1.5.2 (server), temos uma nova técnica para utilização de Pai e Filho e Zoom que vai facilitar em muito o desenvolvimento sobre nossa plataforma. Usando o fluig Style Guide tudo ficará mais responsivo e esses dois componentes se adequam a web e ao mobile.



    Comece a usar hoje mesmo lendo detalhes na nossa documentação: Desenvolvimento de Formulários - Zoom e Desenvolvimento de Formulários - Pai x Filho.
     


    Atenção

    • O fluig dispõe de um serviço nativo para consumo de dados de datasets no componente de zoom. Não é permitido o uso de serviços personalizados para este componente.
    • Procure utilizar um número limitado de campos em componentes de Zoom para que se adequem melhor ao tamanho de tela. A utilização de um grande número de campos, ou do zoom dentro outros componentes, pode comprometer a visualização dos dados.

    Atenção - Trabalhando com tabelas

    • Não é recomendada a utilização de underscore - "___" - na propriedade name de uma coluna (tag <td>) em formulário que utilizem Pai x Filho pois não é renderizada no Mobile.

    Insira anexos da solicitação diretamente do formulário

    Há uma maneira bem simples para salvar anexos upload através de um botão no formulário. Para isso é necessário inserir no evento onclick do button o método showCamera:

    Atenção!

    Não recomendamos o troca do nome da função para o método showCamera no IOS pois isso fará com que o método não funcione.

    <input type="button" value="Insira Foto" onclick="showCamera('Nome do arquivo em anexo');"/>
     
    <script language="javascript">
              
              function showCamera(param) {
                  JSInterface.showCamera(param);
              }
    </script>


    O parâmetro passado na função JSinterface.showCamera é uma String e corresponde ao nome do anexo que será salvo na listagem de anexos daquela solicitação.

    Importante

    No fluig mobile somente imagens podem ser adicionadas como anexo. É possível escolher uma imagem da galeria ou ainda tirar uma foto usando a câmera.

    A partir da atualização 1.5.5

    Ao implementar o método JSinterface.showCamera, esta técnica também é aplicada na plataforma web. Acessando o fluig pelo navegador, ao clicar em um botão utilizando o recurso você será direcionado para a aba Anexos e uma janela exibida para a seleção dos arquivos.

    Acessando a aba de anexos será possível realizar o upload de apenas um arquivo por vez; Tentar selecionar mais que um causará erro.


    Desabilite o evento Pull to refresh do componente nativo

    Há uma maneira bem simples para desabilitar o evento de Pull to refresh responsável por atualizar os dados do formulário. Para isso é necessário inserir o método disablePullToRefresh:


    <script language="javascript">
        function disablePullToRefresh(){
            return true;
        }
    </script>

    Como identificar que estou usando o Mobile nos eventos?

    Com esse recurso é possível aplicar um desenvolvimento e/ou restrição somente no Formulário Mobile, independente da Web. Assim posso definir que um processo ou atividade vai receber um valor diferenciado ou que determinada atividade não pode ser executada pelo Mobile via desenvolvimento.

    Existe duas formas de fazer tal desenvolvimento:

      • Eventos do Formulário
        Todos os eventos que recebem no método o form podem fazer um desenvolvimento exclusivo para o Formulário Mobile, são os eventos:
        • AfterProcessing
        • AfterSaveNew
        • BeforeProcessing
        • DisplayFields
        • EnableFields
        • InputFields
        • ValidadeForm

        Para utilizar o evento é necessário fazer a seguinte chamada: form.getMobile(), onde retornará um booleano indicando se é um formulário mobile ou não. Exemplo:

        function displayFields(form, customHTML) {
           if ( form.getMobile() != null && form.getMobile()) {
             form.setValue('mtr_usuario', new java.lang.Integer(123456));
           }
        }
      • Eventos do Processo

        • beforeMovementOptions
        • beforeSendValidate

        Importante

         Os eventos "beforeMovementOptions" e "beforeSendValidate" serão executados no dispositivo mobile antes mesmo de serem enviados para o servidor.

        Para mais informações sobre estes eventos acesse a página Desenvolvimento de Workflow - Eventos para validação de formulário.


        Nos eventos de processo, a propriedade WKMobile identifica se a ação foi realizada pelo dispositivo móvel. Ela pode ser utilizada nos eventos do processo conforme exemplo:

        function beforeStateEntry(sequenceId){
        	var isMobile = getValue("WKMobile");
        	if (isMobile!=null && isMobile==true){ 
        		throw "Esse processo não pode ser executado pelo mobile."; 
        	}
        }

    Consumo de Datasets via xmlRPC

    O acesso de datasets pelo Mobile é realizado com o xmlPRC, desse modo é possível trocar de informações com fluig via AJAX.
    Para utiliza-lo, basta acionar as seguintes importações no HTML do formulário:


    <script src="../vcXMLRPC.js"></script>
    <script src="http://URL_DO_SERVIDOR/portal/resources/js/jquery/jquery.js"></script>


    O acesso aos Datasets é igual à Web, a seguir são apresentados alguns exemplos:


    1) Datasets internos fluig: este tipo de Dataset permite navegar em dados das entidades do próprio fluig, como usuários, grupos, processos ou tarefas por exemplo. Esses datasets são pré-definidos, por isso não podem ser alterados pelo usuário. A lista com os datasets disponíveis pode ser consultada aqui.


    var filter = new Object();
    filter["colleaguePK.colleagueId"] = "john"; 
    var colleagues = DatasetFactory.getDatasetValues("colleague", filter);
    if(colleagues.length > 0){       
    	document.getElementById("colleagueName").value = colleagues[0].colleagueName;
    	document.getElementById("login").value = colleagues[0].login;
    }else{
    	alert("Nenhum Usuário Encontrado");
    }

    AtençãoPara atualizações anteriores ao fluig 1.5.6, substituir a linha 3 por:

    var colleagues = getDatasetValues("colleague", filter);



    2) Datasets internos formulário: este tipo de Dataset permite navegar nos dados existentes em formulários de uma determinada definição de formulário publicada no fluig. Para que uma definição de formulário seja disponibilizada como Dataset, é necessário preencher o campo Nome Dataset na publicação da definição de formulário. O valor informado será utilizado para a busca do Dataset no fluig;


    var c1 = DatasetFactory.createConstraint("cod_area", "2", "2", ConstraintType.MUST); 
    var constraints = new Array(c1);
    			
    var area = DatasetFactory.getDataset("areas", null, constraints, null);
    			
    if(area.values.length){
    	document.getElementById("cod_area").value = area.values[0].cod_area;
    	document.getElementById("area").value = area.values[0].area;
    }else{
    	alert("Area não encontrada") ;
    }

    Para fazer o download de um exemplo de formulário utilizando xmlPRC clique aqui.




    3) Chamadas assíncronas: A partir do fluig 1.5.6, você também pode realizar chamadas assíncronas:

    var filter = new Object();
    filter["colleaguePK.colleagueId"] = "john"; 
    var colleagues = DatasetFactory.getDatasetValues("colleague", filter,
    { success: function(colleagues) {
    	if(colleagues.length > 0){       
    		document.getElementById("colleagueName").value = colleagues[0].colleagueName;
    		document.getElementById("login").value = colleagues[0].login;
    	}else{
    		alert("Nenhum Usuário Encontrado");
    	}
    }, error: function(jqXHR, textStatus, errorThrown) {}
    });
    
    DatasetFactory.getDataset("areas", null, constraints, null, { 
    	success: function(area) {
    		if(area.values.length){
    			document.getElementById("cod_area").value = area.values[0].cod_area;
    			document.getElementById("area").value = area.values[0].area;
    		}else{
    			alert("Area não encontrada") ;
    		}
    	}
    }, error: function(jqXHR, textStatus, errorThrown) {}
    );


    Geolocalização em formulário

    Para utilizar a Geolocalização em formulários é bem simples, basta incluir esse script no html:


    Importante!

    Saiba que a geolocalização só funciona em ambientes https. Nos ambientes http o navegador não permite informar a geolocalização.



    function getLocation()
        {
            if (navigator.geolocation)
            {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
    		
            }
        }
    
        function showPosition(position)
        {
            var latlon=position.coords.latitude+","+position.coords.longitude;
    
    
            var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
            +latlon+"&zoom=14&size=300x200&sensor=false";
            document.getElementById("map").innerHTML="<img src='"+img_url+"'>";
    		
    		var lat = position.coords.latitude;
    		var longi = position.coords.longitude;
    		document.getElementById("latitude").value = lat;
    		document.getElementById("longitude").value = longi;
        }
    
        function showError(error)
        {
            switch(error.code) 
            {
            case error.PERMISSION_DENIED:
              doc.innerHTML="Pedido de Geolocalização negado pelo usuário."
              break;
            case error.POSITION_UNAVAILABLE:
              doc.innerHTML="Informações de localização não está disponível."
              break;
            case error.TIMEOUT:
              doc.innerHTML="Solicitação de locatização não retornou em tempo hábil (timeout)."
              break;
            case error.UNKNOWN_ERROR:
              doc.innerHTML="Erro desconhecido."
              break;
            }
        }



    Para baixar um exemplo de formulário com geolocalização clique aqui


    Veja o exemplo (form-mobile-waze) em nosso repositório aqui.

    Importante

    Esta técnica só funciona em ambiente HTTPS a partir do Android 6.0 e iOS 10.


    Formulário único

    A partir da atualização 1.5 do fluig os formulários da web e do mobile devem ser criados de forma única. Sendo assim, o formulário deve atender tanto o mobile quanto a web.

    Para criar formulários com este novo padrão verifique o fluig Style Guide.

    Anexos de formulário

    1. Download de anexos: este procedimento será automático, porém apenas os anexos do formulário são baixados.  
    2. Download de anexos em processos offline: durante o download dos processos offline os anexos do formulário são baixados e estarão disponíveis para utilização de maneira offline.


    Importante

    Para o funcionamento de anexos do formulário, o caminho dos arquivos devem ser relativos e não podem ser externos.

    Importante

    No sistema operacional Android não é recomendado carregar anexos do formulário via requisições como XMLHttpRequest. O carregamento do conteúdo de arquivos via caminhos relativos já é suficiente.

    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. 


    Versões mínimas dos browsers suportados

    Cada uma das plataformas utiliza um browser diferente para a renderização dos formulários. Esta informação deve ser considerada durante o desenvolvimento para evitar problemas de compatibilidade com os arquivos JavaScript/CSS. Acesse a Matriz de Portabilidade e veja a versão mínima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento.