Mimic Oracle’s LOV Feature for Web Application
Pertama-tama saya mau minta maaf dulu, karena mulai posting ini saya akan semakin banyak memberikan content dalam bahasa Inggris. Saya ingin meningkatkan jumlah pembaca dari luar negeri.
For those of you who happen to develop an oracle application using oracle form, you'll probably know that it has feature called LOV. This feature will show up a popup window that has a list of value for related field that is shown in grid form. I find this very useful and I miss this feature when I develop an intra net application.
In this post, I try to introduce a solution that mimic Oracle's LOV. First, we need a javascript library called dHtmlXgrid. After that, we need to create a html form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LOV Test</title>
<script language="javascript">
function callLOV(){
var url = "lov.php";
var opt = "width=690,height=180,left=100,top=100,scrollbars=yes,resize=no,menubar=no,toolbar=no,directories=no";
window.open(url, "lov", opt);
}
function fillForm(arr){
document.getElementById('txtNIM').value = arr[0];
document.getElementById('txtName').value = arr[1];
document.getElementById('txtCity').value = arr[2];
document.getElementById('txtPhone').value = arr[3];
document.getElementById('txtEmail').value = arr[4];
}
function kc(e) {
var k;
if (e.charCode) {
k = e.charCode;
} else
if (e.keyCode) {
k = e.keyCode;
}
return k;
}
</script>
<style type="text/css">
img { border: none;}
</style>
</head>
<body>
<table width="35%" border="0">
<tr>
<td><form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>Friend List</legend>
<table width="100%" border="0">
<tr>
<td width="23%">NIM</td>
<td width="77%"><input name="txtNIM" type="text" id="txtNIM" />
<a
onClick="callLOV()"
onKeyPress="if(kc(event) == 13){ callLOV(); }"
href="javascript:void(0);"
>
<img src="dhtmlxgrid/popup.gif" name="imgPopup" width="12" height="15" id="imgPopup" /></a></td>
</tr>
<tr>
<td>Name</td>
<td><input name="txtName" type="text" id="txtName" /></td>
</tr>
<tr>
<td>City</td>
<td><input name="txtCity" type="text" id="txtCity" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="txtPhone" type="text" id="txtPhone" /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input name="txtEmail" type="text" id="txtEmail" /></td>
</tr>
</table>
</fieldset>
</form>
</td>
</tr>
</table>
</body>
</html>
This should look like this: 
You click on popup image and it will launch LOV page.
Ok, form is ready, now move to LOV page. For this, we'll create another file. Let's call it lov.php. Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LOV Friend</title>
<script src="dhtmlxgrid/dhtmlXGrid.js"></script>
<script src="dhtmlxgrid/dhtmlXCommon.js"></script>
<script src="dhtmlxgrid/dhtmlXGridCell.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxgrid/grid.css">
</head>
<body>
<div id="gridbox" height="100%"></div>
<script language="javascript" type="text/javascript">
function doOnEnter(rowId,cellInd){
var caller = window.opener;
arrData = new Array();
arrData[0] = this.cells(rowId, 0).getValue();
arrData[1] = this.cells(rowId, 1).getValue();
arrData[2] = this.cells(rowId, 2).getValue();
arrData[3] = this.cells(rowId, 3).getValue();
arrData[4] = this.cells(rowId, 4).getValue();
caller.fillForm(arrData);
window.close();
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("dhtmlxgrid/grid/");
mygrid.setHeader("ID, NAME, CITY, PHONE, E-MAIL");
mygrid.setInitWidths("90,230,110,90,150");
mygrid.setColAlign("center,left,right,right,right");
mygrid.setColTypes("ro,ro,ro,ro,ro");
mygrid.setColSorting("str,str,int,int,int");
mygrid.setOnEnterPressedHandler(doOnEnter);
mygrid.init();
mygrid.loadXML("datasource.xml");
</script>
</body>
</html>
A little explanation from the above code:
<div id="gridbox" height="100%"></div>
is your grid place-holder that is used in the following code
mygrid = new dhtmlXGridObject('gridbox');
The other code is explained in dHtmlXgrid's documentation, you should see it. One other thing that is need an explanation is this snippet
caller.fillForm(arrData);
This one is the key to connect LOV with our form, which will call fillForm function in html form's page.
Now, this tutorial is complete, you can test it here. Follow this link to download the source file. Any question, just throw it below in comment form.
Pingback: Silent’s Spot » Blog Archive » Mimic Oracle’s LOV Feature for Web Application Part 2: Add Database Support