Text & layout

Change elements at runtime

Change text, colors and classes, or hide, show and remove any element by its id.

Change any node by its id

api.setNodeProps(id, props) merges new props into a node: change its text, className, style, a field's label or disabled, a button's variant, ... style is merged with earlier style changes; other props replace.

api.hideNode(id), showNode(id) and toggleNode(id) hide an element but keep it in the page, so a hidden field keeps its value (and is not validated). removeNode(id) takes it out completely; restoreNode(id) brings it back.

api.resetNode(id) and api.resetNodes() undo the changes.

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-targets",
    "props": {
      "className": "mb-3"
    },
    "children": [
      {
        "type": "column",
        "id": "col-targets",
        "children": [
          {
            "type": "H4",
            "id": "target-title",
            "props": {
              "text": "I am the title (id: target-title)"
            }
          },
          {
            "type": "P",
            "id": "target-text",
            "props": {
              "text": "I am a paragraph (id: target-text)."
            }
          },
          {
            "type": "DIV",
            "id": "target-box",
            "props": {
              "className": "border rounded p-3 mb-3",
              "children": "A box (id: target-box)"
            }
          },
          {
            "type": "InputField",
            "id": "target-field",
            "props": {
              "name": "nickname",
              "label": "Nickname (id: target-field)"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "col-buttons",
        "props": {
          "className": "d-flex flex-wrap gap-2"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "b1",
            "props": {
              "text": "Change title text",
              "onClick": "changeText()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b2",
            "props": {
              "text": "Color the paragraph",
              "onClick": "colorText()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b3",
            "props": {
              "text": "Style the box",
              "onClick": "styleBox()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b4",
            "props": {
              "text": "Disable / relabel field",
              "onClick": "changeField()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b5",
            "props": {
              "text": "Toggle paragraph",
              "variant": "outline-secondary",
              "onClick": "toggleText()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b6",
            "props": {
              "text": "Remove box",
              "variant": "outline-danger",
              "onClick": "removeBox()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b7",
            "props": {
              "text": "Restore box",
              "variant": "outline-success",
              "onClick": "restoreBox()"
            }
          },
          {
            "type": "ButtonField",
            "id": "b8",
            "props": {
              "text": "Undo everything",
              "variant": "outline-dark",
              "onClick": "resetAll()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`api.setNodeProps(id, props)`	Merge props into the node (text, className, style, label, disabled, ...).
`api.hideNode / showNode / toggleNode(id)`	Hide or show; the element stays in the page and keeps its value.
`api.removeNode / restoreNode(id)`	Take the element out of the page / put it back.
`api.resetNode(id) / resetNodes()`	Undo runtime changes of one node / all nodes.

Events

Event	When it runs	Your action receives
`onClick`	A button is pressed.	`(event, { name })`