List of Values in Web Apps

I recall the days where we used to develop using Developer 2000 , and many applications (Desktop apps) used to feature a List of Values functionality (LOVs) where users click on a button to select from a set of options which can be better displayed in separate screen providing search/filter capabilities and an ID is returned to the Original Window's control. Although not common in websites , many web applications require this functionality ..Here is how they do it...

Let us consider a sample web application in which
1) User has to select a part ID from a list of available parts ,
2) This cannot be modled as a select(Combo) box as we need to show some extra info in a table
3) We just need part ID from popup where user can search based on part name or description

now..Look at the above figure, Page1 requires Part ID from Popup, and we are using Struts . The best way (In my opinion) is :
1) Create a JSP (Popup.jsp) with a table showing the information of Parts (array of Part Objects)
2) Create a mapping in struts-config.xml

As you know ...PartsForm is the FormBean,

1) LovParts is the Action name which will be invoked by Page1 (refer to figure above)
2) Popup.jsp is the popup that displays Parts information in a HTML table
3) PartsAction Contains(or calls) required business methods to get the list of Parts

We are almost done with this.. inorder to bring up the popup there are many methods but all involve using javascript's window.open, for our example let us assume that we just have one field in the Page 1 that can be sumbitted (using POST) to determine what to show in the Popup initially (Like pre-fetching values for a already existing Part ID)

Write a function in your JSP (or your js file) which does the following

1) but the target page shall not replace the existing one
2) Submits the contents of the form to a different window so that the resulting page will not replace the current one (we want the existing page and the Popup)

1. function postToPopup(winName){
2. var winProps = 'Width='+20+', Height='+30+', top='+10+', left='+50; //ADJUST THESE VALUES..
3. var hndWin = window.open("", winName, winProps); //OPEN A BLANK POPUP
4. document.forms[0].target=winName;
5. document.forms[0].submit(); //submit the form and open the content in popup identified by winName
   
6. }

now Just call this function on the button press :
postToPopup("partsIdPopup")


Congrats!! We have just completed the first part , ie., Opening the popup, Now after user selects the Required Part and clicks OK , the Popup should close and the PartID should be returned to the Page1. Doing this is also easy , we just need to use window.opener property to get the parent window which opened this Popup and use DOM to access the field we want to set the PartID

For example: the name of the field we want to set is partID then the code in the Popup.jsp will have this in the Button click event of OK

 
function okClicked(){
window.opener.document.forms[0].partsId=partID;
//NOw cose the Popup Window
window.close();
}

Thats it..

Hope it helped you