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

[bernhard]

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:

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

[dragan]

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.

[bernhard]

5 minutes ago, dragan said:

I wouldn't call them beautiful.

well, you can style them however you want: http://github.hubspot.com/vex/api/themes/

 

[tpr]

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.

[dotnetic]

Hi @bernhard. Maybe you'd like to update your code to the new syntax which awaits a ok and cancel function. See https://github.com/processwire/processwire/commit/63cba339e4cb942885d9702e9d9003539f1b8230 for the syntax.

[bernhard]

done

[Gadgetto]

@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
});

 

[bernhard]

Hi @Gadgetto

Sure, it's very easy:

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

 

[Gadgetto]

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.

[Gadgetto]

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