Hide Icon and Heading of FacesMessage using ADF Skin

 Recently a developer asked me about how to hide the icon and heading of FacesMessage. So here I am posting a small CSS that does the trick.

Previously I have posted about resizing FacesMessage and skinning ADF Dialog component inside the popup, You can check these posts for more details about skin selectors

Check How to Show FacesMessage in Oracle ADF?

By default, Error FacesMessage in ADF Application looks like this

Now create a Skin in view controller project and write this simple piece of CSS. This CSS basically hides the header part of dialog that is used in creating FacesMessage.

1. af|dialog::header, af|dialog::header-end, af|dialog::header-start {
2. display: none;
3. }

and FacesMessage looks like this

That's All

Cheers 🙂 Happy Learning

Check for dirty (Uncommitted) data of current view port (page) on a button click or any event in ADF

Sometimes we need to check for uncommitted data on page and perform actions according to that, Suppose there is a button to navigate to another page but only if there is no uncommitted data in current page
We can use uncommitted data warning property of af:document to show an alert dialog but in that way, we can't execute our custom logic

Previously I have posted about checking dirty data of a transactional data control but in that, we need to check that for each data control separately that is rendering on page

Resize FacesMessage, Change look n feel of Message Box using ADF Skin

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel

Show message (Invoke FacesMessage) using JavaScript in ADF Faces

Hello all

This post is about use of JavaScript in ADF Faces to show a simple message notification , it may be error/warning/information/critical error message

so this is simple, as we have to just invoke default FacesMessage using JavaScript

So for this i have used an af:inputText on page and use case is that this field should only take characters

How to validate characters (alphabet) only  using javascript ?

So for this i have taken a simple regular expression that check that entered value is alphabetic or not
see this JavaScript function that is added to page, here it1 is the id of inputText for that FacesMessage is invoked, i am using Jspx page so i use actual id of component, if you try this in region,dynamic region or inside pageTemplate then check and change the id of component .
It will be something like r1:0:it1 or pt1:0:it1, because that is nested page structure.
you can get this id using componentBinding.getClientId();

 <af:resource type="javascript">
              function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();

                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problem
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }
            </af:resource>

Added a clientListener to inputText that executes this JavaScript function on keyPress event

Run page and see how it works-
Here you see that 2 is not a character so it showing error message as FacesMessage is defined for TYPE_ERROR

So it's done but now problem is - when user input a wrong value a error message is displayed and after this validation alert if user keeps entering wrong values then every time a new FacesMessage is created and added to page, It appears on page like this (duplicate messages - really weird)

To remove additional messages , i have added one more line in JavaScript to clear previous validation message

JavaScript to clear validation message-

 // Clear all validation message 
              AdfPage.PAGE.clearAllMessages();

now JavaScript function is like this

function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();
                  // Clear all validation message 
                  AdfPage.PAGE.clearAllMessages();
                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problme
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }

and yes you can change type of message, use TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change message type

see different output-
Warning Message (TYPE_WARNING)-

Informational Message (TYPE_INFO)-

Fatal Error Message (TYPE_FATAL)-

Thanks Happy Learning :)

How to change default icons (info, Error, Warning) of FacesMessage and af:messages in Oracle ADF

Hello all
this post is about customizing or changing default icons of FacesMessage , it is very basic but sometimes it's hard to do easy things
if we need to use alternate icons in af:messages or in programmatic FacesMessage, so to do this just create a small ,simple CSS file (ADF Skin) in viewController project and use this code

Change url as per your icon image path, you can also define same for Fatal Error and Confirmation icon also

af|messages::info-icon
{
  content: url("../../information.png"); 
}

af|messages::warning-icon
{
  content: url("../../warning.png"); 
}
af|messages::error-icon
{
  content: url("../../error.png"); 
}

apply this skin to project and run your application to see changes

Default Icon	Changed Icon

Happy Learning :)

ADF Basics : How to use FacesMessage to show multiline message

FacesMessage component is used to show confirmation, warning or informational message in Oracle ADF .In this tutorial, you will see that how to use FacesMessage component to show Multiline Message. Sometimes we need to show multilines message then how we implement this ?

this is same as FacesMessage implementation, you should know that af:messages support HTML formatting, so we use HTML formatting to show multiline messages
see more about FacesMessage -



http://www.awasthiashish.com/2012/10/show-facesmessage-in-oracle-adf.html
about inline message
http://www.awasthiashish.com/2012/10/show-inline-message-in-oracle-adf.html

Managed bean code to show multiline message in ADF using FacesMessage-

    package multilineMessages.view.bean;
     
    import javax.faces.application.FacesMessage;
    import javax.faces.context.FacesContext;
    import javax.faces.event.ActionEvent;
     
    public class MultilineMessageBean {
        public MultilineMessageBean() {
        }
     
        public void showMessage(ActionEvent actionEvent) {
            StringBuilder message = new StringBuilder("<html><body>");
            message.append("<p><b>Hi This is Frist Line--Oracle ADF Message</b></p>");
            message.append("<p><i>Hi This is Second Line--Oracle ADF Message</i></p>");
            message.append("<p><b>Hi This is Third Line--Oracle ADF Message</b></p>");
            message.append("</body></html>");
            FacesMessage fm = new FacesMessage(message.toString());
            fm.setSeverity(FacesMessage.SEVERITY_INFO);
            FacesContext fctx = FacesContext.getCurrentInstance();
            fctx.addMessage(null, fm);
        }
    }

