ADF Basics: Disable user input in af:inputListOfValues

Sometimes we need to disable user input in input Lov as there is requirement of selecting value only from Lov popup

By default af:inputListOfValues provides feature to select value from popup or type a value as input

To disable user input there is a property -EditMode
From Oracle Docs-

editMode

String

Yes

Valid Values: input, select the mode that controls how the user specifies a value. This attribute is only applicable when the 'readOnly' attribute is set to false. input: this mode allows the user to type in a value as well as browse and select from a list of available values. select: this mode allows the user only to browse and select from a list of available values.

Set it's value to select

Happy Learning , Thanks :)

Disable(Override) browser back button functionality in ADF Application using JavaScript

This is another JavaScript trick to disable browser back button functionality
In this example i am using two jspx pages - Page1 and Page2

Added two buttons in both pages to navigate between pages



Source of Page1-

<af:outputText value="Page 1" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To Second Page" id="cb1" action="forward"/>

Source of Page2-

 <af:outputText value="Page 2" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To First Page" id="cb1" action="backward"/>

Now see JavaScript function to disable back button functionality, In actual JavaScript doesn't disable back button but override it's default functionality
This function forces browser to navigate forward instead of going back so on click of back button first browser executes it's default back operation but due to this function again navigates to forward and show same page

function preventBackButton() {
                  window.history.forward();
              }

Add this javascript to Page 1 and invoke using af:clientListener tag on pageLoad

<af:clientListener method="preventBackButton" type="load"/>

Now run application and check
Go to second page and the press back button - it returns to page one for a fraction of second but again navigates to Page 2
It means it is working , Cheers :) Happy Learning

Using HashMap in EL expression to set component properties in Oracle ADF

Basic requirement while using EL on pages in ADF, we use bean variables, binding attributes, iterators in expression to check conditions , to set properties for components as Enable-Disable, Visible, inline style etc.
in the same way we can use collections (Array, HashMap) in expression, i know it is pretty simple but have seen many thread in OTN asking how to use HashMap in expression

So here i am taking a very simple example



I have 5 input text on page and i have to enable-disable some fields based on it's id value, there is two buttons on page

as you can see on click of first button , input field 1,3 and 5 should be disabled and on click of second button af:inputText 2 and 4 should be disabled
so for this purpose i have used a HashMap in managed bean

    private HashMap fieldVal = new HashMap();

    public void setFieldVal(HashMap fieldVal) {
        this.fieldVal = fieldVal;
    }

    public HashMap getFieldVal() {
        return fieldVal;
    }

values in HashMap are populated using id value of inputTexts on page as key, this id will be passed as parameter in HashMap in expression
see how expression used in disabled property of inputText-

in same way expression for all inputText is set

<af:panelFormLayout id="pfl1" partialTriggers="b1 b2">
                    <af:inputText label="Label 1" id="it1" disabled="#{EnableDisableBean.fieldVal['it1']}"/>
                    <af:inputText label="Label 2" id="it2"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it2']}"/>
                    <af:inputText label="Label 3" id="it3"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it3']}"/>
                    <af:inputText label="Label 4" id="it4"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it4']}"/>
                    <af:inputText label="Label 5" id="it5" autoSubmit="true"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it5']}"/>
                </af:panelFormLayout>

now see code on buttons, simply setting values against key

    /**Method to disable inputText (1,3,5) on basis of id value
     * @param actionEvent
     */
    public void disable135Action(ActionEvent actionEvent) {
        fieldVal.put("it1", true);
        fieldVal.put("it2", false);
        fieldVal.put("it3", true);
        fieldVal.put("it4", false);
        fieldVal.put("it5", true);

    }

    /**Method to disable inputText (2,4) on basis of id value
     * @param actionEvent
     */
    public void disable24Action(ActionEvent actionEvent) {
        fieldVal.put("it1", false);
        fieldVal.put("it2", true);
        fieldVal.put("it3", false);
        fieldVal.put("it4", true);
        fieldVal.put("it5", false);
    }

Run Application and see what is on page
On Click of First Button

On Click of Second Button

Thanks
Happy learning :)

Showing highlighted holiday calendar in af:inputDate date picker (ADF 12.1.3)

Hello All
This post is about showing highlighted days for holidays in af:inputDate and user must not be able to select these dates
here i am using Jdeveloper 12.1.3
you can do this using af:calendar
https://blogs.oracle.com/adf/entry/display_holiday_name_in_af
but i have a requirement to show holidays while user selects date using af:inputDate

so for this requirement first step is easy to do and there is lots of post about disabling specific days in calendar of af:inputDate

Step 1. Disable specific days -

• you can see there is property in af:inputDate for setting disabled days, this filed takes a value of type List supported by DateListProvider interface







