React Flo based flowViewer implmentation

0
I am staring with Mendix as a UI Developer, and i need to use Database schema node and button edge solution from react Flo. This is already present on mendix market place, i would like to learn how to integrate it with my current web application for my use case.
asked
2 answers
0

Hi Vartika Raj


1. Install the widget

  • In Mendix Studio Pro → Marketplace
  • Click Install → It appears under App Store Modules.

2. Add the widget to your page

  • Open your target Page.
  • Drag React Flow Database Schema widget onto the page.

3. Prepare your data

React Flow expects:

  • Nodes list
  • Edges list

Create Entities:

  • FlowNode (id, label, x, y, type…)
  • FlowEdge (id, sourceNode, targetNode, label…)

Add associations accordingly.

4. Build a Data Source

  • Create a Microflow or Nanoflow that retrieves:
    • List of Nodes
    • List of Edges
  • Return them as lists.

5. Configure the widget

Inside widget properties:

  • Set Nodes Source → your Node list
  • Set Edges Source → your Edge list
  • Map attributes:
    • node.id
    • node.label
    • node.position
    • edge.source
    • edge.target
    • edge.label

6. Add Buttons / Actions

If using Button Edge:

  • Configure “onClick action” → call nanoflow/microflow
  • Use edge/node ID to process UI logic.




answered
0

You can integrate a React Flow–based “DB schema node + button edge” solution into a Mendix web application in two practical ways, depending on whether you want to use it as-is from the Marketplace or customize the React Flow node and edge types for your specific UX needs.


In your case, this refers to using the Marketplace component as-is, without modifying or extending the underlying React code.


With this approach, you install the component from the Mendix Marketplace and place it on a page, typically inside a Data View that represents your diagram context. The widget will expect node and edge data, usually provided either as JSON or as associated entity lists, depending on how the component is implemented.


You then create a microflow to load the diagram data (for example, MF_LoadDiagram) and bind it to the widget’s data source. In addition, you configure another microflow (such as MF_SaveDiagram) to persist node positions and edge changes when the diagram is updated.


This method requires no custom React development. You only need to configure the domain model, microflows, and widget properties within Mendix.


If this resolves the issue, please close the topic.


answered