To use for Error and Warning just change FacesMessage.SEVERITY_INFO to SEVERITY_ERROR or SEVERITY_WARN.
It will look like this
You can change your Message accordingly

 you can also use some html styles (CSS) to change color of text that appears in message body , see the changed code

    public void showMessage(ActionEvent actionEvent) {
        StringBuilder message = new StringBuilder("<html><body>");
        message.append("<p style='color:navy'><b>Hi This is Frist Line--Oracle ADF Message</b></p>");
        message.append("<p style='color:green'><i>Hi This is Second Line--Oracle ADF Message</i></p>");
        message.append("<p style='color:magenta'><b>Hi This is Third Line--Oracle ADF Message</b></p>");
        message.append("<p style='color:red'><b><i>This is Fourth line--Oracle ADF Message</i></b></p>");
        message.append("</body></html>");
        FacesMessage fm = new FacesMessage(message.toString());
        fm.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext fctx = FacesContext.getCurrentInstance();
        fctx.addMessage(null, fm);
    }

now see the FacesMessage look like this-

Happy Learning :-) Download Sample App

Iterating ViewObject vertically (get all attributes of ViewObject) programmatically

Hello All,
This post talks about a requirement of getting all attributes (column names) of a viewObject programmatically

• Create a fusion web application and business component using department table

• you can see all attributes in  Departments entity object

• Now to get ViewObject's attributes name , there is a method written in AMImpl class , see it, i have added a facesMessage to show all names on a Message Board





    /**Method to get all attributes of a viewObject
     * */
    public void iterateVoVertically() {
        ViewObjectImpl vo = this.getDepartments1();
        ViewAttributeDefImpl[] attrDefs = vo.getViewAttributeDefImpls();
        int count = 0;
        StringBuilder infoMsg =
            new StringBuilder("<html><body><b><p style='color:red'> Attribute of Department ViewObject are-</p></b>");
        infoMsg.append("<ul>");


        for (ViewAttributeDefImpl attrDef : attrDefs) {
            byte attrKind =
                attrDefs[count].getAttributeKind(); //checks attribute kind for each element in an array of AttributeDefs
            if (attrKind != AttributeDef.ATTR_ASSOCIATED_ROW && attrKind != AttributeDef.ATTR_ASSOCIATED_ROWITERATOR) {
                String columnName = attrDef.getName();
                infoMsg.append("<li> <b>" + attrDef.getName() + "</b></li>");
                System.out.println("Column Name-" + columnName);
            }
        }
        infoMsg.append("</ul><br>");
        infoMsg.append("</body></html>");
        FacesMessage msg = new FacesMessage(infoMsg.toString());
        msg.setSeverity(FacesMessage.SEVERITY_INFO);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }



• I have called this method through page binding and AM Client on a button of page

• now on click of button all attributes of Departments ViewObject are shown in FacesMessage, you can use it in your code

 Cheers :-)

ADF Basics: Show FacesMessage in Oracle ADF

How to use FacesMessage in ADF

FacesMessage is used to show confirmation, warning, information .In this tutorial, you will see that how to use FacesMessage to show any information, warning or any error. Suppose you want to show a confirmation when you save your records, here we use FacesMessage.

Managed Bean Code to use FacesMessage(Information)-

      FacesMessage Message = new FacesMessage("Record Saved Successfully!");   
      Message.setSeverity(FacesMessage.SEVERITY_INFO);   
      FacesContext fc = FacesContext.getCurrentInstance();   
      fc.addMessage(null, Message);   

To use for Error and Warning just change FacesMessage.SEVERITY_INFO to SEVERITY_ERROR or SEVERITY_WARN.
It will look like this

You can change your Message accordingly

ADF Basics: Show inline Message in Oracle ADF

When we use any technology sometimes we need to show an alert message or warning or confirmation.

In Oracle ADF we use Faces Message same as JSF.

In this tutorial I am showing you that how to implement inline FacesMessage .

Those who are familiar with Oracle ADF can create basic architecture of MVC.

So follow these steps

• Create a Fusion Web Application in Jdeveloper(IDE)
• Now in ViewController create new Page.
• Simply drag a CommandButton from Component Palette to page
• and Write this code on button

public void showMessageButton(ActionEvent actionEvent) {
 FacesMessage msg=new FacesMessage("This is an inline FacesMessage");
 msg.setSeverity(FacesMessage.SEVERITY_FATAL);
 FacesContext fctx=FacesContext.getCurrentInstance();
 fctx.addMessage(null, msg);
 }

• It will work as FacesMessage
• Now drag a af:messages component in page from Component Palette
  
  
  
  
  
• Select af:messages and go to property inspector and set Inline-true
  
  
  
  
  
• Now run your page and click on button , it will look like this
  
  
  
  
  
• This is how we show inline alert in Oracle ADF