[Custom Module] Custom modal in table builder
Created 6 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.


piterden  —  6 years ago

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.

ryanthompson  —  6 years ago

Sure you can!

The 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.

damian_nz  —  6 years ago

Thanks piterden, will take a look. The bulk update will work essentially the same as the bulk delete but will update the records passed in rather than delete them. It will pass the IDs to the handler and from there I will fetch the records and update them.

ryanthompson  —  6 years ago

There is a type of bulk update in there already - try adding edit to your table actions.

damian_nz  —  6 years ago

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!

damian_nz  —  6 years ago

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.

ryanthompson  —  6 years ago

Hmm.. is it rendering as a button or a tag?

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']
damian_nz  —  6 years ago

Hey Ryan,

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 😄


ryanthompson  —  6 years ago

Ya the delete only uses the prompt and confirm APIswhich 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

damian_nz  —  6 years ago

Hey Ryan 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

damian_nz  —  6 years ago

Is this possible of streams forms? Or only custom made ones?