Jul 03 2009
This post from Patrick is very useful when trying to identify the column ID of the tabular form. But when column order has been moved up/down or some are marked not shown, the column ID might be difficult to determine.
This simple technique of using Javascript event on the Element Attributes of the needed columns can be used to quickly identify the column ID.
onmouseover="alert(this.id);"
You can definitely choose a different event that fits your situation.
See sample here.
Mar 15 2009
I just answered APEX forum on the pop-up when hovering over tabular column. It is a quick solution.
1. Create Javascript functions as follows. The description of each function is self-explanatory in its name.
<script language="JavaScript" type="text/javascript">
<!--
function findPosX(obj) // Get full right offset
{
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj) // Get full top offset
{
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function ShowPopup(hv_item)
{
var t1; // First part of Text formatting
var t2; // Latter part of Text formatting
dp = document.getElementById("DisplayPopup");
t1 = "<table><tr><td width=200 align='center' bgcolor='gray'><font color='white'>";
t2 = "</font></td></tr>";
dp.innerHTML = t1 + hv_item.value + t2;
// Set position of hover-over popup
dp.style.top = findPosY(hv_item) - 10;
dp.style.left = findPosX(hv_item) + 20;
// Set popup to visible
dp.style.visibility = "Visible";
}
function HidePopup()
{
dp = document.getElementById("DisplayPopup");
dp.style.visibility = "Hidden";
}
//-->
</script>
<div ID="DisplayPopup" style="visibility:hidden; position:absolute;"></div>
Note that above includes a DIV tag named DisplayPopup which will be used to store the pop-up text.
You can personalize the pop-up in the ShowPopup function. This includes font’s color, background color, pop-up width as well as X-Y offset position.
2. Call ShowPopup and HidePopup by onMouseOver and onMouseOut Javascript events respectively from the Element Attributes of the column you want to have pop-up shown.
In my sample here, I added the following Javascript events to both Ename and Job columns.
onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"
Feb 28 2009
I was asked by our APEX developer whether or not some fields of the tabular form created by wizard, except on a new row when “Add Row” is clicked, can be made read-only. This is a part of business requirements that the existing parameters should not be modified by end users.
I started searching for the existing solutions and found that most call for using the manually-created tabular form. However, one comment from this forum post suggested Javascript to perform task. Even though there was no code given, I’d like explore this option.
With information from Denes Kubieck’s Demo application and Patrick Wolf’s post on “Which Tabular Form Column is mapped to which Apex_Application.g_fxx array?”, this is the sample of my simple solution which uses Javascript to make fields read-only.
Please note that in this sample application, there are other things I included to show our developers. I added a page-level validation to ensure that there is no duplication in a selected field entry. Even though there is an unique constraint on this column, by using validation, it is more informative to users. The pop-up help reminds users that the field is protected and no duplication is allowed.
|
|
|
|
|
|
|
