Adding New Message Styles to dGrowl

In NotesIn9 episode 147, I demonstrated how to implement the dGrowl Dojo plugin in XPages. The plugin comes with two message styles: info and error. In this post, I’ll show how to enhance it to add success and warning styles.

Take a look at the live demo page to see these in action.

In order to add a new message type, all you have to do is add a few lines of CSS to define the new message style and update the dGrowl object creation code to add the new channel.

Adding New Message Styling

This starts with the assumption that you have already implemented the dGrowl plugin in your application, as shown in the NotesIn9 video.

You’ll need to go through Package Explorer to locate the stylesheet, since it’s part of the plugin files installed under the WebContent folder.

Open dGrowl.css and add rules for additional message styles.

Here’s an example that I set up by copying the .dGrowl-channel-error block styling. I changed the class name and updated the color scheme (based on the OneUI message styling).

/* 'Warning' Channel */
.dGrowl-channel-warning .dGrowl-notification {
  background-color: rgb(255, 255, 188);
  border: 1px solid rgb(246, 230, 146);
}

/* 'Confirmation' Channel */
.dGrowl-channel-confirmation .dGrowl-notification {
  background-color: rgb(236, 249, 223);
  border: 1px solid rgb(200, 226, 184);
}

Adding the New Message Channel

In the script block that instantiates the new dGrowl object, just add two additional channels and define the position number to order them.

<script type="text/javascript">
  var dg = new dGrowl({'channels':[
    {'name':'error', 'pos':1},
    {'name':'warning','pos':2},
    {'name':'confirmation','pos':3},
    {'name':'info','pos':4}
  ]});
</script>

The key is that the channel name must match the end of the class name in the CSS. (For example: .dGrowl-channel-confirmation styling will be used by the channel named confirmation) If the names don’t match, then your message will get the default (info) message styling.

Now the channels are set up and ready for messages.

dg.addNotification('Warning Message',{'channel':'warning', 'sticky':true});]]>
dg.addNotification('Confirmation Message',{'channel':'confirmation', 'sticky':true});