Sample BSV: Notifications

hpl123

Hi all,
Here is a sample BSV implementing custom notifications in an Aware IM app (using the new AWESOME EXEC_SCRIPT action).

The sample shows 2 types or notifications, 1 notification bar and 1 notification shown in the middle of the screen and this is only a sample and you can basically customize it however you want and the sample will be a good starting point. PS: I haven´t looked at the quality of the code i.e. the CSS and JS and not looked to see if it interferes with other Aware IM CSS/JS so test it thoroughly before implementing it in a live app.

Just import the BSV, place in testing mode and log on. Press buttons "Notification bar" and "Notification" in top bar (these execute processes that execute the scripts).

Notification bar:

Notification:

Enjoy 🙂.

Notifications.bsv.zip

35.82kB

Notifications.bsv.zip

35.82kB

weblike

Henrik,
great job
thx for sharing this....

tford

This will be helpful .. thanks Henrik!

hpl123

Update: Another notificaiton added, this time "inpage" i.e a notification shown inpage (above all else on page) for 5 seconds and then the notification is removed. With this solution you also have 4 different alertboxes with different icons and colors (see the "NotificationInPage" content panel for more info):

You need to place the "alertboxes" folder in the AwareIM folder for the icons to show.

Notifications2.zip

40.03kB

Notifications2.zip

40.03kB

hpl123

hpl123 wrote
Update: Another notificaiton added, this time "inpage" i.e a notification shown inpage (above all else on page) for 5 seconds and then the notification is removed. With this solution you also have 4 different alertboxes with different icons and colors (see the "NotificationInPage" content panel for more info):

[attachment=1]3.png[/attachment]

You need to place the "alertboxes" folder in the AwareIM folder for the icons to show.

If the code in the SystemSettings.NotificationInpage (initial value) is empty, here is the code you should use and you can change this code to change alertbox type (see NotificationInPage content panel):

$( ".append" ).append( '<div id="append" class="alert-box2 success2"><span>success: </span>Write your success message here.</div>' );setTimeout(function(){$("#append").remove();},5000);

eyles

This is super helpful !! amazing work.

Looking into custom notifications and EXEC_SCRIPT

Would it be hard to implement something like this ? http://alertifyjs.com/notifier/success.html

hpl123

Yeah, the EXEC_SCRIPT is a gamechanger 🙂. and a lot of new, cool things can now be done.

Regarding alertify, yes, this should be fairly easy to implement as well. Just follow the instructions on the "Get started" page (to include the alertify source files) and then call the function (s) via EXEC_SCRIPT:

alertify.success('Success notification message.');

eyles

Thats what i was missing !! trying to include the source files ! thankyou 😃

PointsWell

Was wondering if you ever got this to work?

I've included the JS and the CSS to the startup.html but I can't get it to call properly

weblike

PointsWell wrote
Was wondering if you ever got this to work?

I've included the JS and the CSS to the startup.html but I can't get it to call properly

Hi,

Have you tried to copy the JS&CSS files in the following folders?
c:\AwareIM\Tomcat\webapps\AwareIM\Custom\CSS\your_bsv_name
c:\AwareIM\Tomcat\webapps\AwareIM\Custom\JS\your_bsv_name

PointsWell

weblike wrote
Have you tried to copy the JS&CSS files in the following folders?

it would appear that sctipt and script look very similar on a terminal screen - doh!