Wednesday 3 July 2013

Conditional based Enabling and Disabling the fields in ADF

I have requirement to make the Text field as enable and disable based on the results of the other fields.

I have drop down with the values, and text box side to it. In ADF for LOV's we cannot enter the user inputs.

Below image describes the UI which i want.

When i select the any of the Environment, the text box needs to be disabled, when i select the blank value, the text need to be enable to enter the use inputs.
 We can achieve this by below steps.

1) Go the binding property of the textField, and bind it to the Bean class. In the bean class Setters and getters methods gets create

Textfield Code in jsff

  <af:inputText label="" id="it2"
                disabled="#{bindings.StringValue1.inputValue != ''}"
                binding="#{backingBeanScope.SampleBean.hostNameText}"/>
        </af:panelFormLayout>

  Bean class Code after binding the textfield.

   private RichInputText hostNameText;

    public RichInputText getHostNameText() {
        return hostNameText;
    }
    public void set
HostNameText(RichInputText hostNameText) {
        this.
hostNameText= hostNameText;
    }


2) Add the ValueChangeListner in the SelectOneChoice , I am giving the method name as refreshHostname

jsff Code 

<af:selectOneChoice value="#{bindings.StringValue1.inputValue}"
                              label="Environment"
                              required="#{bindings.StringValue1.hints.mandatory}"
                              shortDesc="#{bindings.StringValue1.hints.tooltip}"
                              id="soc8"
                              valueChangeListener="#{backingBeanScope.
SampleBean.refreshHostname}"
                              autoSubmit="true">
            <f:selectItems value="#{bindings.StringValue1.items}" id="si8" />
          </af:selectOneChoice>

Note: Make sure that autoSubmit is set true, otherwise the value change listener will not be called


3) In the Bean method, add the code for partial triggers.

  Bean method code.

    public void refreshHostname(ValueChangeEvent valueChangeEvent) {
        // Add event code here...
       // Evaluate the bindings before fetching the SelectOneChoice value
        ADFUtil.setEL("#{bindings.StringValue1.inputValue}",valueChangeEvent.getNewValue());
        AdfFacesContext ctx = AdfFacesContext.getCurrentInstance();
        BindingContext bctx = BindingContext.getCurrent();
        String temp = valueChangeEvent.getNewValue().toString();
        BindingContainer bindings = bctx.getCurrentBindingsEntry();
        AttributeBinding hostNameBinding =                (AttributeBinding)bindings.getControlBinding("StringValue1");
        hostName = hostNameBinding.getInputValue().toString();
        if(hostName == null || hostName == ""){
            hostNameText.setDisabled(false);
            hostNameText.setRendered(true);
            ctx.addPartialTarget(hostNameText);
        }else{
            hostNameText.setDisabled(true);
            ctx.addPartialTarget(hostNameText);
        }
    }

ADFUtil Evaluate code to Evaluate the bindings.

    public static void setEL(String el, Object val) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory =
            facesContext.getApplication().getExpressionFactory();
        ValueExpression exp =
            expressionFactory.createValueExpression(elContext, el,
                                                    Object.class);

        exp.setValue(elContext, val);
    }


Please Note that: Before fetching the SelectOneChoice value in the bean method.
Evaluate the Bindings of the SelectOneChoice to fetch the latest value selected, otherwise you will end up with the previous value selected from the dropdown.

1 comment:

  1. Basu Technically the Blog is awesome, but a few changes to make it more reader friendly:

    1.For every problem you discuss give a little bit of background.
    2.The solutions are specific to the technology, so discuss why there is no direct way of getting the solution and how you got the solution.
    3.Make a bit of UI related adjustments in your blog so that the screenshots and tables fit correctly.
    4.Use different font for the code,heading,subheading,explanation,comments,heading for diagrams and have a font that complements the background i.e darker font for light background or vice versa.
    5.All the best and keep the good work going.

    --PS: Delete this comment once u read it.

    ReplyDelete