Sunday, July 15, 2007

VIEW PICKLIST DESIGN FOR WEB

Here is the simple design technique for creating view picklist for web interface similar to Notes Client view picklist component

1. Design the picklist selection view

Design the column of the view to display radio button (Single document selection) or checkbox (Multiple document selection)



You can design the radio button/checkbox to return more then one value,

In this example the radio button is designed to return two field values with the seperator "$~$"


2. Embed this Picklist view to a Picklist Selection Popup form.

- Create a form and embed the picklist view and select display using "View display property"
- Query_String CGI Variable field to receive the parameters sent by the opening form
- retFieldName, retFieldColumns fields to store the quesry string parameters parsed from Query_String field
- In OK button copy/paste the javascript code


var sField1 = document.forms[0].retFieldName.value;
var nColumn1 = document.forms[0].retFieldColumn.value;
frm = document.forms[0];

for ( var i = 0; i <>if ( frm.selectdoc[i].checked ) vals = frm.selectdoc[i].value.split( '$~$' );

}
if (typeof vals == "undefined") {
rField2=document.forms[0].selectdoc;


if(rField2.checked) {
vals = frm.selectdocs.value.split( ',' );
}
}
if (typeof vals == "undefined") return alert('Pleas select a document.');
//get a handle the backend form field that the value is going to
obj = eval( "window.opener.document.forms[0]." + sField1 );
//set the value in the field and then close this window.
obj.value = vals[ nColumn1-1 ];
window.close();

- In Close button copy/paste the javascript code

window.close();

3.Create a image or button to call the ViewPickList form













- Create a field to receive the picklist values
- Create a image/button hotspot and copy/paste the below javascript code

var formname='ViewPicklist1';
var height = 350;
var width = 600;
var returnfieldname = "PickSingle";
var returncolumnnumber ="1";
popupWin = windowOpener('/'+webpath + '/'+formname+'?openform&RET_FIELD='+returnfieldname+'&RET_COLUMN='+returncolumnnumber+'&' ,
'Address','width='+width+', height='+height+', status=no, resize, scrollbars=no' );

4. The Output