Tips & Tricks for JDeveloper and ADF

Main menu

Post navigation

JDeveloper: Showing a Popup when Selecting an af:selectOneRadio

A question on the new OTN JDeveloper and ADF forum (or space if you like the new name better) inspired this post.

Use Case
The use case is to show a popup each time the user clicks on one of the radiobuttons of a button group. This popup should show an inputText component to let the user enter some text for the selection. After the selection the text is shown on the page under the button group.
To make it more interesting, it was not ask for this in the question, the popup should show which radio button was clicked.UPDATE
An additional question on the OTN forum asks how to display the label of the selected radiobutton and not it’s value. I updated the workspace to show how to implement this.

ImplementationUPDATE
The use case sounds easy first: add a showPopupBehavior to the selectItem to show the popup and show the selected radioValue as the title of the dialog inside the popup. Problem with this solution is that a selectItem can’t handle client listeners, which a showPopupBehavior is under the hood. If you try this you get an error

Putting the showPopupBehavior onto the af:selectOneRadio isn’t a solution either as this would would allow to show the popup, but would prevent the selection of the radio button. This is because the showPopupBehavior is a client behavior tag which prevents the event to
go further.

The solution to the problem is to use a valueChangeListener on the af:selectOneRadio and show the popup from the bean code. Before showing the popup we need to process the value change event to get the selected value in the dialog of the popup.

You see that the popup shows the value of the selected radio button as the title and the entered text in the popup is shown as ‘last reason’ below the radio button group. This ‘magic’ is done by simply adding a partial trigger to the outputText component which is listening to the dialog inside the popup.
As the sample don’t store the value of the selection of the radio group or the entered text in the db, I use the variable iterator to store these values. More about this technique can be found in my blog

UPDATED IMPLEMENTATION
As the use case changed a bit I changes the solution in a way to show how to implement this. First step is that I added another attribute to the variables iterator to store the selected label. The attribute is name ‘SelectedActivation1’ and is of type String. This attribute is needed as it’s not easyly possible to get the selected label of the radiobutton outside the selection listener. The changed valueChangeListener looks like the code below:

public void activationChangedListener(ValueChangeEvent valueChangeEvent) {
// process updates to get the selected value inside the popup
FacesContext contxt = FacesContext.getCurrentInstance();
valueChangeEvent.getComponent().processUpdates(contxt);
//get the selected lable from the radio button
// for this we need to iterate over the children of hte af:selectOneRadio
// and find the child which has the same value as the new value
RichSelectOneRadio rsoc =
(RichSelectOneRadio)valueChangeEvent.getSource();
List childList = rsoc.getChildren();
String newVal = (String)valueChangeEvent.getNewValue();
for (int i = 0; i < childList.size(); i++) {
if (childList.get(i) instanceof RichSelectItem) {
RichSelectItem csi = (RichSelectItem)childList.get(i);
if (((String)csi.getValue()).equals(newVal)) {
// get the binding container
BindingContainer bindings = BindingContext.getCurrent().getCurrentBindingsEntry();
// get an ADF attributevalue from the ADF page definitions
AttributeBinding attr = (AttributeBinding)bindings.getControlBinding("SelectedLabel1");
// and store the label there
attr.setInputValue(csi.getLabel());
}
}
}
//show the popup
RichPopup.PopupHints hint = new RichPopup.PopupHints();
getRadioPopup().show(hint);
}

The images below showing the changes application

Start changed Application

Select Active: Caption shows value and label

Show Text and selected Label

Select Inactive: Caption shows value and label

Show Text and selected Label

You can download the workspace from the ADF EMG Sample Project BlogTestRadiobutton.zip. The sample uses the HR DB schema (even as this is not really needed for the sample).

3 thoughts on “JDeveloper: Showing a Popup when Selecting an af:selectOneRadio”

I am new in ADF my problem is
I have a field staus which is select one radio component -it has three options “approved,rejected,waiting for approval” if I select either approved or rejected I want to display two fields reason,approved/rejected date. how can I do that please help me