Skip to main content

Custom Node

There are two ways to create a custom node.

Create a custom node when the built-in nodes cannot express the UI or when the same app-specific block appears in multiple places.

Quick CustomNode​

Use CustomNode when you only need to send props to a registered React component.

use Qore\Next\System\Nodes\CustomNode;

new CustomNode('UpdateProfilePictureNode', [
    'user_id' => $user->getKey(),
]);

Register the frontend component:

import { registerNode } from 'qore-next'
import UpdateProfilePictureNode from '@/components/nodes/profile/UpdateProfilePictureNode'

registerNode({
  name: 'UpdateProfilePictureNode',
  node: UpdateProfilePictureNode
})

Custom PHP Class​

Create a node class when the backend should own defaults, callbacks or serialization.

namespace App\Nodes;

use Qore\Next\System\Node\Node;
use Qore\Next\System\Node\NodeManager;

class MetricNode extends Node
{
    protected string $component = 'MetricNode';

    public function __construct(
        private string $label,
        private int|float $value,
    ) {}

    public function getNodeAsArray(NodeManager $manager): array
    {
        return array_merge(parent::getNodeAsArray($manager), [
            'label' => $this->label,
            'value' => $this->value,
        ]);
    }
}

Use parent::getNodeAsArray($manager) so id, component, class_name, properties and visible children are preserved.

Register the matching frontend component with the same component name.

When To Extend Node​

Extend Node when you need:

  • typed constructor arguments;
  • backend defaults;
  • node request/response callbacks;
  • custom serialization;
  • child nodes.

Use CustomNode when the component name and props are enough.