jedinflow-designerintegraçãosap-cpivisualcanvas

JedIN Flow Designer — Desenvolvimento Visual de Integrações com Paridade SAP CPI

JedIN Team2026-04-0811 min de leitura

Desenvolvimento Visual de Integrações Sem Compromissos

Historicamente, a integração empresarial forçava equipes a escolher: usar uma ferramenta poderosa mas rígida como o SAP CPI, ou adotar uma plataforma moderna de low-code porém limitada. O Flow Designer do JedIN elimina esse dilema. Ele oferece um canvas totalmente visual para construir fluxos de integração mantendo paridade completa com o SAP Cloud Platform Integration — os mesmos tipos de nós, a mesma profundidade de configuração, o mesmo modelo de deploy.

Este guia percorre cada elemento do Flow Designer usando um fluxo real de produção: S4HANA OnPrem BusinessPartnerReplication yMKT. Ao final, você saberá como abrir um fluxo, navegar pela paleta de nós, configurar propriedades e fazer o deploy da sua integração.

Flow Designer Canvas


Pré-requisitos

Antes de seguir este guia, certifique-se de ter:

  • Uma conta JedIN com acesso ao workspace Design (tier Starter ou superior)
  • Pelo menos um pacote de integração no seu workspace (você pode criar um ou importar do SAP CPI)
  • Um navegador moderno — Chrome, Edge ou Firefox (versão mais recente recomendada)
  • Familiaridade com conceitos de integração como roteamento de mensagens, modificação de conteúdo e mapeamento (útil, mas não obrigatório)

Passo 1: Navegar até o Workspace Design

  1. Faça login no JedIN em https://[seu-domínio]/login.
  2. Na barra lateral esquerda, clique em Design. Isso abre o catálogo de pacotes mostrando todos os pacotes de integração do seu tenant.
  3. Você verá uma lista de pacotes com colunas para Nome, Fornecedor, Status e Versão. A barra de ferramentas no topo oferece as opções Create, Import, Import iFlow e Search.

Resultado Esperado: O workspace Design carrega com sua lista de pacotes. Cada pacote mostra seu status (Active/Draft) e modo de edição (Editable/Read-Only).


Passo 2: Abrir um Pacote e Selecionar um Artefato

  1. Localize o pacote desejado na lista. Para este guia, usamos Business Partner Replication New. Ele mostra: 2 artefatos, fornecedor SAP CPI Import, status Active, modo Editable.
  2. Clique no nome do pacote para abrir a visão de detalhes.

Package Detail Overview

  1. A visão de detalhes do pacote tem duas abas: Overview e Artifacts. Clique em Artifacts para ver o conteúdo de integração dentro deste pacote.

Package Artifacts Tab

  1. Você verá o artefato listado: S4HANA OnPrem BusinessPartnerReplication yMKT, tipo iflow, versão 1.0.0, status Started.
  2. Clique no nome do artefato para abri-lo no canvas do Flow Designer.

Resultado Esperado: O Flow Designer abre com o canvas visual completo mostrando todos os nós e conexões do fluxo de integração.


Passo 3: Entender o Layout do Canvas

O canvas do Flow Designer é construído com ReactFlow e apresenta sua integração como um grafo direcionado. Veja o que você encontra:

Área Principal do Canvas (Centro)

O canvas exibe o fluxo de integração como nós conectados dentro de contêineres swimlane:

  • Integration Process — o swimlane principal contendo a lógica do caminho feliz. Dentro dele você encontra nós como Start Event, Content Modifier, Filter, Groovy Script, Message Mapping e End Event.
  • Exception SubProcess — um swimlane separado abaixo do processo principal que trata cenários de erro. Ele contém seus próprios eventos de Start e End junto com a lógica de tratamento de erros.

Os nós são conectados por arestas direcionais (setas) mostrando o caminho do fluxo de mensagens da esquerda para a direita.

Barra de Ferramentas (Topo do Canvas)

A barra de ferramentas oferece quatro botões de ação principais:

BotãoAção
EditAlterna o fluxo para o modo de edição, habilitando drag-and-drop e alterações de propriedades
ConfigureAbre o painel de configuração a nível de fluxo para ajustes de runtime
DeployFaz o deploy do fluxo para o motor de runtime (Camel K)
DeleteRemove o artefato do pacote

Controles de Zoom (Canto Inferior Direito)

  • Botões + e - para zoom incremental
  • Botão Fit para ajustar automaticamente o fluxo inteiro no viewport
  • Toggle do Minimap mostrando uma visão panorâmica do canvas
  • Nível de zoom atual exibido como porcentagem (ex.: 50%)

Resultado Esperado: Você pode ver o fluxo completo com todos os nós visíveis, ampliar e reduzir, e navegar pelo canvas clicando e arrastando o fundo.


