Índice


Objetivo

O objetivo deste guia é orientar o usuário a como utilizar o componente Leitura de código de barras em um formulário de workflow no Fluig mobile, bem como suas configurações e uso.

O componente possui suporte as codificações 128C / GS1-128 / UCC/EAN-128 e EAN-13. E pode ser implementado ao formulário através do Fluig Studio.


Criando um formulário

 01. O primeiro passo será criar um formulário via fluig Studio, para isso basta seguir atentamente os passos das documentações Fluig Studio e Desenvolvimento de formulários.

Pode ser interessante fazer a leitura das documentações Configuração para uso inicial

do Fluig Studio e Guia de atualização Fluig Studio para garantir seu correto funcionamento e garantir uma boa experiência.

02. Implementar o componente Leitura de código de barras no desenvolvimento do formulário.


Funcionamento do componente

O componente de leitura do código de barras se baseia em 2 métodos que devem ser incluídos dentro de uma tag <script> no formulário a ser usado.

function  showBarcodeReader() {
JSInterface.showBarcodeReader();
  	}


function barCodeCallback(code) {
// Lógica para utilização do código recebido
    	}


Confira na prática

  • Assim que a câmera lê o código de barras o valor correspondente ao código é enviado ao input do campo do formulário em questão.

Exemplo de uso

<div class="form-input">
   <div class="form-group">
      <label>Produto</label>
      <input type="text" class="form-control" name="textbox1" value="" placeholder="Toque aqui para ler o código de barra" data-size="big" onclick="readProduto(this)">
   </div>
</div>

<script type="text/javascript">	
   var campo = "";
   
   function readProduct( mobj ) {
   campo = mobj;
   showBarcodeReader();
   } 
   
   
   function showBarcodeReader() {
   JSInterface.showBarcodeReader();
   }
   
   
   function barCodeCallback(code) {
   // Lógica para utilização do código recebido
    campo.value = code;
   }
   
</script>