No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos. Devido a isso, ao salvar um formulário no Fluig, automaticamente 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 mobile. Estas serão tratadas no decorrer deste guia.
|
<input type="text" id="idCampo" name="campoTxt"> |
Tipos: Definições de formulário mobile suporta os tipos abaixo:
(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 aqui, aqui e aqui. Como medida de correção, a sugestão é utilizar o componente de Zoom: Desenvolvimento de Formulários - Zoom. |
Não está homologada a implementação de evento que utilizem Gestures (swipe, longpress, tap, entre outros) em formulário no Fluig Mobile. |
Porque devo usar formulários no mobile?
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:
|
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
|
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:
Formulários de processos que possuem versões em rascunho não são carregados quando o usuário está offline (sem conexão com a internet). Somente informações do rascunho do processo são apresentadas. |
|
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 ao campo zoom faz uso durante o modo offline. Acompanhe a seguir, o procedimento para configuração do carregamento:
|
Após definir as configurações, é necessário efetuar a limpeza de cache no aplicativo e realizar uma nova consulta. |
Acesse nossa documentação e saiba mais sobre como Habilitar dataset offline no 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.
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.
Leia mais detalhes na nossa documentação: Desenvolvimento de Formulários - Zoom e Desenvolvimento de Formulários - Pai x Filho. |
|
|
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:
Não é recomendada a troca do nome da função para o método showCamera no iOS. Isso faz com que o método não funcione conforme o esperado. |
<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.
No My Fluig somente imagens podem ser adicionadas como anexo. É possível escolher uma imagem da galeria ou ainda tirar uma foto usando a câmera. |
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.
|
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> |
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:
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
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:
function beforeStateEntry(sequenceId){
var isMobile = getValue("WKMobile");
if (isMobile!=null && isMobile==true){
throw "Esse processo não pode ser executado pelo mobile.";
}
} |
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:
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.
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");
} |
Para atualizações anteriores ao TOTVS Fluig Plataforma 1.5.6, substituir a linha 3 por:
|
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. |
Chamadas assíncronas
A partir do TOTVS Fluig Plataforma 1.5.6, é possível 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) {}
); |
|
Veja o exemplo (form-mobile-waze) em nosso repositório aqui. |
| Esta técnica funciona apenas em ambiente HTTPS a partir do Android 6.0 e iOS 10. |
É 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.
|
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.
Para criar formulários com este novo padrão verifique o Fluig Style Guide.
|
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.
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.
No arquivo html do formulário, é necessário fazer a referência ao arquivo javascript como no exemplo abaixo:
<script type="text/javascript">
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.src = `testeMobile.js?${Date.now()}`;
script.type = 'text/javascript';
head.appendChild(script);
</script> |
O código acima faz com que ao importar o formulário mantendo sua versão, será gerada uma data na referência do arquivo, invalidando o cache do aplicativo My Fluig
