BPM

API Formulários WEB

854 views 25/01/2018 14/09/2020 marcio-poffo 3

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, o desenvolvedor deve 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.

Passos para 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
});

Basicamente a integração com o BPM ocorre com essas 3 funções.
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. Exemplo um erro no processamento do método save.

O BPM envia por parâmetro para as funções, informações referente ao processo e plataforma:
data: Informações da processo, por 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.

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
  })*/
}

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 ..;
  */
}

Exemplo

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

Este artigo foi útil para você?