Filament•15mo ago

How to Open Another Modal from Action Modal?

Hello! So I want to build an import excel with Actions. After the user successfully imported the file, I want to automatically close the import modal and open another modal to display the result of the import. How to do that? If it is not possible, how to put some text under the form to display the result? Here is my current code of the import action.

Actions\Action::make('import')
  ->icon('heroicon-m-arrow-up-tray')
  ->label('Import')
  ->color('info')
  ->form([
    Forms\Components\FileUpload::make('file')
      ->label('Excel file')
      // ->...
      ->required()
  ])
  ->action(function ($data) {
    // Do the import thing

    // Close this modal and open another modal for displaying the import result
  })

Actions\Action::make('import')
  ->icon('heroicon-m-arrow-up-tray')
  ->label('Import')
  ->color('info')
  ->form([
    Forms\Components\FileUpload::make('file')
      ->label('Excel file')
      // ->...
      ->required()
  ])
  ->action(function ($data) {
    // Do the import thing

    // Close this modal and open another modal for displaying the import result
  })

5 Replies

Hugo•15mo ago

You can try with :

$this->dispatch('open-modal', id: 'your-modal-id');

$this->dispatch('open-modal', id: 'your-modal-id');

QCTFWOP•15mo ago

How to know the modal ID? Do I have to create another action for the result modal to get the modal ID?

Hugo•15mo ago

Yes, the id will be the name you put in the ::make()

QCTFWOP•15mo ago

Unfortunately, the modal still does not appear.

Actions\Action::make('import')
  ->icon('heroicon-m-arrow-up-tray')
  ->label('Import')
  ->color('info')
  ->form([
    Forms\Components\FileUpload::make('file')
      ->label('Excel file')
      // ->...
      ->required()
  ])
  ->action(function ($data, $livewire) {
    // Do the import thing

    // Close this modal and open another modal for displaying the import result
    $livewire->dispatch('open-modal', id: 'result');
    $livewire->dispatch('open-modal', id: 'result-action'); // Also tried this, the result modal does not appear either
  })

Actions\Action::make('import')
  ->icon('heroicon-m-arrow-up-tray')
  ->label('Import')
  ->color('info')
  ->form([
    Forms\Components\FileUpload::make('file')
      ->label('Excel file')
      // ->...
      ->required()
  ])
  ->action(function ($data, $livewire) {
    // Do the import thing

    // Close this modal and open another modal for displaying the import result
    $livewire->dispatch('open-modal', id: 'result');
    $livewire->dispatch('open-modal', id: 'result-action'); // Also tried this, the result modal does not appear either
  })

Here is the import action code.

Actions\Action::make('result')
  ->modalContent(new HtmlString('<div>Hello</div>')); // Test string

Actions\Action::make('result')
  ->modalContent(new HtmlString('<div>Hello</div>')); // Test string

awcodes•15mo ago

You can chain modals in v3. https://filamentphp.com/docs/3.x/actions/modals#opening-another-modal-from-an-extra-footer-action

Modals - Actions - Filament

Gaming

Programming

How to Open Another Modal from Action Modal?