Saturday, August 6, 2011

We All Need a Little Support

Last month, I alluded to a future post that would show the usefulness of document.getElementById('element').value. I'm delivering on that promise now.

This post explores a few different techniques within webOS and PhoneGap to create a highly functional application. To illustrate the idea, we'll make a support form.

Set up a standard HTML page with the usual PhoneGap reference. We'll write the structure of the form in the body of the document.
<h2 align="center">Support Request</h2>
<h3 align="center">Help us help you!</h3>
<p align="center">Please fill out the below form to contact support.</p>
<form align="center" name="oForm">
<tr><td align="right">Name:</td>
<td><input type="text" name="name" id="name" /></td></tr>
<tr><td align="right">E-mail:</td>
<td><input type="text" name="add" id="add" /></td></tr>
<tr><td align="right">Problem:</td>
<td><textarea rows="5" cols="22" name="problem" id="problem"></textarea></td></tr>
<input type="button" onclick="formSubmit()" value="Submit form" align="center"/>
There are a couple of important parts to note. Each of the input fields has its own id value to identify it, and the form triggers formSubmit() on the button click. The formSubmit function is where the fun twiddly bits go.
function formSubmit(){
var datestamp=new Date();
var title= "Support Request from "+ document.getElementById('name').value;
var text_cont="Name: "+document.getElementById('name').value+"<br/>E-mail Address: " +document.getElementById('add').value+"<br />Timestamp: "+datestamp +"<br />Problem: "+document.getElementById('problem').value;
try { this.service = navigator.service.Request('palm://com.palm.applicationManager', { method: 'launch', parameters: { id: "", params: { summary: title, text: text_cont, recipients: [{
contactDisplay:"John Smith" }] } } }); }
catch(ex) {console.log("error");}
The first few variables are strings that construct various parts of the message. You can see at that point that we're pulling the form field contents using document.getElementById('element').value. We then take those variables and use navigator.service.Request to launch the e-mail app and pass the parameters to it.

Now, let's put it to the test. Superman is having some connectivity issues.

Superman then submits the form, which composes a structured and date stamped email to system administrator John Smith. (What, were you expecting Lex Luthor to be the Sysadmin? He's busy.)

You can see the power and flexibility behind this method, as it allows you to act on any form input from a user such as radio, dropdown lists, and more. The ability to pass those parameters to a composed email is a useful trick as well. This example is posted in a github gist, please feel free to use and distribute the code as you see fit.