Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label hide. Show all posts
Showing posts with label hide. Show all posts

Wednesday 28 June 2017

Hide values from ADF SelectOneChoice using EL expression on UI


This post is about a specific requirement that is to hide some values from adf based select one choice from UI
Previously I have posted about disabling some items from select one choice and this post uses same steps to hide values from lov

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

Sunday 19 January 2014

Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Hello All,
Hope all are doing good, this post talks about skinning inputListOfValues to hide its search icon (magnifying glass)
we can use the auto-suggest feature in inputListOfValues so if we don't want to display that default search icon then what to do?

  • inputListOfValues looks like this in ADF Faces
  •  I have created a page and dropped 2 inputListOfValues on page




  •  there is 2 types of requirement about hiding search icon
    1. Hide icon of all inputListOfValues(LOVs) available on page or application
    2. Hide icon of some selected fields
  • to do this we have to create a CSS (skin) in application
  • give relevant name of CSS file and set this file as default skin of application



  • Now to hide icon of the selected inputListOfValues component in an application, go to the source of CSS file and just write this code
     

  • .TagSearchIconHidden af|inputListOfValues::search-icon-style
    {
    display: none;
    } 
    

  • Now go to the page and paste TagSearchIconHidden in StyleClass property of lov component to hide its icon, run your page and see, I have done this in my first LOV

  •  Now to hide icons of all lov component just change CSS file with this script

  • af|inputListOfValues::search-icon-style
    {
      background-image: none; 
    }
    

  • Now no need to set StyleClass, it is applicable to all lov components of the application
 Cheers :-)