Passo 4: Explorar a Paleta de Nós

  1. No lado esquerdo do canvas, localize a Node Palette. Ela é organizada em 12 categorias, cada uma expansível:
CategoriaExemplos de Nós
ParticipantsSender, Receiver
EventsStart Event, End Event, Timer Start, Error Start
ProcessIntegration Process, Exception SubProcess, Local Integration Process
CallProcess Call, Send, Request-Reply
Message RoutingRouter, Multicast, Splitter, Aggregator, Join, Gather
Message TransformersContent Modifier, Message Mapping, XSLT Mapping, Script (Groovy/JS), Converter, Encoder, Decoder, Filter
PersistenceData Store Write, Data Store Get, Data Store Delete, Persist Message
SecurityEncryptor, Decryptor, Signer, Verifier, PGP Encryptor, PGP Decryptor
EncoderBase64 Encoder, MIME Multipart Encoder, ZIP Compression
ValidatorXML Validator, JSON Validator, Schema Validator
SAP AdaptersIDoc Sender/Receiver, RFC, SOAP, OData V2/V4, SuccessFactors, Ariba, AMQP
ConnectorsHTTP, HTTPS, FTP, SFTP, SMTP, JDBC, Kafka, JMS, AS2, AS4
  1. Para adicionar um nó, clique em uma categoria para expandi-la, depois arraste o tipo de nó desejado para o canvas dentro de um swimlane Integration Process ou Exception SubProcess.
  2. O nó aparece no local de destino. Conecte-o a outros nós arrastando do handle de saída do nó de origem para o handle de entrada do nó de destino.

Resultado Esperado: Um novo nó aparece no canvas, pronto para configuração. Uma aresta o conecta ao restante do fluxo.


Passo 5: Configurar Propriedades dos Nós

  1. Clique em qualquer nó no canvas para selecioná-lo. O Properties Panel aparece no lado direito da tela.
  2. O Properties Panel tem 8 abas, cada uma controlando um aspecto diferente do nó:

Aba 1: General

Contém a identidade básica do nó — Name, Description e Type. Para um nó Content Modifier, é aqui que você define o nome de exibição que aparece no canvas.

Aba 2: Runtime Configuration

A aba principal de configuração. Dependendo do tipo de nó:

  • Content Modifier: Define valores de header, expressões de body e atribuições de propriedades
  • Groovy Script: Anexa ou escreve o script Groovy que processa a mensagem
  • Message Mapping: Define mapeamentos campo-a-campo de origem para destino
  • Filter: Configura a expressão XPath ou condição
  • Nós de Adapter: Define URL do endpoint, autenticação, headers e configurações específicas do protocolo

Aba 3: Error Configuration

Define o que acontece quando este nó falha:

  • Retry count — número de tentativas automáticas (0 = sem retry)
  • Retry interval — tempo entre tentativas em segundos
  • Error handling strategy — lançar exceção, registrar e continuar, ou rotear para o Exception SubProcess

Aba 4: References

Lista todos os recursos referenciados por este nó — scripts, mapeamentos, schemas, arquivos WSDL e value mappings. Clique em qualquer referência para navegar diretamente até sua origem.

Aba 5: Externalized Parameters

Parâmetros que podem ser alterados no momento do deploy sem modificar o design do fluxo. Útil para valores específicos de ambiente como URLs de endpoint, aliases de credenciais e nomes de filas.

Aba 6: Problems

Exibe avisos e erros de validação detectados neste nó. Problemas comuns incluem campos obrigatórios ausentes, expressões inválidas e referências não resolvidas. Corrija todos os problemas antes do deploy.

Aba 7: Deployment Status

Mostra se o fluxo pai deste nó está atualmente com deploy feito, o timestamp do deploy, o status de runtime (Started, Stopped, Error) e o nome da integração Camel K.

Aba 8: Design Guidelines

Fornece recomendações de boas práticas para o tipo de nó selecionado. Por exemplo, um nó Groovy Script pode sugerir usar message.getBody(String) em vez de acesso direto ao body para segurança de tipos.

  1. Após configurar todos os campos obrigatórios, clique fora do Properties Panel ou selecione outro nó para salvar as alterações.

Resultado Esperado: A configuração do nó é salva. Se houver problemas de validação, eles aparecem na aba Problems com descrições acionáveis.


Passo 6: Configurar Definições a Nível de Fluxo

  1. Clique no botão Configure na barra de ferramentas superior (não em um nó específico).
  2. O painel de configuração a nível de fluxo abre com configurações que se aplicam a toda a integração:
    • Allowed Header(s) — headers HTTP que passam pela integração
    • Maximum Retry Count — configuração global de retry
    • Timeout (ms) — tempo máximo de execução antes do fluxo ser encerrado
    • Log Level — TRACE, DEBUG, INFO, WARN, ERROR
  3. Ajuste as configurações conforme necessário e confirme.

