How to use a modal

[haco3d]

Hello, I need to understand how to use a modal with the tables, display it through an action button. Is there someone who can help me please.

Within the documentation I can't find any detailed explanation of this topic.

It only talks about this function but it is not enough for me.

public function customView(): string
{
return 'includes.custom';
}

help please i will be grateful

[guccilive]

Same here. It doesn't really tell how it needs to be implimeneted.

[lrljoe]

What're you using to display modals elsewhere in your site? That'll help steer you in the right direction.

At a basic level you can use the custom view to store your modal code, and call a function using wire click to populate and show it.

At slightly more advanced, you could emit a call to a dedicated Livewire modal component that then displays for you, and emits a refreshDatatable when it's done.

[SimonMacIntyre]

The part I do not know how to do, is how do I, given the example of bulkActions functionality, open a modal when clicking on a bulkAction.

The example is like this:

public array $bulkActions = [
        'openModal' => 'Install Something'
];

public function openModal()
{
    //But here, can I ... invoke livewire components?? Something like:
    return ['livewire.modal', ['someVariable' => 1]];
}

Is it not clear to me how to do this with bulkActions, if someone can advise that would be helpful. Sorry I am new to this package and new to livewire.

At a basic level you can use the custom view to store your modal code, and call a function using wire click to populate and show it.

The part I do not understand, is how to add a wire:click to the bulkActions button, it is not exposed to me as far as I can tell. Is it possible? Or is bulkActions limited to only calling a single function with business logic, and cannot be used to open a modal in this way?

Thanks!

[alukardua1]

I use the "wire-elements/modal" component, a very convenient thing

[SimonMacIntyre]

That does not help in this case because the problem is still how do you actually hook that up to a bulk action button click, that html is not exposed to us as far as I can tell. Please correct me if I am wrong. The only attribute we can edit seems to be the bulk actions button text, but we'd need the ability to add html to the element so we could add something like a wire:click of our own to override its default functionality.

[alukardua1]

Using this plugin I just added a cell with a custom look

Column::make(__('app.actions'))->label(function($string) {
				echo $this->edit buttons($row, 'summary.summary-edit');
			})->html()

where $this->edit buttons

public function editButtons(mixed $row, string $modal): string
{
$del = null;
		$upd = null;
		if(Auth::user()->isAdmin()) {
			$del = '<button wire:press="destroy('.$string->id.')" class="btn btn-sm btn-shadow of danger" onclick="return confirmation(\".__('global.confirm_delete'
				).'\')"><i class="fa-solid fa-trash-can"></i></button>';
			if($string->inn) {
$upd = '<button wire:click="update('.$string->inn.')" class="btn btn-sm btn-main shadow"><i class="fa-solid fa-pen"></i></button>';
			}
		}
return '<class div="btn-group btn-group-sm" role="group">
<button wire:click=\'$emit("openModal", "'.$modal.'", {"id":"'.$row->id.'"})\' class="btn btn-sm btn-warning shadow"><i class="fa-solid fa-pen-to-square"></i></button>
		            	'.$del.$upd.'
                    </div>';
}

[lrljoe]

Firstly, you're going to need to include a view using the customView function. This can contain the reference to your Livewire modal component, or just be a blade based component, up to you.

Then in the relevant function for the bulkActions, you're going to want to set the variables etc to open & populate your modal.

If you're using wire-elements/modal, then emit the function appropriately.

To use your example:

public $selectedItems;
public $modalIsOpen = false;

public array $bulkActions = [
        'openModal' => 'Install Something'
];

public function openModal()
{
   $this->selectedItems = $this->getSelected();
   $this->modalIsOpen = true;
}
public function customView(): string
{
    return 'components.genericModal';
}

Then your genericModal blade may have something like this:

@if($modalIsOpen)
<div class="modal">
   @foreach($selectedItems as $selectedItem)
    <span>{{ $selectedItem }}</span><br />
  @endforeach
</div>
@endif

or something like this:

@if($modalIsOpen)
   <livewire:components.generic-modal :selectedItems="$selectedItems" />
@endif

For wire-elements/modal:

public array $bulkActions = [
        'openModal' => 'Install Something'
];

public function openModal()
{
   $selectedItems = $this->getSelected();
   $this->emit('openModal', "path-to-modal", ['selectedItems' => $selectedItems]);
}

[SimonMacIntyre]

That makes sense, thank you so much for that example, I really appreciate it!

[lrljoe]

No problem, please make sure to mark this as resolved once you get it working.