Wiki source code of Confirmation Box UI Component
Version 17.2 by Vincent Massol on 2017/09/01
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{toc/}} | ||
| 2 | |||
| 3 | The Confirmation Box UI is an alternative to the old-fashioned browsers confirm boxes. It displays a nice popup box asking the user to confirm an action. Functions hooks are available on both confirm and cancel actions. | ||
| 4 | |||
| 5 | //Image of the confirmation box in action~:// | ||
| 6 | image:confirmbox.png | ||
| 7 | |||
| 8 | {{html}} | ||
| 9 | <a href="#" onclick="javascript:new XWiki.widgets.ConfirmationBox();">Or click this link to see one live!</a> | ||
| 10 | {{/html}} | ||
| 11 | |||
| 12 | = Usage = | ||
| 13 | |||
| 14 | {{code language="javascript"}} | ||
| 15 | new XWiki.widgets.ConfirmationBox(behavior, interactionParameters); | ||
| 16 | {{/code}} | ||
| 17 | |||
| 18 | ; behavior | ||
| 19 | : \\ | ||
| 20 | |||
| 21 | ((( | ||
| 22 | Object that define confirm and cancel handlers. When the user chooses "Yes", its "onYes" method is triggered if it exists. When the user chooses "No", its "onNo" method is triggered, if it exists. When the user chooses "Cancel", if the cancel button is enabled, its "onCancel" method is triggered, if it exists. The behavior parameter is not mandatory and is empty by default (It means nothing will happen upon confirmation or cancel). | ||
| 23 | |||
| 24 | Example: | ||
| 25 | |||
| 26 | {{code language="javascript"}} | ||
| 27 | var myBehavior = { | ||
| 28 | onYes: function() { | ||
| 29 | alert("Yes!"); | ||
| 30 | }, | ||
| 31 | onNo: function() { | ||
| 32 | alert("Oh no :("); | ||
| 33 | } | ||
| 34 | }; | ||
| 35 | {{/code}} | ||
| 36 | ))) | ||
| 37 | |||
| 38 | ; interactionParameters | ||
| 39 | : \\ | ||
| 40 | |||
| 41 | ((( | ||
| 42 | Object that defines the different text elements displayed within the confirmation box. Five variables are available for customization: **confirmationText** - the message to confirm (default value for the English language is //Are you sure ?//), **yesButtonText** - the "yes" button text (or confirm button), **noButtonText** - the "no" button text, **cancelButtonText** - the "cancel" button text, if enabled, and **showCancelButton** - whether to show the cancel button, disabled by default. | ||
| 43 | |||
| 44 | Example : | ||
| 45 | |||
| 46 | {{code language="javascript"}} | ||
| 47 | var myInteractionParameters = { | ||
| 48 | confirmationText: "Are you sure you want to engage the wiki's self-destruction process?", | ||
| 49 | yesButtonText: "Yes, please do that", | ||
| 50 | noButtonText: "No thank you" | ||
| 51 | }; | ||
| 52 | {{/code}} | ||
| 53 | ))) | ||
| 54 | |||
| 55 | = Source Code = | ||
| 56 | |||
| 57 | {{remotecode source="https://raw.github.com/xwiki/xwiki-platform/xwiki-platform-5.4.5/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/confirmationBox.js"/}} | ||
| 58 | |||
| 59 | = Tips = | ||
| 60 | |||
| 61 | Check out the Javascript code: | ||
| 62 | |||
| 63 | * [[for your wiki instance>>http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/confirmationBox.js||rel="__blank"]] | ||
| 64 | * [[from GitHub (for tag xwiki-platform-3.4)>>https://github.com/xwiki/xwiki-platform/blob/xwiki-platform-3.4/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/confirmationBox.js||rel="__blank"]] |
