Confirmation Box Widget

The Confirmation Box Widget is bundled with XWiki Enterprise and it displays a stylized pop-up box asking the user to confirm a given action.

As you can see in the source code, the Confirmation Box widget is built on top of the Modal Popup class.

Usage

new XWiki.widgets.ConfirmationBox(behavior, interactionParameters);

XWiki.widgets.ConfirmationBox Constructor Parameters

behavior

behavior is an optional object that defines the "confirm" and "cancel" handlers. When the user confirms an action, the existing onYes method is triggered. Otherwise, the existing onNo method is triggered. In case the behavior parameter is empty, nothing will happen upon confirmation and cancel.

interactionParameters

interactionParameters is an object that defines the text elements displayed within the confirmation box:

  • confirmationText - a message about the action to confirm. The default value for English is "Are you sure?"
  • yesButtonText - the text displayed by the "Yes" button
  • yesButtonText - the text displayed by the "No" button
  • showCancelButton - a flag stating whether to display the "Cancel" button. It defaults to false
  • cancelButtonText - the text displayed by the "Cancel" button

Example

Create a wiki page and add a link to it that will trigger the deletion of a space:

{{velocity}}
{{html}}
<a href="#" id="deleteLink">Delete this space</a>
{{/html}}
{{/velocity}}

Next, add an "XWiki.JavaScriptExtension" object with the following code:

// listen to xwiki:dom:loaded to make sure we have XWiki.widgets.ConfirmationBox
document.observe('xwiki:dom:loaded', function() {
 // add onclick listener on element with id 'deleteLink'
 $('deleteLink').observe('click', function(){
   // this is called when click on element with id deleteLink happens
   // init behavior
   var behavior = {
     onYes: function() {
        alert("You have successfully deleted the space.");
      }
    };
   // init interactionParameters
   var interactionParameters = {
     confirmationText: "Are you sure you want to delete this space?",
     yesButtonText: "Yes, I confirm",
     noButtonText: "No, cancel that"
    };
   // instantiate XWiki.widgets.ConfirmationBox
   new XWiki.widgets.ConfirmationBox(behavior, interactionParameters);
  });
});

The result should be:

ConfirmationBoxLink.png

If you click the link, a pop-up with the confirmation message and the button text defined by interactionParameters will appear:

ConfirmationBox.png

In case you decide to confirm the action, you will see a new pop-up with the message defined by the behavior parameter.

ActionConfirmed.png

 

Related Pages

Search this space