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 :-)

Creating new object in list (af:inputListOfValues) using 'createPopupId' feature- ADF 11g & 12c

Hello All ,
This post is about a good feature provided with inputListOfValues in ADF .
inputListOfValues is used where large and complex data is populated in list, this component supports search in list values
Suppose on opening list values you want to add one more value in list generally to do that you will  close the list and add a value in source table then again open list but this feature provide instant creation of list values

this functionality can be achieved in Combo Box with List of Values using customActions facet, i have posted about it
Create new look up data using List of Values (LOVs) in Oracle ADF

so this time it is about  inputListOfValues, see the steps to do

• Created a fusion web application and business components  using Departments and Employees table of HR Schema

• now i have created list of values on DepartmentId of Employees ViewObject referenced from Department ViewObject, display type is Input Text with List of Values

•  drop Employees VO on page and run, it looks like this

• Now i have dropped a popup on page and to create new value in list, i have dropped form of Departments ViewObject and a link to create it on dialog inside popup
   
  


• select list of values component (Employee VO) in structure window and go to property inspector and set popUp id in a property called 'createPopupId'

• After setting 'createPopupId' ,on running a commandToolbarButton appears in the LOV popup dialog box with a icon, this button's action triggers custom popUp (i have added before)

        on clicking on this icon-

•  on create link i have just called createInsert for Departments ViewObject and on dialogListener , Execute



import oracle.adf.model.BindingContext;
import oracle.binding.BindingContainer;
import oracle.binding.OperationBinding;



    /**Method to get Bindings of current page
     * @return
     */
    public BindingContainer getBindings(){
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**Method to execute OperationBinding
     * @param operation
     * @return
     */
    public OperationBinding executeOperation(String operation){
        return getBindings().getOperationBinding(operation);
    }

    /**Method to create new Department
     * @param actionEvent
     */
    public void createDeptAction(ActionEvent actionEvent) {
       executeOperation("CreateInsert").execute();
    }



• now created a new department using 'create' link and you can see value is appeared in list values

 Cheers :-)

Cool Feature- Using 'Placeholder' to set watermark hint on empty input fields in ADF/Jdeveloper 12C

Hello All,
This post talks about a very cool feature , introduced in ADF/Jdeveloper 12C.
Sometimes we need to set some hint on input fields as you can see in facebook sign up form, all fields are self descriptive

So now we can do that in ADF faces easily , in 12C there is a property named 'Placeholder' to define hint for empty fields
You can see in below form (ADF Faces)-

See the xml source of this simple form-

 <af:panelFormLayout id="pfl1">
                    <f:facet name="footer"/>
                    <af:inputText label="Country" id="it1" placeholder="Enter Country Name"
                                  contentStyle="width:200px;color:red;"/>
                    <af:inputDate label="Date" id="id1" placeholder="Select Date"
                                  contentStyle="width:200px;color:red;"/>
                    <af:inputListOfValues label="Country" popupTitle="Search and Result Dialog" id="ilov1"
                                          placeholder="Select Country" contentStyle="width:200px;color:red;"/>
                    <af:inputComboboxListOfValues label="Country" popupTitle="Search and Result Dialog" id="iclov1"
                                                  placeholder="Select Country" contentStyle="width:200px;color:red;"/>
                    <af:inputNumberSpinbox label="Value" id="ins1" placeholder="Enter Or Select"
                                           contentStyle="width:200px;color:red;"/>
                </af:panelFormLayout>

Cheers :-)