Elements configuration

This section covers how you can configure the element panel for the Flower interface. Note that this configuration only affects Flower editor: it is the graphical way you can configure your React components. If normally you pass props via code, with Flower you can configure your components from a visual editor.

The flower.json file of a component contains a key, editing, inside which you add different elements to configure the component; for instance a switch to make text bold, a select to choose a text heading (H1, H2, ...), an input to type in a classname, and such.

Input

A simple input element that matches your text to the prop defined with id.

{
  "type": "Input",
  "id": "classname",
  "label": "Classname"
}

Textarea

A textarea that matches your text to the prop defined with id.

{
  "type": "Textarea",
  "id": "description",
  "label": "Description"
}

Switch

A switch element that matches a boolean value to the prop defined with id.

{
  "type": "Switch",
  "id": "isBold",
  "label": "Bold text"
}

Select

A select element from which you can choose a predefined value. The chosen value is passed to the component in the prop defined with id.

{
  "type": "Select",
  "id": "size",
  "label": "Text size",
  "options": [
    {
      "name": "Big",
      "value": 32
    },
    {
      "name": "Medium",
      "value": 24
    },
    {
      "name": "Small",
      "value": 16
    }
  ]
}

ButtonGroup

Similar to the select element, it allows you to choose a value clicking on buttons.

{
  "type": "ButtonGroup",
  "id": "variant",
  "label": "Variant",
  "options": [
    {
      "label": "Success",
      "value": "success"
    },
    {
      "label": "Danger",
      "value": "danger"
    }
  ]
}

Rules

A special element that displays the rules editor (see Rules).

{
  "type": "Rules",
  "id": "rules"
}

SelectNode

A special element that allows you to select one of your existing flower nodes (like nodes and actions), getting its ID.

{
  "type": "SelectNode",
  "id": "nodeId",
  "label": "Node"
}

List

A list of elements. Each item of the list can contain one or more of the elements described so far. Useful to create complex configurations as array of objects. Use item to define the structure of the single object of the list, and id to specify the name of the prop the component will receive.

{
  "type": "List",
  "id": "columns",
  "title": "Columns configuration",
  "item": [
    {
      "type": "Input",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "Input",
      "id": "field",
      "label": "Field"
    }
  ]
}

In this case, supposing you added two elements to the list, the React component will get a prop named columns with the following content:

[
  {
    "title": "Element #1 title",
    "field": "Element #1 field"
  },
  {
    "title": "Element #2 title",
    "field": "Element #2 field"
  }
]