Jump to content
bernhard

How to use beautiful alert/confirm/prompt dialog boxes in the backend

Recommended Posts

Another hidden treasure in the PW Backend:

PW 3.0.61 introduced the VEX library for dialogs: https://processwire.com/blog/posts/processwire-3.0.61-master/#admin-and-ui

This is how you can use them in your custom admin pages:

 

In your module's php load the vex library (eg in the ready() method of your module - init() might not work as it might load too early!)

$this->wire('modules')->get('JqueryUI')->use('vex');

Then in your javascript:

// show confirm dialog
ProcessWire.confirm('Are you sure you want to delete this E-Mail?', function() {
    // on confirm
    $i.removeClass('fa-trash').addClass('fa-spin fa-spinner');
    $.get('./trash/?mailid=' + $a.data('mailid'), function() {
      $a.closest('.RockGridWrapper').find('.rockgridbutton.refresh').click();
    });
  },
  function() {
    // on abort
    grid.api().deselectAll();
});

Result:

vex.png.e91301ed81113c5a64a8f95f08726bee.png

I opened a pull request with a little fix for handling clicks on the CANCEL button. If you want to support it, give it a thumb: https://github.com/processwire/processwire/pull/108

  • Like 10

Share this post


Link to post
Share on other sites

I wouldn't call them beautiful. It does its job.. but beauty is in the eyes of the beholder etc.etc.

I first encountered that vex thingie just a few days ago - and it didn't work. I'm still trying to find out why no one else was able to replicate that behaviour... I'll dig deeper when I have more time.

  • Like 2

Share this post


Link to post
Share on other sites

Just used vex in a project where Kendo UI wasn't available (mostly we use that for admin pages), and it was a very pleasant experience. After all I'm happy that I had to find an alternative, it brings more sophisticated ways to do prompts, confirms, etc.

  • Like 2

Share this post


Link to post
Share on other sites

@bernhard,

could you please give me a hint on how to implement a vex confirm within this situation?

I'm trying this since the last hour but without success... 😕

$('.ResendInvoiceButton').on('click', function() {
    return window.confirm('Do you want to resend the invoice?'); // <-- I'd like to replace this with a vex dialogue
});

 

Share this post


Link to post
Share on other sites

Hi @Gadgetto

Sure, it's very easy:

ProcessWire.confirm("foo?", function() {
  ProcessWire.alert("bar yes");
}, function() {
  ProcessWire.alert("bar no");
});

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks, I had something similar, but the button action isn’t interrupted if I click „Cancel“.

The native JavaScript I posted above returns false in this case and the button  link isn’t executed - which is what I want.

Share this post


Link to post
Share on other sites

OK, I have it:

    var orderActionStrings = config.orderActionStrings;
    $('.ResendInvoiceButton').on('click', function(e) {
        e.preventDefault();
        var a_href = $(this).attr('href');
        ProcessWire.confirm(
            orderActionStrings.confirm_resend_invoice,
            function() {
                // OK click
                window.location.href = a_href;
            }
        );
    });

This will fully replace this

var orderActionStrings = config.orderActionStrings;
$('.ResendInvoiceButton').on('click', function() {
    return window.confirm(orderActionStrings.confirm_resend_invoice);
});

with a nice vex dialog!

@bernhard thank you for your forum thread! I would have never found this feature as it is completely undocumented (except in the sources).

 

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...