Archive | NotesIn9 RSS for this section

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.

dGrowl_Enhanced

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.

dGrowlCSS

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});
Advertisements

NotesIn9 Episode 147 – dGrowl in XPages

NotesIn9 episode 147 demonstrates how to implement the dGrowl plugin to add growl-style messages to an XPages application. This provides a nice UI for a different style of message to display to the user and it allows you to set an automatic timeout or display the message until the user closes it. More importantly, the demo shows how to incorporate a Dojo plugin into an XPages application.

I set up a page in my demo application to test it out.

The plugin comes with two message styles: info and error. In my next blog post, I’ll show how to enhance it to add success and warning styles.

NotesIn9 Episode 120 – XPages Data View Control Part 2: Customization

The second part of my two-part video series on the XPages Data View control has been published on NotesIn9. This episode focuses on how to take advantage of the flexibility of the control in order customize the display and add useful features.

Here’s a list of the topics covered in the video:

  • Customized Summary
  • Customized Details
  • Custom Link to Expand/Collapse Details on MouseOver/MouseOut (if details preloaded)
  • Pager Add Rows Control
  • Pager Save State Control
  • Search
  • Multiple Column Layout

NotesIn9: XPages Data Views Part 1 – Implementation

David Leedy has published my screencast on the Data View control in XPages on NotesIn9: Episode 115: XPages Data View Control Part 1 – Implementation

This show gives an overview of the Data View control, including features and drawbacks. It also provides a walkthrough for creating a Data View, covering these features:

  • Summary Column
  • Extra Columns
  • Styling Built in when using OneUI
  • Categorization
  • Icon Columns
  • Adding Pagers
  • Detail Section

In the next part, I’ll cover how to customize the data view and add some great features.

My First NotesIn9 Episode

My first NotesIn9 episode has been posted: Jailbreak Your XPages View Columns

In the episode, I talk about several ways to enhance the output of columns in a view panel, which, by default, just displays text from an underlying view column. Fortunately, there are several options to customize it:

  • Computing a column value with SSJS
  • Passing HTML through a view column
  • Passing JavaScript through a view column
  • Mixing SSJS, HTML, and client-side JavaScript to retrieve back-end data and generate client-side output
  • Hijacking a view column to take complete control of its output

There are demonstrations of hijacking a view column output by displaying an iFrame within a view column as well as rendering a dojo chart within each row, reading data from the underlying documents and using it to generate the chart with client-side dojo code.

The chart uses a custom control, so there is also discussion about using custom control properties as well as using the “#{javascript: }” syntax to evaluate server-side statements into client-side javascript code.

Please take a look and let me know what you think.

And if you’ve ever considered contributing to NotesIn9 — go for it! David Leedy is a pleasure to work with and he provided all the information that I needed to make this happen as easily as possible.