Caspio (and other software I've seen over the years) includes a visual method of defining logic as shown in the screenshot below.

  • Does anyone know the name of this type of component?
  • Does anyone know open source components that do something like this?
  • Does anyone have opinions on alternate UIs for achieving this sort of "logic building" functionality? The only alternative I can think of is something like a visual flow chart, but that would take up quite a bit more space.

Caspio actions screenshot: Caspio actions screenshot

Here is a screenshot from a game prototype that uses the same type of component: Game screenshots

The closest I can think of is a "query builder", but a query builder in my experience is more like just a "condition builder" for filtering data, which is just a subset of what this component does.


2 Answers 2

  • This is called a no-code logic builder. It can also be called Visual Programming as mentioned by @Wodin.
  • Haven't used an opensource tool but here is a list: https://www.liquidweb.com/kb/the-top-five-open-source-nocode-tools/. MIT Scratch; the no-code app builder by Tulip Interfaces (tulip.co), Unqork, Bubble, Microsoft's Power Automate are some examples of no-code logic builders out there that you can look at for inspiration.
  • Yep! it doesn't need to be a flow chart, there are horizontal (linear) ways of achieving this (check the examples above). The language is also very important - it should be in a way that people can think through it clearly.

If you strip down the visual treatment, it boils down to combinations of 3 components here.

  • Multi-level accordion: This is the outer shell of the component, each level is indented visualise the nested structure of the code.
  • Combo boxes: Combinations of combo boxes within, where the values can be changed.
  • Buttons: for actions like adding new lines.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.