Using field layout widget with custom "fields"

[piotrpog]

Is it possible to populate field layout designer with some custom "fields", not related to craft fields? I briefly looked through template files but didn't saw such an option.

Let's say that i create a contact from plugin and have my own "form fields" which are not related to craft fields at all. But i still want to use form layout widget in control panel.

[brandonkelly]

Yes, this is possible by creating a “native field” class, which extends craft\fieldlayoutelements\BaseField.

There are a few built-in examples, such as craft\fieldlayoutelements\users\AddressField, which provides the “Addresses” field for user field layouts in Craft 4.

Once you have a native field class defined, you can register it to a field layout using the EVENT_DEFINE_NATIVE_FIELDS event:

use craft\events\DefineFieldLayoutFieldsEvent;
use craft\models\FieldLayout;
use yii\base\Event;

Event::on(
    FieldLayout::class,
    FieldLayout::EVENT_DEFINE_NATIVE_FIELDS,
    function(DefineFieldLayoutFieldsEvent $event) {
        /** @var FieldLayout $fieldLayout */
        $fieldLayout = $event->sender;
    
        if ($fieldLayout->type === 'target\element\type\class') {
            $event->fields[] = MyField::class;
        }
    }
);

(Note: for Craft 3, the event name is EVENT_DEFINE_STANDARD_FIELDS, not EVENT_DEFINE_NATIVE_FIELDS.)

[piotrpog]

Thanks for reply. I created such custom field and it indeed worked. But i have few questions.

How can i remove existing craft fields from layout designer?
I think it probably has something to do with creating FieldLayout object and passing it to Twig component like here:

    {{ forms.fieldLayoutDesignerField({
        fieldLayout: categoryGroup.getFieldLayout(),
    }) }}

Any pointers about initializing the fieldLayout object with only my native fields?

Also, can my Native Fields be grouped, like regular fields are grouped? Or do they need to sit in "Native Fields" group?

[brandonkelly]

How can i remove existing craft fields from layout designer?

There’s not really an easy or straightforward way to do that.

Any pointers about initializing the fieldLayout object with only my native fields?

It’s not possible to create a field layout designer that doesn’t allow custom fields.

Also, can my Native Fields be grouped, like regular fields are grouped? Or do they need to sit in "Native Fields" group?

They can only live within the “Native Fields” group.