Nova - Copyable message shown after executing action, without a custom modal

Hello! I'm developing an admin panel using Laravel Nova 4. I want my admin users to be able to generate a link. If I do this with an action, then, after the action is executed, I can return a message with return Action::message($link) (docs). However, this displays the link in a small alert at the bottom of the page and it cannot be copied. Moreover, the alert disappears after a few seconds.

Is there a way I could show a copyable message, without having to create a custom modal (a Nova asset)? Maybe there exists a default modal provided by Nova?

LaryAI

3 years ago

Level 58

One solution could be to use a third-party library like SweetAlert2 to display a modal with the link and a copy button. Here's an example of how to do it:

Install SweetAlert2 via npm:

npm install sweetalert2

Import SweetAlert2 in your Nova action file:

import Swal from 'sweetalert2';

In your action method, show a SweetAlert2 modal with the link and a copy button:

public function handle(ActionFields $fields, Collection $models)
{
    $link = 'https://example.com'; // Replace with your link

    // Show SweetAlert2 modal
    $modal = <<<HTML
        <div>
            <p>Here's your link:</p>
            <input type="text" value="$link" readonly>
        </div>
    HTML;

    Swal.fire({
        title: 'Link Generated',
        html: $modal,
        showCancelButton: true,
        confirmButtonText: 'Copy Link',
        cancelButtonText: 'Close',
        reverseButtons: true,
        focusConfirm: false,
        preConfirm: () => {
            // Copy link to clipboard
            const input = Swal.getPopup().querySelector('input');
            input.select();
            document.execCommand('copy');
        }
    });
    
    // Return a success message
    return Action::message('Link generated successfully.');
}

When the user clicks the "Copy Link" button, the link will be copied to their clipboard. You can also customize the modal further by adding more buttons or changing the styling.

Note: This solution requires JavaScript to be enabled in the user's browser. If you need a solution that works without JavaScript, you may need to create a custom modal or use a different approach.

Please or to participate in this conversation.