Posted by Getting Started
Bootbox.js is a small JavaScript library that allows you to add amazing dialog boxes using Bootstrap modals, without having to do any of the work.
You can either include Bootbox in your own library, build a new one from the download or if you’d like a pre-made ClientLib including Bootbox, you can download and install the package from here:
https://downloads.files.forms.life/files/Bootbox.js-ClientLib-5.4.0.zip
Usage
Once installed, you will find the Bootbox client library under /etc/clientlibs/bootboxjs540 with the category defined as “bootboxjs540”.
Open the Adaptive Form that you wish to add dialog boxes to (honestly, this will likely be every AF from now on).
Open the Adaptive form container and enter “bootboxjs540” into the Client Library Category. If you need to add multiple libraries, these can be separated by a comma.
If you preview the form immediately following this addition, you should see the library as part of the downloaded assets in your network debugger.
Now for the easy part. Bootbox is now available for use throughout your form.
Create a button on your form and add this code to your click event.
bootbox.alert("This is the default alert!");Preview the form, click on your button, and you should see the Bootbox dialog box generated.
You will find that most of the examples provided on http://bootboxjs.com/examples.html will run nicely within your form. There are some dependencies with the date and time examples but other items will work well. Note that you may have to tweak the styles to suit your requirements.
Some of the most impressive use cases are the “Prompt with…” series of examples. You can use these dialogs to interact with your users throughout your form asking them for additional details or selections that may be more appropriate in a popup than directly inside your form. They can also be used as “wizards” for questions that may require a single response but you feel you need to provide more guidance to the user to provide a correct answer.
If you have a tendency to use a Reset button on your forms without code changes, the reset button will immediately erase your user input without any further prompts.
I suggest you make this your new default reset button code:
bootbox.confirm({
title: "Reset form?",
message: "Do you want to reset this form and erase all the data you've entered so far? This cannot be undone.",
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check"></i> Confirm'
}
},
callback: function (result) {
if(result){
guideBridge.reset();
}
}
});This will provide your users with a chance to either cancel or clear their form.
Resources
Client library with form sample: https://downloads.files.forms.life/files/Bootbox.js-ClientLib-5.4.0-and-Adaptive-Form-Sample.zip
Complete Documentation: http://bootboxjs.com/documentation.html
Forms.life 