The views expressed on this blog are my own and do not necessarily reflect the views of Oracle.

Monday, September 24, 2007

Achieving show/hide of components using single list choice component

This post depicts how to achieve show hide behavior of ADF UI components on the basis of list element selection.

Following steps need to be followed:
1. Enabling PPR: You will need to enable Partial page rendering so that page cannot be refreshed while changing the element selection in the list box.
2. Need to set the visible property of the component to be hide/show depending upon the element selected in the list box.

Let's proceed using an example: say there is a list box having values Package and Procedure. And there is a text box. Now we want this text box to be visible on the page when package is selected in the list box. and in case procedure is selected it should be hidden.

Detailed Steps:
1. Create a ADF project in Jdeveloper (Make sure ADF libraries are included in the project).
2. Create A new page or use an existing page.
3. Drag and drop Select One Choice component from the ADF Faces components at the desired place on the page. Fill the details in the wizard for list name-value pairs.
3.2 Click next and give desired label.
3.3 Change auto submit property to true and click finish.
3.4 Give list component an id ListDemoId. This will be used for setting PPR.
3.5 Also set the value property to 'Package'. This will be used as default selection for the list Choice.
3.6 We need to create a binding for using list values to decide the show hide of text box at run time. To create that go to the behavior tab of list box properties.
3.7 click on the bindings arrow and a new pop up window will appear asking name for the managed bean and property.
3.8 Click new and give name as DemoBean and same way for property give name ListRendering.
4. Now create an input text box by dragging and dropping a inputText component from the ADF components.
4. Go to it's behavior tab and click on the arrow right to partial rendering. it will pop up a wizard asking for available items for PPR.
4.1 shuttle selectListChoice-ListDemo towards right and click ok.
5. Final step is setting up the visible property of the text box using an EL expression.
5.1 For this go to the behavior tab of the text box and set visible property as: #{DemoBean.listRendering.value=='Package'}
5.2 That's it. The above EL expression will set the visible property to true only if selected value in the list is Package. In other cases text box will be hidden.

For doubts/ suggestions or comments please mail me अत: vik.ceo@gmail.com

No comments: