Sunday, May 16, 2010

Implementing Confirmation Choice List

Today I will tell you, how I was playing with choice list component, when implementing value change confirmation functionality. Requirement is simple - we have Yes, No choice list and when user is changing from No to Yes, we show confirmation screen. If OK is selected by the user, Yes value is accepted. If Cancel was pressed, we need to reset choice list back to No automatically.

Download sample application - ValueChangeConfirmation.zip. This sample implements static View Object with Yes and No values:


There is transient Authorized attribute, it is implemented with Yes, No choice list:


If user selects Yes:


When Yes value is selected, application renders confirmation dialog:


You can see, Yes value is selected in the background. If user click on Cancel button, choice list value is reset back to No:


In other case, if user clicks on OK:


Yes value is accepted:


From development point of view, in order to enable such functionality, you need to set AutoSubmit=true and define ValueChangeListener for choice list attribute. This will allow us to track value change event and raise confirmation popup. Another important thing, choice list should have PartialTrigger from popup component. This means choice list will be refreshed, after popup cancel event:


The main logic is in value change listener method:


The trick is, that we need to change value back to No from popup cancel listener. And, when value is changed in popup cancel listener, framework is recognizing it as second value change event and invoking value change listener method again and again. The main problem is, that in this case - even value change listener is invoked, newValue inside value change listener method is not set correctly to that one assigned in popup cancel listener. We need to enable additional attribute in Page Definition, where we will be able to store value change tracking values - AuthorizedAttr:


You can see, there some magic code implemented in value change listener method. Hope it will be useful, if you will face similar requirement as mine.

5 comments:

Zee said...

Thanks great post again.

Maniesh Sailoz (sid) said...

Andrejus,

I am trying to develop a common declarative confirmation popup such a way that we don't have to even declare that component in the page. For example, this confirmation popup can be used in almost all the pages.

I am closer to the solution except the part where i have to dynamically add the popup to the page and render it at the same time.

Ever thought of such a component?

Andrej Baranovskij said...

Yeah, I did implementation of such component in my projects.

Andrejus

Anonymous said...

In your sample, you are updating the model even before the user confirms his action. Wouldn't this cause problems if we have attribute level validations or other processing in setAuthorized accessor method in EmployeeEO?

Thanks
Subhash

Andrej Baranovskij said...

Its the main reason, why i have created choice attribute as transient. Model will not get affected.

Thanks for good question.

Andrejus