Nodes

Nodes are the basic building blocks in Flower. A flower is composed of several nodes, some laid out linearly, in sequence, others forming separate branches. Nodes are connected together like a flower chart, and by creating links between them you can define the logic that controls the feature you are working on.

When double-clicking on a node, you can set a few visualization properties (like name, color, icon) and define its content. A node is usually made of one or more components, the same components you have provided and configured in the configuration process.

Add a component

Click on Add element to add a component; here you should see all the components you have provided. You can add multiple components and arrange their order in the panel. They will have the same order in the page.

When you double-click on an element you will the see its configuration panel, with the properties you have defined in the flower.json file associated with that component.

By default the element panel displays the following additional sections:

• Action: the action type (for Redux) that the component will dispatch, if any.
• Visualization rules: rules that will make the component visible; when not satisfied, the component is hidden.
• Disabled if invalid: instead of hiding the component when no rule is satisfied, you can disable it (useful for input elements or buttons).

The next node

Once you have created a few nodes, you need to decide how to go from one to the other. The first node must be connected to the Start node, or your flower will not work.

Navigation between nodes happens through Redux actions, that must be dispatched by a component in the node, in the way you decide. By default there are three prebuilt actions:

• Next node - flower/next: go to the next node.
• Previous node - flower/prev: go the previous node.
• Previous node - flower/prevToNode: go the previous specified node.
• Specific node - flower/node: go the specified node.

When you choose the action from the Action select menu, the component will receive it as actionType, along with other useful props injected by Flower. Then, inside the component, you decide how the action is dispatched (for instance it can be when clicking on it, or immediately when the component is rendered - it is up to you).

The following is an example of a button that dispatches the action when it is clicked:

import { useDispatch } from 'react-redux'

const Button = ({ title, disabled, actionType, reducer, flowName }) => {
  const dispatch = useDispatch()

  const onClick = () => {
    // actionType, flowName and reducer are provided by Flower
    dispatch({
      type: actionType,
      payload: { name: flowName, reducer }
    })
  }

  return (
    <button disabled={disabled} onClick={onClick}>
      {title}
    </button>
  )
}