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!
Nice approach. I use Growl also in my XPages apps. User are used to it. In my case I wrote a small phase listener who intercept the FacesMessages and create Growl messages.
May be I should blog about it 😉
LikeLiked by 1 person
Thanks, Frank. Please do blog about using a phase listener. That is definitely something I’m very interested in.
LikeLike
Hi Michael,
Is there a way to have this load a page and then display?
ie, when saving a document has completed, it returns the user back to the main view and on the view page display the alert “Document Saved” for example?
I get Invalid component id ccAlertServer for partial refresh, which is obviously because the custom control is not on the page I am executing the script from, even though I have put the execute script action after the Open Page action….
LikeLike
What you might try doing is putting the alert on your view page and then after saving your doc (and before the open page action) populate a request scope var. So whatever you put in the alertName property of your custom control – for example “myAlert” – this is what you would use as your requestScope var – requestScope.put (“myAlert”, alertOptions).
LikeLike
[…] was triggered by the blog entry of Michael Smith about BootAlert share my code I am using currently in some XPages […]
LikeLike
I’m trying to download the bootAlert database, but it’s giving “Can not access this site” error. thanks
LikeLike
HI Maria. I am in the process of moving some things around. This is a link to the zip file on my dropbox. See if this works for you. https://www.dropbox.com/s/qasytz3v9nbwvvc/bootAlert1.0.zip?dl=0
LikeLiked by 1 person