Formulários WEB
Sumário
1. Conceito
Através desta funcionalidade, é possível realizar um formulário Web, abaixo serão descritos os passos para que esse processo funcione com sucesso.
2. Menu de Acesso
O formulário é construído fora do BPM, utilizando ferramentas de mercado e pode ser hospedado onde for necessário. A construção do formulário que irá determinar o comportamento da tela em cada etapa. A plataforma fornece uma API para se comunicar com o formulário construído externamente, que deve ser importada no formulários. É um javascript que, incluído na página, permite conectar a página com o BPM.
Nas propriedades do processo, indique o Tipo formulários WEB e em cada atividade coloque o link do formulário. O link do formulário pode ser sempre o mesmo ou pode ter um link diferente conforme a etapa.
O botão de Enviar é padrão da plataforma, ou seja, na construção da interface não é necessário alterá-lo, basta implementar a função Save da API.
3. Configurações
3.1 API dos Formulários WEB
O cockpit do Workflow é capaz de apresentar dentro de um iframe formulários ECM e interfaces customizadas hospedadas em outros domínios. A comunicação entre as duas partes é realizada por Window.postMessage() e abstraída por este componente, que deve ser incluído na página e configurado pelo desenvolvedor.
Para o correto funcionamento da interface customizada dentro do cockpit, deve-se definir como a página salva os dados do processo e como reage a erros ocorridos na criação do processo e tratamento da pendência.
3.2 Integração
Adicionar na página um componente que auxilia o cockpit a exibir o iframe no tamanho correto e o componente Javascript do Workflow:
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.contentWindow.min.js"></script><script type="text/javascript" src="https://cdn.senior.com.br/platform/1.7.1/js/workflow-cockpit.min.js"></script>
Utilizando a tarefa com modo de abertura Abrir Formulário no Cockpit do Workflow, é preciso definir as funções que tratarão cada evento originado pelo cockpit. Exemplo:
this.workflowCockpit = workflowCockpit({
init: _loadData,
onSubmit: _saveData,
onError: _rollback
});
Essa API tem 3 funções principais de comunicação com o workflow. São elas:
- init: essa função é executada sempre que a página é carregada. Ela fornece dados para o formulário, como usuário logado por exemplo ou os dados do processo e variável do processo caso for um processo já em andamento;
- onSubmit: o formulário deve implementar essa função para gravar os dados no BPM, para isso eles devem ser retornados na função. Importante que existam no BPM as variáveis do processo cadastradas para cada dado que se deseja gravar;
- onError: função que é executada se em qualquer momento do processamento do formulário ocorrer algum erro para comunicar ao usuário.
O BPM envia por parâmetro para as funções, informações referente ao processo e plataforma:
- data: informações da processo. Exemplo: ID do processo e ação selecionado pelo usuário;
- info: informações do diversas através das funções getUserData(), getPlatformData(), isRequestNew() e getInfoFromProcessVariables().
Em cada método as informações disponíveis nos parâmetros podem variar.
3.2.1 Handlers de Eventos
init(data, info) {
/*data: ({
processInstanceId: int? (ocasional)
})*/
/*info: ({
isRequestNew: function
getUserData: function
getPlatformData: function
getInfoFromProcessVariables: function
})*/
}
onSubmit(data, info) {
/*data: ({
processInstanceId: int
})*/
/*info: ({
isRequestNew: function
getUserData: function
getPlatformData: function
getInfoFromProcessVariables: function
})*/
}
onError(data, info) {
/*data: ({
error: obj
processInstanceId: int
})*/
}
3.2.2 Estrutura da Instância Retornada
isRequestNew(): indica se a tela foi aberta porque o usuário está criando uma solicitação. Se for false, indica que o usuário está respondendo a uma solicitação.
getUserData(): obtém um objeto contendo informações sobre o usuário logado no Workflow. É retornada uma promise.
info.getUserData().then(function(data) {
/* data: ({
description: ...,
email: ...,
fullname: ...,
id: ...,
locale: ...,
subject: ...,
tenantName: ...,
username: ...
})*/
});
getPlatformData(): obtém um objeto contendo dados para acessar recursos da plataforma G7. É retornada uma promise.
info.getPlatformData().then(function(data) {
/* data: ({
serviceUrl: ...,
odataUrl: ...,
token: {
token_type: ...,
access_token: ...
})*/
});
getInfoFromProcessVariables: obtém um objeto contendo as variáveis do processo definidas. É retornada uma promise.
info.getInfoFromProcessVariables().then(function(data) {
/*
data: array ..;
*/
}
this.workflowCockpit = workflowCockpit({
init: _loadData,
onSubmit: _saveData,
onError: _rollback
});
/* Esta função é executada quando ocorre a criação do WorkflowCockpit, ou seja, não é executada por mensagem. Quando for uma nova requisição não existe um processInstanceId pelo simples fato do fluxo ainda não ter sido criado. */
function _load(data, info) {
info.getPlatformData().then(function(platformData) {
this.tokenG7 = platformData.token;
this.serviceUrl = platformData.serviceUrl;
this.odataUrl = platformData.odataUrl;
if (!info.isRequestNew()) {
this.fields = this.loadData(data.processInstanceId);
}
});
}
/* Esta função é executada no momento que o usuário finaliza sua interação com a tela e tenta prosseguir ou iniciar um processo pelo Cockpit. Neste momento, a tela pode realizar a persistência dos dados do formulário e retornar os valores que deseja adicionar às variáveis do fluxo. Pode ser retornada uma Promise ou o próprio objeto contendo os dados.
Toda exceção lançada por essa função não permitirá a continuação do processo por parte do Workflow. Exemplo: */
function _saveData(data, info) {
if (!isValid()) {
throw Error('Os dados informados são inválidos.');
}
return persistData(data.processInstanceId, info.isRequestNew()).then(function(result) {
return {
formData: this.data // objeto contendo os dados dos campos
};
});
}
/* Esta função é chamada quando o ocorre algum erro ao iniciar ou responder o fluxo. Após a execução do save, se ocorrer algum erro quando o Workflow tentar prosseguir com o processo, este é o momento onde pode ser realizado algum tipo de consistência com o erro ocorrido, por exemplo: */
function _rollback(data, info) {
console.log(data.error);
if (info.isRequestNew()) {
return removeData(data.processInstanceId);
}
return rollbackData(data.processInstanceId);
}
English
Español