• for this purpose i have created a bean that implements methods of DateListProvider , in Overridden method i have defined a list that contains dates of holidays that i want to disable in af:inputDate



package holiday.view.bean;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;

import javax.faces.context.FacesContext;

import org.apache.myfaces.trinidad.model.DateListProvider;

public class HolidayBean implements DateListProvider {
    public HolidayBean() {
    }

    @Override
    public List<Date> getDateList(FacesContext facesContext, Calendar calendar, Date date, Date date2) {
        List<java.util.Date> holiDay = new ArrayList();
        holiDay.add(new Date("27-July-2014"));
        holiDay.add(new Date("29-July-2014"));
        holiDay.add(new Date("10-Aug-2014"));
        holiDay.add(new Date("25-Dec-2014"));
        holiDay.add(new Date("01-Jan-2015"));
        holiDay.add(new Date("22-Oct-2014"));
        holiDay.add(new Date("23-Oct-2014"));
        holiDay.add(new Date("24-Oct-2014"));

        return holiDay;
        //return Collections.emptyList();
    }
}



• attached this bean to disabledDays property of af:inputDate





• now first part is done we can see all holidays as disabled in calendar of af:inputDate

Step 2. Highlight disabled holidays -

• but it is not easy to find holidays as all are in grey, so i have to highlight all disabled days , so for this requirement , create a skin in viewController project and write this



af|chooseDate::regular-day:disabled{
    background-color: red;
    color: ButtonFace;
}



• af:chooseDate is used because internally af:inputDate opens af:chooseDate as date picker so i have to change property of af:chooseDate, now run your application

Happy Learning :)

Disabling keyboard input in af:inputDate, restrict user to use calendar only - Oracle ADF

hello all,
this tutorial is about a requirement of restricting user to enter date through calendar only in ADF application
this trick was posted by Frank Nimphius (ADF Code Corner)

• Drop a af:inputDate component on page from component pallete








• Now set its background color so that it looks like disabled field

• Now to make it's input field disable, we have to write a small javascript function, copy this function and paste in your page source (XML)



<af:resource type="javascript">
          function enableCalendarOnly(evt) {
              evt.cancel();
          }
        </af:resource>



• Now drop a af:clientListener under af:inputDate component to invoke javascript

• Now set properties in af:clientListener as Method & Type

•  Now run your page and see that input field is disabled for date component , now value can be selected using calendar only
  
  
  

 Cheers - Happy Learning :-)

Dynamically enable or disable items of ADF bound List (af:selectOneChoice) -Oracle ADF

Hello All,
This tutorial is about a requirement of conditionally enabling/disabling items (values) of adf bound List (af:selectOneChoice) component
here i am taking reference of default HR Schema (Departments and Location table )

See the steps-

• Create a Fusion Web Application and business components using both tables

•  Now create List of Values (Lov) on locationId of departments VO from Location VO

• Set List Attribute to LocationId and for UI city will be shown

• Now Drag Departments VO from Data Control on page as a form

•  Select LocationId list field and delete f:selectItems from it, now drag af:selectItem as child of af:selectOneChoice and surround it with af:forEach 

• Add tree binding of Location ViewObject to page bindings in order to populate list items using forEach

•  Now select af:forEach and set its property and variable name, as we have to iterate through Location VO for list items

•  Again select af:selectItem and set its value and label property using forEach variable's  

• Now run your application, and see that list box is ready with values

• Now we have to disable its values as a condition basis, i have written an Expression on af:selectItem's disabled property
  
  
  
  


• I have written condition for DepartmentId 100 and 110, see in source of page



<af:selectOneChoice value="#{bindings.LocationId.inputValue}" label="#{bindings.LocationId.label}"
                                        required="#{bindings.LocationId.hints.mandatory}"
                                        shortDesc="#{bindings.LocationId.hints.tooltip}" id="soc1"
                                        contentStyle="width:150px;color:red;">
                        <af:forEach items="#{bindings.Locations1.rangeSet}" var="list">
                            <af:selectItem label="#{list.City}" id="si1" value="#{list.LocationId}"
                                           disabled="#{ (bindings.DepartmentId.inputValue==100 and (list.LocationId==1000 || list.LocationId==1300)) || (bindings.DepartmentId.inputValue==110 and (list.LocationId==1500 || list.LocationId==1600 || list.LocationId==1700 || list.LocationId==1800 || list.LocationId==1900))}"/>
                        </af:forEach>
                    </af:selectOneChoice>



• Now value given in Expression for Location Id will be disabled for given Department
• Run your page and select DepartmentId 100 and 110 to see disabled list items

 Download Sample App Cheers :-)