JedIN Flow Designer Quick Start: Opening and Navigating Your First Flow

From Login to Your First Flow in 10 Steps

The JedIN Flow Designer is the visual development environment where integration flows come to life. Built on ReactFlow, it provides a canvas where you drag, connect, and configure integration nodes — transforming what would be hundreds of lines of configuration into a visual diagram that anyone on the team can read.

JedIN ships with over 101 packages containing production-grade integration flows. Each package groups related artifacts (iflows, value mappings, scripts) into a logical unit. This guide walks you through the complete path from login to having a flow open on the canvas, with every panel and control explained.

Whether you are an integration architect evaluating the platform or a developer about to build your first flow, this guide gives you the spatial awareness to work confidently inside the designer.

---

Prerequisites

Before starting, confirm you have:

• A JedIN account (any tier) with access to the Integration product
• At least one package available in your tenant — JedIN comes pre-loaded with 101+ packages covering SAP, SFDC, and custom integrations
• A modern browser — Chrome or Edge recommended for best ReactFlow performance
• Screen resolution of 1280x720 or higher — the Flow Designer uses a multi-panel layout that benefits from wider screens

---

Step 1: Log In to JedIN

1. Open your browser and navigate to https://[your-domain]/login.
2. Enter your email address and password.
3. Click Sign In.

Expected Result: You land on the JedIN dashboard. The dashboard displays summary cards for recent activity, execution metrics, and quick-access links to your most-used features. The header shows your tenant name and avatar in the top-right corner.

---

Step 2: Select the Integration Product

1. Locate the product selector in the top-left corner of the header bar. It may currently show "R2-CX" or another product name.
2. Click the product selector to open the dropdown menu.
3. Select JedIN Integration from the list.

Expected Result: The sidebar updates to show the Integration navigation: Dashboard, Design, Monitoring, Marketplace, and Settings. The header branding reflects the Integration product context.

---

Step 3: Navigate to the Design Page

1. In the left sidebar, click Design.
2. The Design page loads, displaying a searchable list of all packages in your tenant.

Expected Result: You see a paginated list showing 101+ packages. Each package card displays the package name, description, number of artifacts, and last-modified date. A search bar at the top lets you filter packages by name. Packages are sorted alphabetically by default.

---

Step 4: Open a Package

1. Scan the package list or use the search bar to find a package. For this guide, search for "Business Partner Replication New".
2. Click the package name to open it.

Expected Result: The package detail page opens. You see the package header with the name, description, vendor, and version information. Below the header, a tabbed interface provides access to the package contents.

---

Step 5: View the Artifacts Tab

1. Click the Artifacts tab if it is not already selected.
2. The tab displays all artifacts contained in this package.

Expected Result: A table lists each artifact with the following columns:

Column	Description
Name	The artifact identifier (clickable)
Type	The artifact type — typically iflow for integration flows, but can also be valuemapping, scriptcollection, or messagemapping
Version	The artifact version (e.g., 1.0.0 or Active)
Status	Current deployment status — Draft, Published, or Deployed

You may see one or more artifacts depending on the package. Integration flows (iflow type) are the ones that open in the Flow Designer.

---

Step 6: Open the Flow Designer

1. Locate an artifact with type iflow in the artifacts table.
2. Click the artifact name to open it.

Expected Result: The Flow Designer loads in a new view. The canvas takes up the majority of the screen. You see a visual diagram of the integration flow containing nodes connected by edges. The layout includes:

• Canvas (center) — the main working area showing the flow diagram
• Node Palette (left or accessible via toolbar) — categorized list of available nodes
• Properties Panel (right or bottom) — configuration for the selected node or edge
• Toolbar (top) — action buttons for editing, deploying, and managing the flow
• Minimap (bottom-right corner) — a small overview of the entire flow for quick navigation

---

Step 7: Understand the Canvas

The canvas is the heart of the Flow Designer. Take a moment to explore the visual elements:

1. Nodes — rectangular or rounded shapes representing integration steps. Common node types include:

   • Integration Process — the main container (swimlane) that holds the flow logic
   • Start Event — a circle marking where the flow begins (triggered by a timer, HTTP call, or message)
   • End Event — a circle marking where the flow terminates
   • Content Modifier — a step that transforms or enriches the message
   • Request Reply — a step that calls an external system and waits for a response
   • Router — a diamond shape that splits the flow based on conditions

2. Edges — arrows connecting nodes in sequence. Edges define the execution order. Some edges carry labels indicating conditions (e.g., "orderType == 'PO'").

3. Swimlanes — horizontal bands that group nodes by participant. A typical flow has a Sender swimlane, an Integration Process swimlane, and a Receiver swimlane.

Expected Result: You can visually trace the flow from Start to End, following the edges through each processing step. Hovering over a node shows a tooltip with the node name and type.

---

Step 8: Explore the Node Palette

The Node Palette contains every building block available for constructing flows. It is organized into 12 categories:

