Getting started

Events & actions

Name an action in the schema (onChange, onClick, ...) and write it in your page.

Name an action in the schema

Any prop that starts with on (onChange, onBlur, onFocus, onKeyDown, onClick, ...) can hold the name of an action: "onChange": "zipChanged()".

Write the action in useDynamicTag({ actions: (api) => ({ ... }) }). api is the form's toolbox (set values, change nodes, validate, ...).

What an action receives

Field and button actions are called as (event, context). context has name (the field name), value (its current value), values (all tracked values) and fieldRefs.

Components such as tables, charts and calendars pass a payload object first instead — each tutorial lists it under Events.

actions: (api) => ({
  zipChanged: (event, { name, value }) => console.log(name, value),
})

Built-in actions

These names work in the schema without writing anything: runValidation(), clearForm(), resetForm(), addCopy(), removeCopy(), switchLanguage(), openModal(), closeModal(), selectTab().

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-fields",
    "children": [
      {
        "type": "column",
        "id": "col-zip",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "InputField",
            "id": "zip",
            "props": {
              "name": "zip",
              "label": "ZIP code",
              "mask": "#####",
              "placeholder": "5 digits",
              "onChange": "zipChanged()",
              "onBlur": "zipBlurred()",
              "onFocus": "zipFocused()"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "col-color",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "SelectField",
            "id": "color",
            "props": {
              "name": "color",
              "label": "Favorite color",
              "options": [
                "Red",
                "Green",
                "Blue"
              ],
              "onChange": "colorChanged()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-result",
    "children": [
      {
        "type": "column",
        "id": "col-result",
        "children": [
          {
            "type": "P",
            "id": "result",
            "props": {
              "className": "alert alert-info py-2",
              "text": "Type a ZIP code or pick a color."
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "col-buttons",
        "props": {
          "className": "d-flex gap-2"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "fill",
            "props": {
              "text": "Fill with demo values",
              "onClick": "fillDemo()"
            }
          },
          {
            "type": "ButtonField",
            "id": "clear",
            "props": {
              "text": "Clear",
              "onClick": "clearForm()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`onChange / onBlur / onFocus`	Run an action when the field changes, loses focus or gets focus.
`onClick`	Run an action when a button is pressed.
`mask`	Format while typing; `#` is a digit, e.g. `"(###) ###-####"`.

Events

Event	When it runs	Your action receives
`onChange`	Every edit of the field.	`(event, { name, value, values })`
`onBlur / onFocus`	The field loses / gets focus.	`(event, { name, value })`
`onClick`	A button is pressed.	`(event, { name })`

Tips

api.setFormData({ ... }) and api.setFieldValue(name, value) set values from code; they do not fire onChange.
An action can call other actions through api — custom ones too, because they are added to the same object.