Applications built for the UiApp have four basic types of functions: doGet, which you are familiar with; doPost, which you will learn about later; functions that return values directly; and functions that are intended to be used via a handler. They aren’t really that different, however, when you use them can be important. For example, you always need doGet to display the UI in a gadget, and if you are using a form panel, you will likely need a doPost function.

When you operate a function using a handler and your intent is to update the UI, you must call on the active UI and return it at the end of the processing. Here is what that looks like:

function contactMe(e){
  var app = UiApp.getActiveApplication();
  //code here
  return app;
}

Notice the (e) in the function arguments. That will be the variable that contains the information we passed in the handler. To get at that information, we will use the property parameter where the information is stored and the name we gave the object. For us that is “textBox” so:

var email = e.parameter.textBox

I have shown the value loaded in a variable email to help you make the connection as to what we are accessing. Later in this chapter we will send that email address to a Google spreadsheet for storage, but for now let’s look at returning some information to the user. Because we loaded the active UiApp into the variable app we can call on elements by their ID.

Let me pause for a second here and cover something that really confuses people. You can set values, add widgets, and change the attributes of elements from a function using an ID, but you can’t get their values by ID. To get a value, you must pass it through the handler and use e.parameter.<name>. That also means you need to set the name of the element. This goes back to when we discussed RPC and how that works.

To give the user, and you as well, some indication that the button works, we will set the value of the text box to nothing and add a label that says “Thank you.”

Replace  “//code here” with the following lines:

 app.getElementById('textBox').setValue('').setStyleAttribute("color", "black");
 app.getElementById('info').setText('Thank you!').setStyleAttribute("color", "black");

The getElementById part will call on the ID of those elements passed in the callback and allow you to act on them. For the text box, we set the value to an empty string and then we call on the info label to set a new text value. After clicking the button, the contactMe function will run and update the UI.

Save your file, and refresh your UI browser window to load in the new code. Now type anything into the text box and click the button. You should see the text box clear and your “thank you” appear. Congratulations, you are now using AJAX.

A few small problems: the value did not go anywhere and you can type in anything you want. Let’s solve the email verification part first.

Here is the contactMe function all together:

function contactMe(e){
 var app = UiApp.getActiveApplication();
          
 app.getElementById('textBox').setValue('').setStyleAttribute("color", "black");
 app.getElementById('info').setText('Thank you!').setStyleAttribute("color", "black");  
  
 var ss = SpreadsheetApp.openById('0Aq1-C9Nl4dO-dHRWNHd4d21IUHZjbnVlMktWZVY2Z3c').getSheets()[0];
 var range = ss.getRange(ss.getLastRow()+1, 1, 1, 2);
  
 var values = [[new Date(),e.parameter.textBox]];  
 range.setValues(values); 
  
 return app;   
}