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.

Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.

  • thanks dah drop a comment
    hmm..bahasa2 kayak ginian aku gak ngerti euy…maklum cuman sekedar pengguna, tp bukan pemerhati…:)

    salam kenal mas bayu!

  • thanks dah drop a comment
    hmm..bahasa2 kayak ginian aku gak ngerti euy…maklum cuman sekedar pengguna, tp bukan pemerhati…:)

    salam kenal mas bayu!

  • #daengrusle:hahaha, ya jangan comment di posting yang ini dong, kan ada posting lain yang bukan topik programming ;))

  • #daengrusle:hahaha, ya jangan comment di posting yang ini dong, kan ada posting lain yang bukan topik programming ;))

  • Pingback: Silent’s Spot » Blog Archive » Mimic Oracle’s LOV Feature for Web Application Part 2: Add Database Support()

  • Urung Faham mas ;)

  • Urung Faham mas 😉

  • #Jauhari:belum faham dibagian mana mas? mungkin bisa dibantu jelaskan lebih jauh.
    tanya langsung di YM juga gpp ;))

  • #Jauhari:belum faham dibagian mana mas? mungkin bisa dibantu jelaskan lebih jauh.
    tanya langsung di YM juga gpp ;))

  • sujono

    mas saya pengen tanya klo utk web aplikasi yg ada header n detail gitu bisa ga yach. Soale saya biasa pakai desktop programming dimana contohnya utk form input transaksi ada master n detailnya.

    silent:Bisa dong, konsepnya sama aja kok dengan desktop programming.
    Kalau mau contoh, entar aja ya, minggu2 ini lagi sibuk berat.

  • sujono

    mas saya pengen tanya klo utk web aplikasi yg ada header n detail gitu bisa ga yach. Soale saya biasa pakai desktop programming dimana contohnya utk form input transaksi ada master n detailnya.

    silent:

    Bisa dong, konsepnya sama aja kok dengan desktop programming.
    Kalau mau contoh, entar aja ya, minggu2 ini lagi sibuk berat.