Clearing default af:inputDate error message

This post gives simple idea on clearing the error message on adf components. By default  af:inputDate component having issue while showing the error message for invalid input.

For example : If you give invalid date, a popup message will be shown with error message as shown below. Then again click the datepicker icon to select the date, the error message in the popup will show multiple times. If you click the datepicker 10 times, 10 times same error message will be shown. Look at the below screen,

 

To clear the message shown multiple times, use the below javascript,

    

<af:resource type="javascript">

        function cleardatemsg(evt) {

            var comp = evt.getSource();

            AdfPage.PAGE.clearMessages(comp.getClientId());

        }

   </af:resource>

Note:  
comp.getClientId() - will give the exact component Id. When your application have Template, the component Id will be like this pt1:id1 where pt1 - template Id and id1 - date component Id
evt.getId() -  will give only id1 as component Id even if its inside the template.

Call the javascript method on click event like below,

<af:inputDate label="Label 1" id="id1">

         <af:clientListener method="cleardatemsg" type="click"/>

 </af:inputDate>

Use this line to clear All the error messages in the form

AdfPage.PAGE.clearAllMessages();

For more details about error messages and tips, go through this link  http://docs.oracle.com/cd/E17904_01/web.1111/b31973/af_message.htm

Customizing Ok and Cancel button of af:inputListOfValues component

 This post gives the idea on how to customize the ok and cancel buttons in the af:inputListOfValues component. Download sample

af:inputListOfValues basically will be popup with dialog included in that. Since its a framework component we don't have direct access to those dialog and popup components. Still in the lov component we have launchPopupListener() and returnPopupDataListener() where will miss the control for Cancel button, and returnPopupDataListener() will call only if you select the value from the listofvalues. Sometime we may need to customize the ok or cancel buttons for the requirement.



 Find the below simple flow diagram between jsff page and backing bean.




  1. Attach an lov to any view object and drag drop it in jsff page.
  2. Add component binding and lov launchPopupListener method to the backing bean.
  3. Add server listener in the page, lets say inside af:form and outside of lov component.


 4. On launch of lov , it will call the launchListener in the backing bean in turn will call the server listener in jsffpage with javascript using ExtendedRenderKitService, so that it executes serverlistener method. check the code snippet below,





 5. Inside the serverListener method, you can get the dialog component like below

 

 6. Once we get the Dialog component of lov popup, we can do anything with code control. same way use ButtonBar facet to add our custom buttons, and hide the default ok cancel buttons with dialog.setType("none");


 7. After this, run and check.. your lov will appear with customized ok and cancel button and ensure the call goes to corresponding actionliseteners in the backing bean.


 Since we customized the buttons, click ok after selecting the rows in the lov, it won't set the values to the lov field.. we have to get the current row of the lov view object and set to the current row to the lov field.


 Download the sample app here.
 (this app used HR schema - XE database)

 Feel free to comment if anything wrong and not clear.