...
Deck of Cards |
---|
effectDuration | 0.5 |
---|
history | false |
---|
id | install-windows |
---|
effectType | fade |
---|
|
Card |
---|
default | true |
---|
id | 1 |
---|
label | Fluig Studio |
---|
title | Selecione a linguagem |
---|
| 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. |
Card |
---|
id | 2 |
---|
label | Formulário Mobile mobile em Processosprocessos |
---|
title | Termo de uso |
---|
| 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:os passos abaixo:
01. Crie ou edite Passo 1: Criar ou editar um processo existente e acionar o item Formulário.; Image Removed
Image Added
02. Selecione Passo 2: Selecionar a pasta destino onde esse o formulário será publicadapublicado, também atribua um título e descrição. Após isso, clique em Criar Formulário. Image Removed
em Criar Formulário;
Image Added
03. 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?.
Image Removed Image Added
Informações |
---|
| Nem todos os campos mapeados no formulário do processo , podem ser mapeados para o formulário para em dispositivos móveism´oveis. Os campos que podem ser mapeados exibem a opção "Formulário Mobilemobile?". |
|
Card |
---|
id | 3 |
---|
label | Upload via Navegação navegação de Documentosdocumentos |
---|
title | Instalação do fluig |
---|
| Upload via Navegação navegação de Documentosdocumentos 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 Mobilemobile.
Image Removed Image Added
|
Nota |
---|
| As Definições definições de Formulários 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. |
|
Nota |
---|
|
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. |
...
Para realizar o carregamento dos dados do dataset em modo offline no formulário do processo, é necessário relacionar o dataset o qual o ao campo zoom faz uso durante o modo offline. Acompanhe a seguir, o procedimento para configuração do carregamento:
Deck of Cards |
---|
|
Card |
---|
label | Localizar o formulário |
---|
| Localizar o formulário Dentro do ECM, localizar localize o formulário que está sendo utilizado no processo e em seguida acionar acione Propriedades. Image Removed Image Added |
Card |
---|
label | Datasets do Formulário |
---|
| Datasets do Formulárioformulário Após acionar as propriedades do formulário, navegue até a aba “Datasets do Formulário” e e relacione o dataset o ao qual está sendo utilizado no campo zoom. Image Removed Image Added |
|
Nota |
---|
|
Após definir as configurações, é necessário efetuar a limpeza de cache do no aplicativo e realizar uma nova consulta. |
Dica |
---|
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 workflow e realizar o preenchimento das informações de formulários com maior mobilidade e agilidade.
A partir do TOTVS Fluig Plataforma 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.
![](/download/attachments/146181573/print_paixfilhonovo_framed.png?version=2&modificationDate=1499366937000&api=v2)
Comece a usar hoje mesmo lendo
Nota |
---|
|
- 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.
|
Nota |
---|
title | Atenção - Trabalhando com tabelas |
---|
|
|
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:
Nota |
---|
|
Não recomendamos o é recomendada a troca do nome da função para o método showCamera no IOS pois isso fará iOS. Isso faz com que o método não funcione conforme o esperado. |
Bloco de código |
---|
|
<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.
Nota |
---|
|
No My 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. |
Informações |
---|
title | A partir da atualização 1.5.5 |
---|
|
Ao implementar o O método JSinterface.showCamera, esta técnica também é aplicada aplicado na plataforma web. Acessando a plataforma Fluig 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 Anexos será possível realizar o upload de apenas um arquivo por vez; Painel |
---|
borderColor | #f2f2f2 |
---|
bgColor | #f2f2f2 |
---|
| Tentar selecionar mais que um causará erro. |
Image Removed Image Added
|
Desabilite o evento Pull to refresh do componente nativo
...
Bloco de código |
---|
|
<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 Mobileformulá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:
Bloco de código |
---|
|
function displayFields(form, customHTML) {
if ( form.getMobile() != null && form.getMobile()) {
form.setValue('mtr_usuario', new java.lang.Integer(123456));
}
} |
Eventos do Processo
- beforeMovementOptions
- beforeSendValidate
Nota |
---|
|
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 |
...
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:
Bloco de código |
---|
|
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:
Bloco de código |
---|
|
<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 plataforma, 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.
Bloco de código |
---|
language | js |
---|
linenumbers | true |
---|
|
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ção: Para atualizações anteriores ao TOTVS Fluig Plataforma 1.5.6, substituir a linha 3 por:
Bloco de código |
---|
|
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;
Bloco de código |
---|
|
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") ;
} |
Informações |
---|
Para fazer o download de um exemplo de formulário utilizando xmlPRC clique aqui. |
3) Chamadas assíncronas: A partir do TOTVS Fluig Plataforma 1.5.6, você também pode realizar chamadas assíncronas:
Bloco de código |
---|
|
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) {}
});
|
Bloco de código |
---|
|
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) {}
); |
Deck of Cards |
---|
|
Nota |
---|
| - A geolocalização só funciona em ambientes https. Em ambientes http o navegador não permite informar a geolocalização.
- Essa técnica pode ser aplicada em Android quanto em iOS.
|
Card |
---|
id | 1 |
---|
label | Geolocalização em formulários |
---|
|
Para utilizar a Geolocalização em formulários é bem simples, basta incluir esse script no html: Bloco de código |
---|
| 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;
}
} |
|
Card |
---|
id | 2 |
---|
label | Geolocalização em páginas |
---|
|
Para utilizar a Geolocalização em páginas, processos e na home é bem simples, basta incluir esse script no html: Bloco de código |
---|
| 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;
}
} |
|
|
- Para baixar um exemplo de formulário com geolocalização clique aqui.
...
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.
...