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.

28 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

Andrej Baranovskij 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

Anonymous 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.

Andrej Baranovskij 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

Anonymous said...

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

Andrey

Andrej Baranovskij said...

Andrey,

I have sent it to you.

Thanks,
Andrejus

Anonymous 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.

Andrej Baranovskij 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

Unknown 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

Andrej Baranovskij 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

Shrihari 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.

Andrej Baranovskij 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

Unknown said...

Hello Andrejus,
I have an LOV and some input texts in a popup and then a submit and cancel button. The values weren't getting reset so I put resetaction listeners to submit and cancel. It works fine for input texts but the LOV values aren't getting reset. I tried lazy uncached, giving a binding to component and resetting programatically as well, which didn't work. Any suggestions?

Anonymous said...

Hi Andrejus,
I am implementing similar behaviour as your example but in page fragments and bounded task flow, your example worked for me until i convert the page into page fragment, once i converted it the save button only propagating action comment on the dialog, but not employee details to EO (example i have changed the first name and hire date and press submit to enter change details, once i submit on popup it actually posted only change details but not first name and hire date changes to EO).
I have tried your example in 11R2 and 12c, but have same problems on both.
I have tried changing the partialsubmit to false but it didn't help.
Do you have any advice to make the save button to post parent window details along with the change reason details to EO?

Gupta

asgs said...

Andrejus, the man! Thank you. Your source code cleared up a lot of things. I know this was posted years ago, but also explaining the code snippets would help understand stuff better. IDE-based drag, drop, click, close are good for nothing.

Anonymous said...

Hii Andrejus Sir..,
i am facing an issue with pop up no result what i want
when i click Add button the popup should open and i need to enter values inside the popup and when i click Ok button it should close and data what i entered it should save in the Table.

Same way when i click Edit button the popup should open and show the values what i entered before in Add button and change the before values in the popup form and when i click ok it should close and values in the table should change.
please can u advice me for this operation and functionality in ADF Jdeveloper 11g.

Pruthiviraj said...

Hi Andrejus,

I have to refresh the table data based on DialogListener event fired through popup. So, how would I popup the table based on Popup?


Thanks,
Pruthivi

Anonymous said...

Hi Andrejus,
I am inserting data in table through pop-up.but if some validation fails and when I again click on new link,the pop-up open with previous values....Pls provide solution

Unknown said...

Hi,

I would like to create an af:popup which is resizable.
Contents inside the popup are - 2 af:showDetailItem items inside af:panelTabbed, which renders a dvt:diagram and a text are respectively.

Tried resize=on and many other things, but couldnt make the resize working.

Thanks,
Jithin