[Closed]Action Confirmation Modal

[Karl_T]

Clients occasionally request to have a confirmation for actions such as save pages, delete(trash) pages. This is an extra layer of confirmation that can prevent fault click and add more information of the action. This can also benefit module development as modules may contain some destructive actions or batch actions that may cause troubles once the action executed mistakenly.

Here is my personal experience. I use the action feature in ListerPro and developed some actions for batch executions such as sending email and SMS. If the user was using the catch send action and forgot to filter the list, they would turn out sending all emails and SMS, which is a disaster. However, modules like ListerPro has their own user interface, which not every developer is capable of making changes to, like the way AOS do. If we have the confirmation layer, the story could be quite different. After clicking proceed button, a modal will popup telling how much email/SMS they are actually sending. They can then confirm that the action is going the way they want.

The implementation could be like the way pw-modal do, adding a pw-confim-modal class to the button. In the module side, developer can make changes to button inputfield so that they can enable confirmation modal and set wanted markup to it. Existing module can make a hookable method for button creation. So other developers can choose to hook to add the markup they want for confirmation modal. I believe this feature should be included in core, with a standardized implementation for everyone to follow.

[arjen]

I've stumbled into this as well in the past. Most users I've shown the Actions don't really get the current concept. They either forget they are performing actions on all or they forget to filter at all. Ryan came up with some solutions. Personnaly I would like an gmail approach so make sure the user is as notified as possible of what is going to happen. The current UX doesn't really cut it. A modal could work too.

[Karl_T]

Hi @arjen. Thanks for joining the discussion.

I suggest to use modal, as it is decoupled with the UI. In this way, it can be used anywhere inside the admin, not limited to particular modules. ListerPro is one of the best demonstration to this issue, but not limited to it. A more general approach could benefit more Processwire users imho.

Some core modules use an approach that redirect to a confirmation page. This happens when we are removing template fields. Comparing with the extra confirmation page approach, I think modal is a better way. We can copy the button's href and form data to the modal, which is easier than changing the button's href to the confirmation page while keeping the action.

[dragan]

Well, in the meantime, as a quick and dirty workaround, you could just insert an old-fashioned dialog in modules/ProcessPageListerPro/ProcessPageListerPro.js / line 29

		$("#Inputfield_run_action").click(function() {
			var $form = $(this).parents('form'); 
			$form.attr('target', 'actions_viewport'); // change target for this submission
			$viewport.slideDown();
			if($viewport.is(".InputfieldStateCollapsed")) $viewport.find(".InputfieldHeader").click(); 
			setTimeout(function() { $form.attr('target', '_top'); }, 1000);  // restore target
			var $icon = $(this).find("i.fa"); 
			$icon.attr('id', 'actions_spinner').attr('data-icon', $icon.attr('class')).removeClass($icon.attr('class')).addClass("fa fa-lg fa-spinner fa-spin"); 
			if (window.confirm("Do you really want to do this?")) { 
			} return true;
		}); 

 

[bernhard]

PW already has VEX onboard. You can easily use it like I did in RockGrid. See this example:

You'd just need to target the right save-button and save only when the user confirms.

[Karl_T]

Thanks for pointing me to this. I was using the wrong keyword(modal, popup) to search for this feature. This is the thing I am looking for. Let me back-link your tutorial here for people like me.