How to create custom components that are react flow blocks that can be linked

Queries and Resources
1

  • Goal: I am trying to achieve to create playbooks by creating custom blocks in retool using react flow.

  • Steps: I have created custom component and published which is showing up in retool left panel but when i drag it then it is acting as its own canvas.

  • Details: I would like to know if i can able to create multiple custom components which are react flow blocks and when i drag them into retool canvas, i would like to link them to create a playbook.

2

Hello @Pavan!

Very interesting use case.

Unfortunately, I do not think Retool currently has built in support for React Flow that would allow for custom components to be able to 'link' together with each other automatically.

However, custom components can share data with the Retool app and with other components, I am not familiar with React Flow but you might be able to get the blocks to connect programmatically if you are looking to have them pass data and execute logic.

But, our canvas painting for Retool apps runs in a sandbox so having the custom components visually connect might be tricky.

Could you share a screen shot of the inspector for the custom component?

In terms of other options and possible solutions for your use case, my best recommendation would be to use workflows!

As they can execute JavaScript code blocks and pass state between one another as React flow blocks could. They also have an easy to use and understand canvas UI for visualizing logic flows.

Also I believe I made a feature request for a similar component that are drag and drop blocks that can connect together with each other for building flow diagrams. This is still in development and is more of a visual tool.