What is bootAlert?

bootAlert was developed as a simple XPages custom control that extends the standard Bootstrap alert into a configurable, reusable alert that can be triggered from server or client-side JavaScript.

bootAlert.nsf contains:

  • Bootstrap 3.2.0
  • Font Awesome 4.1
  • jQuery 1.11
  • ccBootAlert custom control
  • bootAlert.js
  • sample.xsp

Key Features


The buttons below all use the same bootAlert custom control and display it in different ways by customizing on the fly.

Display bootAlert by calling client-side code from server-side javascript with view.postScript(). The advantage of this is when the alert is not part of a partial refresh targert.

Change the margins, padding, font, etc. of the alert with css.

Using bootAlert

Whether intiated from server or client-side, bootAlert requires two parameters:

alertNamestring : Should be the same value provided in thealertNameproperty on the ccBootAlert custom control
bootAlert propertiesobject | string : See the table below for an overview of each property

The properties below must be provided as a js object or as a json string:

alertTypestring : should be one of the default Bootstrap alert classes: success, info, warning, danger
alertIconstring (optional) : Font Awesome icon to be displayed. e.x. 'fa-bell' or 'fa-bell fa-lg'
autoCloseboolean (optional) : defaults to false : If true, the alert will fade out automatically
growlboolean (optional) : defaults to false : If true, alert will be display in the top right corner, similar to a mac "growl" message

Add the custom control to your page and provide a value for'alertName'

<xc:ccBootAlert alertName="alertDemo2" id="ccBootAlertDemo2"></xc:ccBootAlert>

Method 1 - server-side js using requestScope

When calling bootAlert from server-side js, the parameters must be placed in a requestScope variable that matches the alertName parameter of the ccBootAlert custom control:

// 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";

Method 2 - server-side js calling client-side js with view.postScript()

When calling bootAlert using view.postScript, the parameters need to be serialized:

// Server-side js
// The alert custom control does NOTt need to be part of a partial refresh target 
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) + ")");

Method 3 - call bootAlert with client-side js

When using this method, the bootAlert object does not have to be serialized...

// 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"

but it can be:

// 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"

You don't have to create an object ... you can provide the parameters inline:

bootAlert.show('alertDemo2',{title:"Client-side",body:"This alert is being generated by client-side javascript",alertType:"danger",alertIcon:"fa-calendar fa-lg"});

How to add bootAlert to your application

Download the sample database

Copy ccBootAlert custom control to your database

Copy bootAlert client javascript library to your database

Add the bootAlert script library to your theme, as resource on your page, or copy the bootAlert object into your existing client-side script library

Refer to examples on sample.xsp for creating a bootAlert in your application