Thursday, January 24, 2008

Using af:popup Component in JDeveloper 11g

This component is available in JDeveloper 11g ADF Faces Rich Client, I personally like how it works and how it looks. In this post I will show a use case where this component can be applied.

You can download developed sample application - PopUp11.zip. This application is based on standard HR schema from Oracle XE database. However, I have extended this schema a little bit, by adding new column to EMPLOYEES table. New column is called ACTION_COMMENT and is used to implement defined use case. You can find SQL script needed to create this column in lt.andrejusb.model.sql.actioncomment file.

Ok, what is a use case implemented in this sample about? Main idea is - when user changes some information in the form and press button Save, pop-up is displayed with a field where user can enter comment for his action. If user don't want to provide any comment, just empty field can be submitted.

How it's done? Actually, pop-up functionality is created in two steps:

1. Put af:showPopupBehavior component on Save button in your form. This component is used to invoke pop-up when Save button is pressed:


You must assign PopupId and Align properties for af:showPopupBehaviour component:


2. Put af:popup component just right before Save button, actually there is no difference where to put it. You can use inside af:popu those components - Dialog, Menu, Panel Group Layout and Panel Window. I'm using in this sample Dialog component with Save button that invokes Commit functionality:


Important - af:popup should have the same Id value as af:showPopupBehavior component, this will allow to open pop-up when Save button is pressed:


Value for Action comment component is binded to #{processScope.actionComment}, when Save button is pressed entered value is stored into #{bindings.ActionComment.inputValue}. And finally, when Commit action is done, I'm clearing value stored in #{processScope.actionComment}:


So, two steps are described.

And it looks really nice in practice, let's say we have a form and modify some data:


When Save button is pressed - we have pop-up displayed. User can provide text to describe his action and submit data with Save button:


If user don't want to provide any text to comment his action, simply Save button can be pressed and form data will be saved.

21 comments:

Anonymous said...

Hi Andrejus:

I show your example with popup Component and I think that It's very interesting.

I prove to do the same idea but in this case I want to do with textinput instead of button.
For example, when the focus's on the textinput, the popup'll open but it doesn't it nothing.

Can you help me?

Thanks in advance.

ega

Andrejus Baranovskis said...

Hi Ega,

You need to open pop-up programmatically, if i understood you correctly.

You can found solution in Frank Nimphius blog - ADF Faces RC: Strategies to find a popup component on a page to launch with a clientListener.

Regards,
Andrejus

Andrey said...

Hello Andrej,

Do you know why values from input controls from the main page are not submitted when commandButton with af:showPopupBehavior inside is pressed? In other word why partialSubmit="true" doesn't work for such buttons? Also other controls are not updated via partialTriggers.

Andrejus Baranovskis said...

Hello Andrey,

I have tested, it works for me.

I have updated my sample with Employees table and defined PartialSubmit='true' for Save button in main form. Also I enabled PartialTriggers for table.

When Save button is pressed, table is updated with changes in form.

I can send updated sample, just drop me email.

Regards,
Andrejus

Andrey said...

Checked it again. No value committed. :( Could you send an updated sample to dlight [sobaka] newmail.ru please?

Andrey

Andrejus Baranovskis said...

Andrey,

I have sent it to you.

Thanks,
Andrejus

Andrey said...

Hi Andrej,

Thanks a lot. I have found the workaround to my problem.
Value is indeed not saved to the backing bean if default OK/Cancel buttons are used. Custom buttons (like one in your sample) work OK and save values from main page after popup is closed. partialSubmit="true" is required for main form's button only. Seems like an ADF bug to me.

Andrejus Baranovskis said...

Andrey,

Yes, it can be a bug in JDev 11g TP3. You can report it on JDeveloper 11g OTN Forum also.

Thanks for update.

Andrejus

Sireesha said...

Hi Andrejus,

I am adding a new row to table and the input values are entered in the pop up. New row is added to the table and the table is refreshed, but it is not current row. This table is part of the master-detail page and I want the newly created row to be selected.
Any ideas on how to do this? Also do you know where I can find java docs for oracle.binding package?
Thanks for your help!
Sireesha

Anonymous said...

Hi Andrejus,

I have a taskflow region inside the pop up. This pop up has default OK/Cancel button. When i edit some fields in the pop up and click on Cancel,i am not able to undo the edits and my updated values are being pushed to the VO. I have set partialSubmit = true and contentDelivery =lazyUncached.

Can you help me?

Thanks
Nutan

Anonymous said...

Hi,
i have a popup into which i have dropped an af:inlineFrame and set the src attribute to derived uri.
i also have an af:commandLink under which is the showPopupBehavior with the popup id.
when clicking on the commandlink, the popup does not launch and instead the entire parent(main) page refreshes.
any pointers to why this happening. how to solve this, please help.
thanks

miguel portilla said...

Hello Andrejus,

I have a question, I need to create a popup that is generated at the click of a button and this popup has two buttons as an option that says yes and another says no, thank you help me how to do this.

Thanks,

miguel portilla

miguel portilla said...

Hello again Andrejus,

I have a question, is that I am entering data in tables or forms and I need to create a popup that is generated after a java process (eg a switch box to another) and this popup has two buttons as an option that says yes and another to say no, thank you help me how to do this.

Thanks,

miguel portilla

Anonymous said...

Hi Andrejus
I hope you can help me. well the cuestion is how can i change the size of the popup?. my problem is that the popup is very very little like a point.
I'm using the popup in a geographic map with the rtpopup
thank's for your time.

Deu said...

Hi Andrejus,

I've created a form pop up just as 'Find & Replace' and the values are getting updated in main page on clicking 'ok' button.

My requirement is when I click on a 'Find' button , the value entered should get updated and the focus should come on main page without closing the pop up.

Can you pls provide a solution?

Thanks in advance.

Deu

Andrejus Baranovskis said...

Hi,

May be my other post will help you: http://andrejusb.blogspot.com/2009/03/adf-faces-rich-client-popup-and-master.html

Regards,
Andrejus

Miguel said...

Hello Andrejus,

I want to include a validation in the popup.
I only add the following code.

public String saveFromPopupButton_action() {
BindingContainer bindings = getBindings();
[...]
ve.setValue(ctx.getELContext(), "");
FacesContext fc = FacesContext.getCurrentInstance();
FacesMessage message =
new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Incorrect comment");
fc.addMessage("inputText1", message);

return null;
}


When I click the Save button, the popup close, without show the error,

Only when I return to the popup, I can see the error.

I wan't to "lock" to the user in the popup, until the error was solve.

Thanks in advance

HARISH said...

hi, can you please tell me, how do i launch a pop up after the page is loaded. note that we do not want any user action. i must be launched automatically after the page is loaded.

Andrejus Baranovskis said...

I guess this post will help you - http://andrejusb.blogspot.no/2012/03/open-adf-popup-on-page-load.html

Andrejus

sambha said...

hi Andrejus,

I have created an popup using taskflow. I want to disable the popup resizing manually. Can you please help me out.

Anoop Singh said...

Hi Andrejus,

I am implementing a popup. My requirement is to create a popup on a button click.
My popup screen has a combo box list of values.
I have created the List of values and the popup launches successfully.

Now when I select some value on the popup window through the LOV, I want that value back in my page. Can you please help me how I can achieve this.

Thanks
Anoop