#	Category	Description	Examples
1	Participants	External systems or actors	Sender, Receiver
2	Events	Flow lifecycle markers	Start Timer, Start Message, End Message
3	Process	Container and control flow	Integration Process, Local Integration Process, Exception Subprocess
4	Call	Invocation steps	Process Call, Send Step
5	Message Routing	Conditional and splitting logic	Router, Multicast, Splitter, Aggregator, Join, Gather
6	Message Transformers	Data manipulation	Content Modifier, Message Mapping, Script Step, XSLT Mapping, Filter, Converter
7	Persistence	Data storage and retrieval	Data Store Operations (Write, Get, Select, Delete), Persist Message
8	Security	Encryption and signing	Encryptor, Decryptor, Signer, Verifier
9	Encoder	Encoding and decoding	Base64 Encoder, MIME Multipart Encoder, ZIP Compression
10	Validator	Content validation	XML Validator, JSON Validator, EDI Validator
11	SAP Adapters	SAP-specific connectivity	IDoc, RFC, SOAP (SAP RM), OData V2, SuccessFactors, Ariba
12	Connectors	General-purpose connectivity	HTTP, SFTP, AMQP, Kafka, JDBC, Mail, AS2, ELSTER

1. Open the palette by clicking the palette icon in the toolbar or the side panel toggle.
2. Click a category to expand it and see available nodes.
3. To add a node to the canvas, drag it from the palette and drop it onto the canvas area inside a swimlane.

Expected Result: The palette displays all 12 categories. Expanding any category reveals its nodes with icons and labels. Dragging a node onto the canvas places it and automatically suggests edge connections to nearby nodes.

---

Step 9: Use the Properties Panel

When you select a node or edge on the canvas, the Properties Panel appears with configuration options. The panel has 8 tabs:

Tab	Purpose
General	Name, description, type-specific settings (e.g., adapter URL, authentication type, processing mode)
Runtime Configuration	Memory allocation, timeout values, retry policies
Error Configuration	Error handling strategy — continue, raise exception, or route to error subprocess
References	Links to external resources — value mappings, scripts, schemas used by this node
Externalized Parameters	Parameters exposed for environment-specific configuration (e.g., endpoint URLs, credentials aliases) — allows the same flow to work across dev/staging/prod
Problems	Validation issues and warnings detected in the current flow — missing required fields, invalid expressions, incompatible connections
Deployment Status	Current deployment state, last deployment timestamp, runtime version, and deployment logs
Design Guidelines	Best-practice recommendations and compliance checks for the selected node type

1. Click on any node in the canvas.
2. The Properties Panel opens on the right side.
3. Navigate through the tabs to see each configuration area.
4. Modify a value (e.g., change the node name in the General tab).

Expected Result: Each tab loads its content when selected. Required fields are marked with an asterisk. Invalid configurations show inline error messages. Changes take effect immediately on the canvas — for example, renaming a node updates its label in real time.

---

Step 10: Use the Toolbar and Zoom Controls

The toolbar at the top of the Flow Designer provides core actions:

Button	Action
Edit	Toggles edit mode — when enabled, you can drag nodes, create edges, and modify properties. When disabled, the canvas is read-only.
Configure	Opens the flow-level configuration — externalized parameters, error handling defaults, and flow metadata.
Deploy	Publishes and deploys the flow to the runtime engine. The flow must pass validation before deployment.
Delete	Removes the flow artifact from the package. Requires confirmation.

The zoom controls are located in the bottom-right corner of the canvas:

Control	Action
+ (Zoom In)	Increases the canvas zoom level by one step
- (Zoom Out)	Decreases the canvas zoom level by one step
Fit	Automatically adjusts zoom and pan to fit the entire flow within the visible canvas area
Minimap toggle	Shows or hides the minimap — a thumbnail view of the entire flow that indicates your current viewport position

1. Click Edit to enter edit mode.
2. Use Ctrl + Scroll (or trackpad pinch) to zoom in and out.
3. Click Fit to reset the view to show the entire flow.
4. Toggle the Minimap to see the flow overview in the corner.

Expected Result: Edit mode enables interactive handles on nodes and edges. The zoom controls respond smoothly. The Fit button centers the flow. The minimap accurately reflects the canvas contents and highlights your current viewport as a translucent rectangle.

---

What You Have Learned

By completing this guide, you now know how to:

• Navigate from the JedIN dashboard to the Flow Designer
• Find and open packages and artifacts in the Design page
• Read the visual elements on the canvas — nodes, edges, and swimlanes
• Browse the 12-category Node Palette to find integration building blocks
• Use the 8-tab Properties Panel to configure any selected element
• Control the canvas with toolbar actions and zoom controls

---

Next Steps

• Build a flow from scratch — create a new package, add an artifact, and drag nodes from the palette to construct a simple HTTP-to-HTTP integration
• Deploy and monitor — use the Deploy button and then switch to the Monitoring page to watch your flow execute in real time
• Explore the Marketplace — browse 15+ pre-built connector packages that you can install and customize
• Connect R2-CX — switch to the R2-CX product and use AI-assisted commands to create, configure, and deploy flows using natural language

For more guides, browse the JedIN Wiki or visit the R2-CX Getting Started guide.