Skip to content

Commit ddb7f4f

Browse files
committed
add modal form docs
1 parent 7891755 commit ddb7f4f

File tree

1 file changed

+33
-1
lines changed

1 file changed

+33
-1
lines changed

7.x-dev/base-components.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ These are the components that Backpack uses inside the default CRUD operations.
9090

9191
![Backpack v7 Dataform component](https://backpackforlaravel.com/uploads/v7/dataform_component.jpg)
9292

93-
This component helps you show a form _anywhere you want_, so the admin to easily create or edit an entries for an Eloquent model. The dataform component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
93+
This component helps you show a form _anywhere you want_, so the admin can easily create or edit an entries for an Eloquent model. The dataform component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
9494

9595
```html
9696
<x-bp-dataform controller="\App\Http\Controllers\Admin\InvoiceCrudController" />
@@ -118,6 +118,38 @@ This component helps you show a form _anywhere you want_, so the admin to easily
118118

119119
<hr>
120120

121+
<a name="dataform-modal"></a>
122+
### Dataform Modal
123+
124+
![Backpack v7 Dataform Modal component](https://backpackforlaravel.com/uploads/v7/dataform_component.jpg)
125+
126+
This component helps you show a form _anywhere you want_ inside a modal, so the admin can easily create or edit an entry for an Eloquent model without having to refresh the whole page. The dataform modal component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
127+
128+
```html
129+
<x-bp-dataform-modal controller="\App\Http\Controllers\Admin\InvoiceCrudController" />
130+
```
131+
132+
**Configuration options:**
133+
- `name='invoice_form'` - by default, a name will be generated; but you can pick one you can recognize;
134+
- `operation='create'` - by default, the datatable component will pick up everything that controller sets up for the Create operation; if you want to change the operation it will initialize, you can pass this parameter;
135+
- `:entry="\App\Models\Invoice::find(1)"` - if you want to use UpdateOperation or a custom form operation that needs the entry;
136+
- `:setup="function($crud, $parent) {}"` - if you want to make changes to the operation setup (eg. add/remove fields, configure functionality), you can use this parameter; the closure passed here will be run _after_ the setup of that operation had already completed;
137+
138+
**Advanced example:**
139+
140+
```html
141+
<x-bp-dataform-modal
142+
controller="\App\Http\Controllers\Admin\InvoiceCrudController"
143+
name="invoice_form"
144+
operation="update"
145+
:entry="\App\Models\Invoice::find(1)"
146+
:setup="function($crud, $parent) {
147+
$crud->removeColumn('notes');
148+
}"
149+
/>
150+
```
151+
<hr>
152+
121153
<a name="datatable"></a>
122154
### Datatable
123155

0 commit comments

Comments
 (0)