Examples

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:

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

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";
requestScope.put("alertDemo2",o);

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"
bootAlert.show('alertDemo2',o)

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"
bootAlert.show('alertDemo2',JSON.stringify(o))

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