Better UI -Show jQuery notification message (for error, warning, info) in Oracle ADF

Sharing is Caring

Hello all,
Another post about using jQuery notification with ADF Faces, this post is about showing a notification message using jQuery in your ADF Application
Normally we use default FacesMesage to show error, warning and info messages in ADF

here I am using jQuery growl library, you can download files from Growl: jQuery Informative Messages Plugin

Let’s see how to integrate this library with ADF Faces, you will get two files from above link
one is JavaScript file (jQuery script) and another one is CSS file (style-sheet for notification UI)

Add both files to the viewController project under Web Content

now add reference of both files (JS and CSS) in the page and also the jQuery library to execute growl script

 <af:resource source="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="javascript"/>
            <af:resource source="js/jquery.growl.js" type="javascript"/>
            <af:resource source="style/jquery.growl.css" type="css"/>

Now I have added 3 buttons on the page to show different messages on button click and created a managed bean to define an action for each button
On button click, I have called jQuery script to invoke notification message
see managed bean code-

import javax.faces.context.FacesContext; 

import javax.faces.event.ActionEvent;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;

public class ShowJqNotification {
public ShowJqNotification() {
}

/**Helper method to execute javascript
 * @param script
 */
public void calljqHelper(String script) {
FacesContext context = FacesContext.getCurrentInstance();
ExtendedRenderKitService erks = Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
erks.addScript(context, script);
}
//Change your message as per requirement
/**Method to invoke Error Message
 * @param actionEvent
 */
public void showErrMessageAction(ActionEvent actionEvent) {
calljqHelper("$.growl.error({ message: "Hi this is error message!" });");

}

/**Method to invoke Warnign Message
 * @param actionEvent
 */
public void showWarningMessageAction(ActionEvent actionEvent) {
calljqHelper("$.growl.warning({ message: "Hi this is Warning!" });");
}

/**Method to invoke Info Message
 * @param actionEvent
 */
public void showNoticeMessageAction(ActionEvent actionEvent) {
calljqHelper("$.growl.notice({ message: "Hi this is Notice!" });");
}

}

All done, now run the application and check – how it looks πŸ™‚

this is default look of the script, you can customize it, just change some parameters in both JS and CSS files
I have changed some parameters in both files and see how it looks now

Cheers, Happy Learning πŸ™‚
Sample ADF Application- Download

Read more about – Jquery and ADF Working together

Image zoom (power zoomer) effect using Jquery in ADF Faces
Show animated Image Caption using jQuery in ADF Faces
Using JQuery in Oracle ADF

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “Better UI -Show jQuery notification message (for error, warning, info) in Oracle ADF”

Leave a Reply

Your email address will not be published. Required fields are marked *