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 init() method of your module):

$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(value) {
  if(value === true) {
    $i.removeClass('fa-trash').addClass('fa-spin fa-spinner');
    $.get('./trash/?mailid=' + $a.data('mailid'), function() {
      $a.closest('.RockGridWrapper').find('.rockgridbutton.refresh').click();
    });
  }
  else 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 4

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

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.