Here is a mini-tutorial for creating a Popup window for the user to lookup values. One scenario that you might use this for is when the page visitor needs more information then can be displayed in a drop-down list.

Note: The original post of this blog entry had code that did not work in Internet Explorer. Escritorioooo posted a solution to the forum and I updated the code using Escritorioooo's solution. Thanks Escritorioooo!

1. Create a project or open an existing one.
   
   
2. Add a page named Popup.
   
   
3. Add a Table component to the page.
   
   
4. Drag VIR > Tables > State from the Servers window and drop it on the page.
   
   
5. Right-click the Table component and choose Table Layout from the pop-up menu.
   
   
6. In the column for the STATE.STATEID database field, set the Component Type to Hyperlink, and click OK.
   
   
7. Select the Hyperlink component so that its properties appear in the Properties window.
   
   
8. Set the value for the onClick property to doSave('#{currentRow.value['STATE.STATEID']}')
   
   (I got the value to pass to doSave() from the Value Expression in the Table Layout dialog).
   
   
9. Click JSP in the editing toolbar to view the JavaServer Pages script.
   
   
10. Add the following code shown in bold just under the opening tag for ui:body:
    
    

    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid"> <script><![CDATA[ function doSave(val) { window.opener.setVal(val); window.close(); }]]></script>

    
    
    The Popup page is now ready for use by another page.
    
    
11. Create a new page called Form1. Make it be the start page.
    
    
12. Drop a Hyperlink component on the page and set the text property to State Code.
    
    
13. Set the url property to /faces/Popup.jsp.
    
    
14. Set the onClick property to doPopup("form1:textField1")
    
    Note: Here you are passing the id of the field to fill with the selected value. Determining the id can be tricky. For example, if you set the label property of the Text Field component, the id changes to form1:textField1_field.
    
    To determine what to use for the id, right-click in the page and choose View in Browser. When the page displays in the browser, choose View Source from the appropriate browser menu and look for the id setting for the component's <input> tag.
    
    
15. Click the ... button for the target property to open the target property editor.
    
    
16. In the property editor, click New and set both the Display and Value to popup. Click in some field and check that both values stuck. Then click OK.
    
    Later you add script to open a window named popup, and this setting causes the Popup.jsp page to display in that window.
    
    
17. If the target property value is still blank, select popup from the combobox for that property.
    
    
18. Drag a Text Field component and drop it under the Hyperlink component. By default, the component's id should be textField1. If not, change the id passed to doPopup() in step 14 to match. Use the View in Browser trick mentioned in Step 14 to determine the value to pass.
    
    
19. Click JSP in the editing toolbar to view the JavaServer Pages script.
    
    
20. Add the following code shown in bold just under the opening tag for ui:body:
    
    

    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid"> <script><![CDATA[ function doPopup(destination) { popup = window.open("", "popup", "height=300,width=200,toolbar=no,menubar=no,scrollbars=yes"); destinationElement=document.getElementById(destination); popup.focus(); } function setVal(val){ destinationElement.value=val; }]]></script>

    
    
    This script adds an instance field name openerDestinationElement to the popup window. The script for the Popup page uses openerDestinationElement to get to the Text Field component on the Form1 page.
    
    
21. Run the project. Click State Code to open the popup window. Click a state code to select the code, close the popup window, and populate the text field.