Histórico da Página

...

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 x Filho e Zoom para dispositivos móveis

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

Image RemovedImage Removed

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:

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

...

O método JSinterface.showCamera, também é aplicado na plataforma web. Acessando o Fluig Plataforma pelo navegador, ao clicar em um botão utilizando o recurso você será direcionado para a aba Anexos e uma janela será exibida para a seleção dos arquivos.

Acessando a aba de Anexos será possível realizar o upload de apenas um arquivo por vez.

Image Removed

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 se 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:

• 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

...

...

Funções mobile

...

getAttachments

É uma função que retorna uma Promise com a lista dos anexos do formulário.  Funciona de forma offline.

No exemplo abaixo foi utilizado um await para aguardar a lista dos arquivos que pode ser vazia, caso não haja anexos.

var listaArquivos = await JSInterface.getAttachments();

O objeto retorna sempre um json que é uma lista de arquivos. Cada arquivo pode ou não ter os dados, conforme abaixo:

 [{
    "documentId": 4917,
    "version": 1000,
    "createDate": 1713872206178,
    "newAttach": false,
    "size": 1.2485828,
    "fileName": "file.pdf",
    "description": "file.pdf",
    "streamControlUrl": "" //Pode ser http ou caminho do arquivo /folder/file.pdf
  }]

Exemplo de chamada no JS de forma async:

async function getFiles() {  
    var listFiles = await JSInterface.getAttachments();
    
} 

beforeValidateAttachments

...

Este evento acontece ao clicar em "enviar" no navegador antes de abrir a tela de movimentação. Por isso, esse código deve ser implementado em um arquivo javascript vinculado ao formulário html. Ele recebe um parâmetro que é a lista de todos os anexos que estão vinculados no formulário e é muito útil para algumas validações antes mesmo de ser enviado para o servidor. 

var beforeValidateAttachments = function (listFiles) {
	if (listFiles.length == 0) {
		throw 'Necessário incluir um anexo.';
	}

}

• Os dados sempre serão uma lista de arquivos com os valores:

 [{
    "documentId": 0, //0 caso for novo anexo
    "version": 0, //0 caso for novo anexo
    "createDate": null,
    "newAttach": true, //true para novo anexo
    "size": 1.2485828, // tamanho do arquivo em MB
    "fileName": "file.pdf",
    "description": "file.pdf",
    "streamControlUrl": "" //Pode ser http ou caminho do arquivo /folder/file.pdf
  }]

Pai x Filho e Zoom para dispositivos móveis

...

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

Image AddedImage Added

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:

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

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 se 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:

• 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
  
  

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>

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");
}

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

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") ;
}

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) {}
);

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>

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");
}

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

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") ;
}

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) {}
);

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ção de localização não está disponível."
          break;
        case error.TIMEOUT:
          doc.innerHTML="Solicitação de localização não retornou em tempo hábil (timeout)."
          break;
        case error.UNKNOWN_ERROR:
          doc.innerHTML="Erro desconhecido."
          break;
        }
    }

function getLocation()
    {
        if (navigator.geolocation)
        {
         
        navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 10000 });            
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ção de localização não está disponível."
          break;
        case error.TIMEOUT:
          doc.innerHTML="Solicitação de localização não retornou em tempo hábil (timeout)."
          break;
        case error.UNKNOWN_ERROR:
          doc.innerHTML="Erro desconhecido."
          break;
        }
    }

          doc.innerHTML="Solicitação de localização não retornou em tempo hábil (timeout)."
          break;
        case error.UNKNOWN_ERROR:
          doc.innerHTML="Erro desconhecido."
          break;
        }
    }

function getLocation()
    {
        if (navigator.geolocation)
        {         
        navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 10000 });            
}
    }

    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ção de localização não está disponível."
          break;
        case error.TIMEOUT:
          doc.innerHTML="Solicitação de localização não retornou em tempo hábil (timeout)."
          break;
        case error.UNKNOWN_ERROR:
          doc.innerHTML="Erro desconhecido."
          break;
        }
    }

Explorando o input file no mobile

...

É possível manipular arquivos diretamente do formulário mobile através do input file, onde no aplicativo mobile é possível acessar arquivos do dispositivo ou incluir uma imagem diretamente da câmera. Importante observar que ao escolher um ou mais arquivos através desse componente, esses arquivos

não serão anexados à solicitação em questão, uma vez que essa funcionalidade é exclusiva do recurso showCamera descrito nessa documentação.

<input type="file" id="btUpload" name="btUpload" title="Arquivos" accept="image/*" class="btn btn-primary" multiple>

Um ponto para observar é que, ao realizar o upload direto da câmera, não é possível adicionar várias fotos simultaneamente, mesmo quando o parâmetro 'multiple' é especificado, sendo este um comportamento do próprio sistema operacional. O cenário de múltiplo upload pode ser realizado acessando os

arquivos já existentes do dispositivo.

Formulário único

...

A partir da atualização 1.5 do Fluig Plataforma 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.

...

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. 

...