This post gives the idea on how to customize the ok and cancel buttons in the af:inputListOfValues component. Download sample
af:inputListOfValues basically will be popup with dialog included in that. Since its a framework component we don't have direct access to those dialog and popup components. Still in the lov component we have launchPopupListener() and returnPopupDataListener() where will miss the control for Cancel button, and returnPopupDataListener() will call only if you select the value from the listofvalues. Sometime we may need to customize the ok or cancel buttons for the requirement.
Find the below simple flow diagram between jsff page and backing bean.
1. Attach an lov to any view object and drag drop it in jsff page.
2. Add component binding and lov launchPopupListener method to the backing bean.
3. Add server listener in the page, lets say inside af:form and outside of lov component.
4. On launch of lov , it will call the launchListener in the backing bean in turn will call the server listener in jsffpage with javascript using ExtendedRenderKitService, so that it executes serverlistener method. check the code snippet below,
5. Inside the serverListener method, you can get the dialog component like below
6. Once we get the Dialog component of lov popup, we can do anything with code control. same way use ButtonBar facet to add our custom buttons, and hide the default ok cancel buttons with dialog.setType("none");
7. After this, run and check.. your lov will appear with customized ok and cancel button and ensure the call goes to corresponding actionliseteners in the backing bean.
Since we customized the buttons, click ok after selecting the rows in the lov, it won't set the values to the lov field.. we have to get the current row of the lov view object and set to the current row to the lov field.
Download the sample app here.
(this app used HR schema - XE database)
Feel free to comment if anything wrong and not clear.
af:inputListOfValues basically will be popup with dialog included in that. Since its a framework component we don't have direct access to those dialog and popup components. Still in the lov component we have launchPopupListener() and returnPopupDataListener() where will miss the control for Cancel button, and returnPopupDataListener() will call only if you select the value from the listofvalues. Sometime we may need to customize the ok or cancel buttons for the requirement.
Find the below simple flow diagram between jsff page and backing bean.
1. Attach an lov to any view object and drag drop it in jsff page.
2. Add component binding and lov launchPopupListener method to the backing bean.
3. Add server listener in the page, lets say inside af:form and outside of lov component.
4. On launch of lov , it will call the launchListener in the backing bean in turn will call the server listener in jsffpage with javascript using ExtendedRenderKitService, so that it executes serverlistener method. check the code snippet below,
5. Inside the serverListener method, you can get the dialog component like below
6. Once we get the Dialog component of lov popup, we can do anything with code control. same way use ButtonBar facet to add our custom buttons, and hide the default ok cancel buttons with dialog.setType("none");
7. After this, run and check.. your lov will appear with customized ok and cancel button and ensure the call goes to corresponding actionliseteners in the backing bean.
Since we customized the buttons, click ok after selecting the rows in the lov, it won't set the values to the lov field.. we have to get the current row of the lov view object and set to the current row to the lov field.
Download the sample app here.
(this app used HR schema - XE database)
Feel free to comment if anything wrong and not clear.
