ADF -Rendering components based on other components selected values

Requirement: usually we come across this simple requirement where we want to display certain component on certain value selected by user on UI

E.g. I have drop down and based on selected value either I want to display inputText field or inputDate field

Usually developer will add the partial target on inputtext and inputdate field and will expect it to work with below code

<af:form id="f1">          

                <af:spacer height="100"></af:spacer>

                <af:selectOneChoice  autoSubmit="true" id="tsk1" label="Select value"

                                    unselectedLabel="--select--" binding="#{CustomBean.ctask}">

                    <af:selectItem label="Show input text" value="test1"></af:selectItem>

                    <af:selectItem label="Show input Date" value="test2"></af:selectItem>

                </af:selectOneChoice>

                <af:spacer height="30"></af:spacer>

                <af:inputText required="#{CustomBean.ctask.value eq 'test1'}"

                              rendered="#{CustomBean.ctask.value eq 'test1'}" partialTriggers="tsk1" id="inp1"

                              label="Input Field 1" binding="#{CustomBean.textBinding}"></af:inputText>

                <af:inputDate required="#{CustomBean.ctask.value eq 'test2'}"

                              rendered="#{CustomBean.ctask.value eq 'test2'}" partialTriggers="tsk1"

                              label="Input Field 2" binding="#{CustomBean.dateBinding}"></af:inputDate>

                <af:spacer height="30"></af:spacer>

                <af:button text="submit"></af:button>          

        </af:form>

But this doesn’t work and my input text component doesn’t show up as we have applied render condition and not visible condition on inputtext and inputdate component .

Reason for this is if you want to render component at a runtime then you need to refresh parent layout component so I added panelGrouplayout and partial trigger on the same and code will look like below

<af:form id="f1">

            <af:panelGroupLayout partialTriggers="tsk1">

                <af:spacer height="100"></af:spacer>

                <af:selectOneChoice  autoSubmit="true" id="tsk1" label="Select value"

                                    unselectedLabel="--select--" binding="#{CustomBean.ctask}">

                    <af:selectItem label="Show input text" value="test1"></af:selectItem>

                    <af:selectItem label="Show input Date" value="test2"></af:selectItem>

                </af:selectOneChoice>

                <af:spacer height="30"></af:spacer>

                <af:inputText required="#{CustomBean.ctask.value eq 'test1'}"

                              rendered="#{CustomBean.ctask.value eq 'test1'}" partialTriggers="tsk1" id="inp1"

                              label="Input Field 1" binding="#{CustomBean.textBinding}"></af:inputText>

                <af:inputDate required="#{CustomBean.ctask.value eq 'test2'}"

                              rendered="#{CustomBean.ctask.value eq 'test2'}" partialTriggers="tsk1"

                              label="Input Field 2" binding="#{CustomBean.dateBinding}"></af:inputDate>

                <af:spacer height="30"></af:spacer>

                <af:button text="submit"></af:button>

            </af:panelGroupLayout>

        </af:form>

And now my input text and input date renders at runtime as below

This works in 12c but in 11g you will need refresh the panelgrouplayout programmatically in value changeListener of select one choice drodown using below statement

AdfFacesContext.getCurrentInstance().addPartialTarget(valueChangeEvent.getComponent().getParent());