[Custom Module] Custom modal in table builderCreated 5 years ago by damian_nz
The table builder has various actions such as delete. Delete triggers a confirm modal before triggering the action handler.
Is it possible to create a custom modal?
I want to have a basic form with a text field that gets passed to the handler so I can bulk update stream entries.
Sure you can!
data-toggle="modal" data-target="#modal" and an HREF with your content to load is all you need. You can also specify larger modals like
data-target="#modal-lg" too. Loader is automated. You can also reload with more content within the modal content by attaching the
ajax class to the link: https://github.com/anomalylabs/files-field_type/blob/2.2/resources/views/choose.twig#L13
Hope this helps! I'll be documenting this as I clean up the JS around it. Very tied to jQuery and BS so removing those dependencies but the API will be the same.
There is a type of bulk update in there already - try adding
edit to your table actions.
Cheers Ryan! I am wanting to update them all with one form rather than going through them all. I will only be including the fields that can be bulk updated (i.e not title etc. It's for updating store hours across many branches). Your first comment has gotten me in the right direction thanks 😄 I understand what I need to do now!
There is one piece of the puzzle I cannot figure out. Where does the modal template get added? I understand the part Ryan mentioned above about the href calling a route that returns the modal content.
I have tried adding this to the
$actions property of the builder
'editHours' => [ 'icon' => 'pencil', 'type' => 'info', 'text' => 'Edit Hours', 'attributes' => [ 'data-toggle' => 'modal', 'data-target' => '#modal-lg', 'href' => '/admin/stores/opening_hours/bulk_edit_modal', ], 'handler' => BulkEditHours::class, ],
Which brings up the button correctly but instead of showing the modal it just fires the handler.
Hmm.. is it rendering as a
You might need to add a
"onclick" => "return false;" and include
"is_safe" => true so the JS doesn't get stripped.
Cause you probably don't want to submit the action at all, right? You just wanna utilize that portion of the UI? Or is this a bulk edit where fields are in the table itself? Cause I would think you'd use JS to grab IDs off the checked checkboxes and just redirect to your form with all the parameters.
Am I close?
Either way might need a bit of your own JS to assist. You can use this to include easily:
protected $assets = [ 'scripts.js' => ['my.module.example::js/table/bulkedit.js'] ];
I essentially want the same thing as the delete but with my own content in the modal.
The delete passes the IDs through to the backend so I just wanted to jump in the middle of that and add bits in from my custom modal.
Possible? If not then yeah I can do it with the JS option, no dramas getting that working 😄
Ya the delete only uses the
which you can do your OWN custom content usingdata-toggle="modal"` like I mentioned above. Only thing is if it's not catching properly we'll wanna fix that..
In thinking about it you'll pry need to implement your own listener and use bootbox yourself cause the confirm only supports text in the box - and data-toggle modal won't have the same behavior as the confirm (stopping default behavior until confirmed). So basically implement your own version of this: https://github.com/pyrocms/accelerant-theme/blob/1.0/resources/js/theme/confirm.js
I figured it out. You said to use
data-target="#modal-lg" but it's
data-target="#modal-large" (maybe my Pyro version 😄 )
So I now have the modal pulling in the content of the template. I need to render some of the stream form. I have tried passing the result of FormBuilder render to the modal but that renders the full admin page and the full form.
How can I get access to the streams form so that I can pick the fields to render?
I see in the form sections guide that it's possible
Check the core folder for example of code to modal creation.
I don't know about a bulk update. Need more info to tell something.