Resultado Esperado: As configurações a nível de fluxo são salvas. Essas configurações sobrescrevem os padrões individuais dos nós quando aplicável.


Passo 7: Fazer o Deploy do Fluxo

  1. Verifique se a aba Problems mostra zero erros em todos os nós.
  2. Clique no botão Deploy na barra de ferramentas.
  3. O JedIN compila o fluxo visual em um recurso Integration do Camel K e o envia para o runtime.
  4. A aba Deployment Status atualiza em tempo real: Building -> Running -> Started.
  5. Quando o status mostrar Started, o fluxo está ativo e processando mensagens.

Resultado Esperado: O status do artefato muda para Started e o fluxo começa a aceitar mensagens de acordo com sua configuração de trigger (timer, webhook, API endpoint ou polling baseado em adapter).


Solução de Problemas

O canvas está em branco após abrir um artefato

  • Verifique se o tipo do artefato é iflow (outros tipos como value mapping não são renderizados no canvas).
  • Tente clicar no botão Fit nos controles de zoom para recentralizar a visão.
  • Se o fluxo foi importado do SAP CPI, verifique se a importação foi concluída com sucesso na visão geral do pacote.

Nós não podem ser arrastados para o canvas

  • Certifique-se de estar no modo Edit clicando no botão Edit na barra de ferramentas.
  • Verifique se sua função de usuário tem permissões de escrita neste pacote.
  • Os nós devem ser soltos dentro de um swimlane Integration Process ou Exception SubProcess — eles não podem ser colocados diretamente no fundo do canvas.

O botão Deploy está desabilitado

  • Verifique a aba Problems para erros não resolvidos. Todos os erros devem ser corrigidos antes do deploy.
  • Confirme que seu tier suporta deploy (o tier Free tem limite de 3 fluxos).
  • Certifique-se de que o status do pacote é Active e o artefato está no modo Editable.

O Properties Panel não aparece ao clicar em um nó

  • Clique diretamente no corpo do nó, não nos handles de conexão das arestas.
  • Se o painel foi fechado anteriormente, tente dar duplo clique no nó.
  • Verifique o nível de zoom do seu navegador — em níveis de zoom muito baixos, os alvos de clique podem ficar deslocados.

O fluxo faz deploy mas o status mostra Error

  • Abra a seção Monitor na barra lateral para visualizar os logs de runtime.
  • Verifique se há credenciais ausentes nos parâmetros externalizados — detalhes de conexão como nomes de usuário e chaves de API devem ser definidos no momento do deploy.
  • Confirme que scripts e mapeamentos referenciados são sintaticamente válidos.

Resumo

O Flow Designer do JedIN traz o design de integração de nível SAP CPI para um canvas visual moderno. Com 12 categorias na paleta de nós cobrindo desde roteamento básico de mensagens até adapters específicos SAP, e um painel de propriedades com 8 abas proporcionando configuração profunda sem sair do editor visual, equipes podem construir integrações empresariais na velocidade de uma ferramenta low-code sem sacrificar o poder que processos de negócio complexos exigem.

O fluxo S4HANA OnPrem BusinessPartnerReplication yMKT demonstra isso na prática — uma integração SAP real com Content Modifiers, Groovy Scripts, Message Mappings e tratamento de exceções, tudo visível e configurável em um único canvas. Sem edição de XML. Sem deploys por linha de comando. Apenas desenvolvimento visual com paridade total com SAP CPI.

Related Articles

r2cxmulti-producthub

R2-CX Hub Multi-Produto -- 14 Sistemas Alvo, 3 em Produção, 9 em Beta

O R2-CX evoluiu de um assistente para um único sistema SAP C4C para um hub autônomo de consultoria multi-produto, suportando 14 sistemas alvo com 259 ferramentas combinadas. Três sistemas estão prontos para produção, dois estão prontos para API e nove estão em beta -- todos acessíveis a partir de uma interface hub unificada com busca, filtragem e acesso direto ao workspace.

2026-04-088 min de leituraVideo
Ler mais
jedinvalidationvisual

Validação Visual da Plataforma JedIN -- 24 de 25 Verificações Aprovadas em Todas as Páginas

Uma validação visual sistemática da plataforma JedIN cobrindo 15 áreas e 25 verificações encontrou 24 aprovadas e 1 falha. A única falha foi um problema de CSS no seletor do Flow Designer -- não um bug de produto. Todas as outras páginas, desde o hero da landing page até as sessões do R2-CX e variantes dark mode, renderizaram corretamente com dados, navegação e layout adequados.

2026-04-089 min de leituraScreenshots
Ler mais
Fale conosco pelo WhatsApp