Quick start · Forms
Create an admin form
A working Magento admin edit screen in Nebula is three files: a JSON definition, a layout block, and a data provider binding. Here's the whole recipe, with copy-paste, schema-backed examples.
Quick Start
Create a form in 3 steps
A working admin edit screen is a JSON file and a layout block — no UI-component XML, no KnockoutJS, no JavaScript build step.
Shortcut
bin/magento nebula:generate:formscaffolds both files for you1
Define the form
view/adminhtml/form/blog_post_edit.json
Fieldsets, field types, validation and save/back/delete URLs — the entire edit screen in one file.
{
"id": "blog_post_edit",
"acl": "Acme_Blog::post",
"dataSource": {
"provider": "blog.post.form",
"config": { "identifierParam": "id" }
},
"settings": {
"title": "Blog Post",
"identifierField": "post_id",
"saveUrl": "blog/post/save",
"backUrl": "blog/post/index",
"deleteUrl": "blog/post/delete"
},
"fieldsets": {
"general": {
"label": "General Information",
"open": true,
"fields": {
"title": { "label": "Title", "type": "text", "required": true, "position": 10 },
"is_active": { "label": "Published", "type": "toggle", "position": 20 },
"content": { "label": "Content", "type": "wysiwyg", "position": 30 }
}
}
}
}Schema-backed · form.schema.json (Draft 2020-12)
2
Wire it into a layout
view/adminhtml/layout/blog_post_edit.xml
Same idea as the grid — the NebulaForm block renders the definition by form_id.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Qoliber\NebulaForm\Block\Form" name="nebula.blog_post_edit">
<arguments>
<argument name="form_id" xsi:type="string">blog_post_edit</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>3
Bind a data provider
etc/adminhtml/di.xml
Map the provider alias to a class implementing Qoliber\NebulaComponent\Api\DataProviderInterface. Aliases keep class names out of your JSON.
<type name="Qoliber\NebulaComponent\Model\Registry\DataProviderRegistry">
<arguments>
<argument name="bindings" xsi:type="array">
<item name="blog.post.form" xsi:type="string">Acme\Blog\Model\DataProvider\PostFormProvider</item>
</argument>
</arguments>
</type>Run bin/magento nebula:lint and refresh the admin — you're done.