Thursday, September 27, 2007

iPhone 1.1.1 Update - Best New Feature

Apple updated the iPhone to 1.1.1 today. While most of the buzz is around the new iTunes Store, there is a small new feature that makes all the sense in the world: double-tapping the space bar will insert a "." followed by a space. So simple, yet so brilliant.

This is a classic example of taking a use case - a user wants to compose a message - watching users actually do that - and then improving upon it. Previous to this release, they would have to type a sentence, and then tap the ".?123" key to then have to type a period, then switch back. Three taps plus one more for the trailing space just for a period.

With the 1.1.1 update, all a user needs to do is hit space two times, an a period followed by a trailing space instantly appear.

How does this relate to APEX? Simple - once you design an application, you're not done. There are several improvements still to be made, none of which you will be able to identify. Watch your users use your application. You built it for them, after all!

See if they are clicking where you expect them to, and if not, you may need to re-think your design. Look for inefficiencies, such as switching between the mouse & keyboard, and try to improve upon them. Correcting small annoyances in an application will go a long way to build your credibility, if nothing else.

Good design is never correct the first time. Apple is well aware of this, and their decision to make the iPhone so bloody simple to update proves they get it.

VOUG

Next week, I will be presenting at the Virginia Oracle Users Group conference in Charlottesville, VA. It's a much smaller conference than the ODTUGs & IOUGs of the world, but that makes it better in some sense, as you get a better chance to meet and talk to people.

I'm going to present an Intro to APEX (The ABCs of APEX) presentation, in favor or something more advanced, as there are no other APEX presentations on the agenda.

If you plan on attending, look for me on Thurday afternoon and possibly at the reception.

Thursday, September 06, 2007

Clicking in a Row

First of off, consider my recent absence a summer vacation of sorts, without the vacation part. It's been hectic since my last post, which was about, wow - ODTUG. We had over 100 people in our training sessions there, and most of the feedback was great! We hope to do it again next year, if not sooner.

The reason for my absence was largely due to the fact that we recently moved, and pretty much everything that you can think of and then some, went horribly awry.

In any case, I was recently asked how to make an entire row in a report "clickable", so that when anywhere in a row is clicked, the user will be taken to a form to edit that record.

In order to achieve this, you need to create a new Named Column Report Template. This means that you will have to define each column that you want to have manually in the template itself. Hardly a scalable solution, but it's not too difficult to implement and expand on.

I am only going to use one Row Template to keep things simple. For Row Template #1, I entered the following HTML:
<tr style="cursor: hand; cursor: pointer;" onmouseover="row_mouse_over(this, 1)" onmouseout="row_mouse_out(this, 1)" #HIGHLIGHT_ROW# onClick=window.location="f?p=&APP_ID.:2:&SESSION.::::P2_EMPNO:#EMPNO#">
<td class="t15data" #ALIGNMENT#>#EMPNO#</td>
<td class="t15data" #ALIGNMENT#>#ENAME#</td>
<td class="t15data" #ALIGNMENT#>#SAL#</td>
</tr>
In my example, I am only using three columns from EMP: EMPNO, ENAME & SAL; to add more columns, you would simply add more <td>'s to your template.

To explain what each line does:
style="cursor: hand; cursor: pointer;"
This will cause the cursor to change to the pointer finger. Two directives are needed since MSIE & Firefox work slightly differently when changing cursors.

onmouseover="row_mouse_over(this, 1)" onmouseout="row_mouse_out(this, 1)" #HIGHLIGHT_ROW#
The onMouseOver and onMouseOut will highlight the row that the cursor is hovering over. This functionality is built in to Row Templates, but since we are using a Named or Column template, we have to hard-wire it manually.

onClick=window.location="f?p=&APP_ID.:2:&SESSION.::::P2_EMPNO:#EMPNO#" Here's what makes it work; we set an onClick event in the <tr> tag that when clicked, we re-direct to page 2, passing in the current value of EMPNO to the APEX item P2_EMPNO. This is where you would alter the target URL, should you find yourself building an application that does not use the EMP table...
Next, you will need to add a few more components to the Report Template. I kept the Column Headings simple and just copied over what was in the Standard Report Template:
<th class="t15header" #ALIGNMENT#>#COLUMN_HEADER#</th>
You will need to add both some HTML and JavaScript to the Before Rows section:
<script type="text/javascript">
var rowStyle = new Array(15);

var rowActive = new Array(15);
var rowStyleHover = new Array(15);

for (var n = 0; n < 15; n++)
{
rowStyle[n]='';
rowStyleHover[n]='';
rowActive[n]='N';
}
function row_mouse_over(rowNode,currentRowNum)
{
rowActive = 'Y';
for( var i = 0; i < rowNode.childNodes.length; i++ )
{
if (rowNode.childNodes[i].tagName=='TD')
{
rowStyleHover[currentRowNum] = rowNode.childNodes[i].style.backgroundColor;
rowNode.childNodes[i].style.backgroundColor = '#cfe0f1';
}
}
}

function row_mouse_out(rowNode,currentRowNum)
{
rowActive = 'N';
for( var i = 0; i < rowNode.childNodes.length; i++ )
{
if (rowNode.childNodes[i].tagName=='TD')
{
rowNode.childNodes[i].style.backgroundColor = rowStyleHover[currentRowNum];
}
}
}

</script> <table class="t15standard" summary="Report">
The JavaScript was lifted from an APEX application that used a Generic Columns Report Template; as I mentioned before, this is hard-wired into that type of report template, but not into the Named Column Report Template; thus, we have to do it ourselves. The last line simple opens the table and assigns it a class, so that it matches the rest of the reports in our theme.

Finally, simply enter the following for After Headers to close the HTML table:
</table>
That should do it for the template. All that remains is to create your APEX application that contains a report on page 1 based on the ENAME, EMPNO & SAL columns of EMP and a form on page 2 based on the EMP table.

The resulting report should look something like this:

Clicking anywhere on the row would be the equivalent of clicking on an edit icon.