Boot your alerts in the … with bootAlert
Posted: February 10, 2015 Filed under: Bootstrap, XPages | Tags: Bootstrap, Custom Controls, jQuery, XPages 7 CommentsUnfortunately, due to the sudden illness and ultimate passing of a family member in the fall, it has been quite a while since I last blogged. Hopefully, this post finds me getting back on the blogging horse to contribute some content to the Xpages/Domino community and bring some ideas I had been kicking around to fruition.
Today I am releasing bootAlert, a simple XPages custom control that allows developers to add configurable, reusable Bootstrap alerts to their apps without having to add any additional plugins. You should already be using Bootstrap/jQuery in your application in order to use this custom control.
For the past few months, in working on our application migration project, I built a configurable Bootstrap alert custom control. I found myself continuing to add features as different needs arose. So, I thought I would release it to the community.
Why bootAlert?
- bootAlert can be triggered from both server and client-side Javascript
- bootAlert can use Font Awesome icons
- bootAlert can be turned into a Growl-like message on-the-fly
- bootAlert is dynamically configurable – one action may require the
'success'
class and another may require a'warning'
or'danger'
notification. One control can be used to display all three. - bootAlert can be customized with css
- Add as many bootAlert controls to your page as you want
Demo
I plan on submitting this as an OpenNtf project, but for now you can find a demo, as well as download bootAlert here
A github repo can be found here.
Getting Started
Getting started with bootAlert is easy. Simply:
- Download the demo database
- Copy the custom control and script library into your application (or copy the contents of the script library into your existsing client-side script library)
- Drag the custom control onto your xpage and populate the
alertName
property
<xc:ccBootAlert alertName="alertDemo2" id="ccBootAlertDemo2"></xc:ccBootAlert>
- Call bootAlert from client-side js …
// Client side js var o = {} o.title = "Client Side"; o.body = "This alert is being generated by client side javascript"; o.alertType = "danger"; o.alertIcon = "fa-calendar fa-lg" bootAlert.show('alertDemo2',JSON.stringify(o))
- or call bootAlert from server-side js by putting a value into a requestScope variable and making sure the bootAlert control is part of the partial refresh target:
// Server side js // This method assumes the alert is part of a partial refresh target var o = {}; o.title = "Server Side"; o.body = "This alert is being generated from ssjs"; o.alertType = "info"; // The requestScope var name should match the alertName given to the bootAlert control requestScope.put("alertDemo2",o);
- Finally, you can use view.postScript() to trigger a bootAlert:
// Server side js // The alert custom control does NOT need to be part of a partial refresh target // The parameters being passed to bootAlert need to be serialized var o = {} o.title = "Server Side > Client Side"; o.body = "This alert is being triggered by client side js called from server side js"; o.alertType = "warning"; o.autoClose = false; view.postScript("bootAlert.show('alertDemo2'," + toJson(o) + ")");
I hope others find this control as useful as I have in my projects!