Boot your alerts in the … with bootAlert

Unfortunately, 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

bootAlert can be triggered from server-side js with view.postScript()

bootAlert let’s you add Bootstrap Growl messages to your application

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!