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 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 9

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...