Standard components / ConfirmableButton

Try a working example of ConfirmableButtonComponent and then see the code for the example.

This component is kind of a small extension on ButtonComponent in that it acts almost exactly the same except that it publishes the click_and_confirm event if the user confirmed his action in a modal window dialog after actually clicking the "Yes" button, and click_and_deny event if user clicked the "No" button or otherwise closed the modal dialog window.

To make use of it, you only need to make a few changes to your original button html element, specifying data-component-class="ConfirmableButtonComponent" and what the message in the modal window should say.

Clicking this button will create and show an instance of the DialogWindowComponent (you should have a template for it somewhere in your html page). This is demonstrated in the short video below:

The buttons in the modal window are always going to say "yes" and "no", but the component attempts to fetch the I18n translation by calling t("_yes") and t("_no"), so if you have those keys in your I18n set of keys, then they will be used (underscore before the key is necessary, because YAML interprets yes and no strings as keywords).

This isn't actually flexible enough, so expect to soon be able to set dialog window confirmation buttons text by specifying certain html-attributes in the ConfirmableButtonComponent html element.