Follow by Email

Monday, 10 April 2017

ADF Basics| Tip to Hide af:inputListOfValues search popup at runtime

Hello All

Previously I have posted about a requiremnt of  hiding af:inputListOfValues search icon using CSS
ADF Skinning | Hiding search icon of af:inputListOfValues using CSS & StyleClass

In that solution search icon doesn't appear on page but it is a part of JSF component tree so when user press TAB+SPACE after entering a value in lov component then search popup appears on screen as this action invokes search icon click event

Recently a Friend of mine came across another requirement that was not showing lov popup at all as only autoSuggest behavior was required , so for this first way is to use autoSuggest behavior in an af:inputText compoent using Lov bindings and second way is to short circuit component life cycle



Suppose you have created lov on department name attribute

Enter some value and press TAB+SPACE



LOV search popup appears with some results 

Now to short-circuit JSF life cycle we'll use

FacesContext.getCurrentInstance().responseComplete();

responseComplete indicates that you have already handeled the response and JSF need not to reponse and lifecycle will skip to response as soon as current processing ends and final view of page is created as per JSF component tree

So create launchPopupListener method for LOV in managed bean and write this single line of code

af:inputListOfValues XML source on page


<af:inputListOfValues id="deptNameTransId"
                                      popupTitle="Search and Select: #{bindings.DeptNameTrans.hints.label}"
                                      value="#{bindings.DeptNameTrans.inputValue}"
                                      label="Department"
                                      model="#{bindings.DeptNameTrans.listOfValuesModel}"
                                      required="#{bindings.DeptNameTrans.hints.mandatory}"
                                      columns="#{bindings.DeptNameTrans.hints.displayWidth}"
                                      shortDesc="#{bindings.DeptNameTrans.hints.tooltip}"
                                      launchPopupListener="#{viewScope.InputLovBean.lovLaunchPopupListener}"
                                      autoSubmit="true" contentStyle="width:300px;font-weight:bold;padding:2px;">
                    <f:validator binding="#{bindings.DeptNameTrans.validator}"/>
                    <af:autoSuggestBehavior suggestedItems="#{bindings.DeptNameTrans.suggestedItems}"/>
                </af:inputListOfValues>

LaunchPopupListener code in managed bean


    /**Mehtod to handle launchEvent of Lov Popup
     * @param launchPopupEvent
     */
    public void lovLaunchPopupListener(LaunchPopupEvent launchPopupEvent) {
        //responseComplete indicates that you have already handeled the response 
        //and JSF need not to reponse and lifecycle will skip to response as soon as 
        //current processing ends and final view of page is created as per 
        //JSF component tree
        FacesContext.getCurrentInstance().responseComplete();
    }

Cheers :) Happy Learning

6 comments :

  1. Thanks for posting it,it works!!

    ReplyDelete
  2. Hi Ashish thanks for your blog its perfectly working af:inputListOfValues but if we use this af:inputComboboxListOfValues when we click on the down arrow it was preventing the popup to show the list of values is there any option to achieve same functionality in af:inputComboboxListOfValues.

    any have thanks for your perfect bloging.

    ReplyDelete
    Replies
    1. Hi Raja Sekhar

      What is your requirement exactly ?
      In combo box search link is at last of list values to you need not to override any functionality
      Anyway you can check this ADF Skinning : Remove "search" or "more" link from af:inputComboboxListOfValues in ADF Faces

      Ashish

      Delete
    2. Hi Ashish

      Thanks for your reply i want to prevent separate search window when i enter some text and press tab button on af:inputComboboxListOfValues component, your solution is perfectly working and its suggesting auto suggested values. But now my problem is when we click on down arrow am not getting list of values its miss behaving... I hope you got my point am unable to share screen shot.

      and i followed your post to hide search and more links. i need to prevent search window when press tab on af:inputComboboxListOfValues.

      Delete
    3. After completing response phase JSF lifecycle ends so it is not opening list of values and why are you doing this for combo box lov ?
      As in combox tab+enter problem occurs only when list of values is opened
      Stll if you have to achieve this then my suggestion is to use inputText with autoSuggestion

      Ashish

      Delete