I'm trying to write a small Google Apps Script that will help users navigate and use a Google Spreadsheet. There's a small form they can fill out. Among other things, it will take them to a particular sheet.
However, the callback for the form does not appear to be working. I'm really not sure why. I lifted the the ServerClickHandler/ElementCallBack code from a tutorial that works for me (http://www.youtube.com/watch?v=5VmEPo6Rkq4). I trimmed out the script and tried using different widgets and panels. Nothing seems to work. This is probably something stupid that I just can't see.
When I click the Submit button in the form this script creates, I get the following error:
"Error encountered: "parameter" is not defined."
At the end of my rope. Been debugging this for 3 hours. (Novice programmer -- please excuse my incompetence.)
Thank you in advance for your help.
function createIncidentDialog() {
var app = UiApp.createApplication().setTitle('Incident');
var panel = app.createVerticalPanel();
var grid = app.createGrid(3,2).setId('submissionGrid');
var shortNameLabel = app.createLabel('Incident Code');
var shortNameTextBox = app.createTextBox().setName('shortName').setId('shortName');
var regionLabel = app.createLabel('Select Geographic Region');
var radio1 = app.createRadioButton('group1', 'North').setName('north').setId('north');
var radio2 = app.createRadioButton('group1', 'Central').setName('central').setId('central');
var radio3 = app.createRadioButton('group1', 'South').setName('south').setId('south');
var regionPicker = app.createVerticalPanel().add(radio1).add(radio2).add(radio3);
var submitButton = app.createButton('Submit');
var submitLabel = app.createLabel("Click!");
grid.setWidget(0, 0, shortNameLabel)
.setWidget(0, 1, shortNameTextBox)
.setWidget(1, 0, regionLabel)
.setWidget(1, 1, regionPicker)
.setWidget(2, 0, submitButton)
.setWidget(2, 1, submitLabel);
panel.add(grid);
var clickHandler = app.createServerClickHandler("writeIncident");
submitButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(panel);
// assemble everything in app
app.add(panel);
var doc = SpreadsheetApp.getActive();
// show the app
doc.show(app);
}
// this function responds to submit button
function writeIncident(e) {
var app = UiApp.getActiveApplication();
var shortNameValue = e.parameter.shortName;
if (e,parameter.north == 1){
var regionValue = "North";
}
else if (e.parameter.central == 1){
var regionValue = "Central";
}
else if (e.parameter.south == 1){
var regionValue = "South";
}
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.setActiveSheet(ss.getSheetByName(regionValue));
return app.close();
};
I see you have a typo
if (e,parameter.north == 1){
var regionValue = "North";
}
Try replacing the comma with a dot.
Related
I got the problem since google isnt supporting UIapi anymore i cant use the code below. Could someone help me with it and re-edit to html service? I have no clue about any of those stuff. Code was copied from other site long time ago. Tryed to find a solution for the last 2 days and nothing. Would be really greatfull.
regards
// upload document into google spreadsheet
// and put link to it into current cell
function onOpen(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet()
var menuEntries = [];
menuEntries.push({name: "", functionName: "doGet"});
ss.addMenu("", menuEntries);
}
function doGet(e) {
var app = UiApp.createApplication().setTitle("");
SpreadsheetApp.getActiveSpreadsheet().show(app);
var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
var formContent = app.createVerticalPanel();
form.add(formContent);
formContent.add(app.createFileUpload().setName('thefile'));
// these parameters need to be passed by form
// in doPost() these cannot be found out anymore
formContent.add(app.createHidden("activeCell", SpreadsheetApp.getActiveRange().getA1Notation()));
formContent.add(app.createHidden("activeSheet", SpreadsheetApp.getActiveSheet().getName()));
formContent.add(app.createHidden("activeSpreadsheet", SpreadsheetApp.getActiveSpreadsheet().getId()));
formContent.add(app.createSubmitButton(''));
app.add(form);
SpreadsheetApp.getActiveSpreadsheet().show(app);
return app;
}
function doPost(e) {
var app = UiApp.getActiveApplication();
app.createLabel('');
var fileBlob = e.parameter.thefile;
var doc = DriveApp.getFolderById('0BzI2pkyLXZ5maWo5b2Uyb3JWdzQ').createFile(fileBlob);
var label = app.createLabel('');
// write value into current cell
var value = 'hyperlink("' + doc.getUrl() + '";"' + doc.getName() + '")'
var activeSpreadsheet = e.parameter.activeSpreadsheet;
var activeSheet = e.parameter.activeSheet;
var activeCell = e.parameter.activeCell;
var label = app.createLabel('');
app.add(label);
SpreadsheetApp.openById(activeSpreadsheet).getSheetByName(activeSheet).getRange(activeCell).setFormula(value);
app.close();
return app;
}
I'm trying to understand how handlers work with validation in Google's UI Service.
If I have a text box with a button and I only want to contact the server if the text box is 1) Not Empty and 2) Contains a specific value, for e.g. 'Fred' how do I create a validation function that checks if the value is 'Fred' before allowing the serverhandler to fire?
Some example code:
function myValid() {
//create the app
var app = UiApp.createApplication();
//set out UI in table
var flex = app.createFlexTable()
.setWidget(0, 0, app.createTextBox().setName('textbox').setId('textbox'))
.setWidget(0, 1, app.createButton('Submit').setId('submit'))
.setWidget(0, 2, app.createLabel().setId('status'));
//server handler - fires only if textbox isn't empty
var serverHandler = app.createServerHandler('submit')
.validateLength(app.getElementById('textbox'), 1, null)
.addCallbackElement(flex);
//my custom handler to check the value of the textbox
var myserverHandler = app.createServerHandler('myCheck')
.addCallbackElement(flex);
//client handler to display a message if textbox is empty
var clientHandler = app.createClientHandler()
.validateNotLength(app.getElementById('textbox'), 1, null)
.forTargets(app.getElementById('status'))
.setText('Cannot be empty');
//add the handlers to the submit button
app.getElementById('submit')
.addClickHandler(serverHandler)
.addClickHandler(myserverHandler)
.addClickHandler(clientHandler);
//add table to UI
app.add(flex);
//show app in the current spreadsheet
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
//check to see if textbox value is 'Fred'. If not display error
function myCheck(e) {
var app = UiApp.getActiveApplication();
if (e.parameter.textbox != "Fred")
var errorLabel = app.createLabel("Incorrect Value");
app.add(errorLabel);
return app;
}
//If all validation passes then display message
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}
I have attempted to use a serverhandler to check the textbox value but a clienthandler would be better. How do I write a custom client handler to check the textbox value for 'Fred'? Also, how do I prevent the serverhandler firing before all my validation conditions are met?
Thanks
The solution is simpler than your code, one server handler is enough with a single validation on "Fred" and a ClientHandler using validateNotMatches.
Code below.
function myValid() {
var app = UiApp.createApplication();
var textBox = app.createTextBox().setName('textbox').setId('textbox');
var btn = app.createButton('Submit');
var label = app.createLabel().setId('status');
var flex = app.createFlexTable()
.setWidget(0, 0, textBox)
.setWidget(0, 1, btn)
.setWidget(0, 2, label);
var serverHandler = app.createServerHandler('submit')
.validateMatches(textBox, 'Fred')
.addCallbackElement(flex);
var clientHandler = app.createClientHandler()
.validateNotMatches(textBox, 'Fred').forTargets(label).setText('Missing or invalid value');
btn.addClickHandler(serverHandler).addClickHandler(clientHandler);
app.add(flex);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}
This code accepts any answer "containing" Fred, if you want it to reject anything but "Fred" alone just add a validation on the textBox length == 4 (validateLength,textBox,4,4), I wasn't sure what you really wanted...
Edit : Thanks for accepting, this edit just to mention there is also another approach that might interest you using btn.setEnabled() and a KeyUpHandler, code below... the choice is yours ;-)
function myValid() {
var app = UiApp.createApplication();
var textBox = app.createTextBox().setName('textbox').setId('textbox');
var btn = app.createButton('Submit').setEnabled(false);
var label = app.createLabel().setId('status');
var flex = app.createFlexTable()
.setWidget(0, 0, textBox)
.setWidget(0, 1, btn)
.setWidget(0, 2, label);
var serverHandler = app.createServerHandler('submit')
.validateMatches(textBox, 'Fred')
.addCallbackElement(flex);
btn.addClickHandler(serverHandler);
var btnHandler = app.createClientHandler().validateMatches(textBox,'Fred').forTargets(btn).setEnabled(true);
textBox.addKeyUpHandler(btnHandler);
app.add(flex);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}
I created this script to be able to send an email after a grid has been filled with information. Before the email is sent, another display comes in an warns the user to continue only if the information is correct. At the end the script sends an email to me, with the info entered by the user. The problem is here, when I received the email, the fields that the script is suppose to replace are shown as undefined and no info is there. Any ideas on what is wrong here??
Thank you!
function runmyapp() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var app = UiApp.createApplication().setTitle('Title 1');
var grid = app.createGrid(4, 5);
grid.setWidget(0, 0, app.createLabel('Time '));
grid.setWidget(0, 1, app.createTextBox().setName('Time'));
grid.setWidget(1, 0, app.createLabel('Minutes'));
grid.setWidget(1, 1, app.createTextBox().setName('Minutes'));
grid.setWidget(2, 0, app.createLabel('Enter Name'));
grid.setWidget(2, 1, app.createTextBox().setName('Name'));
grid.setWidget(3, 0, app.createLabel('Email'));
grid.setWidget(3, 1, app.createTextBox().setName('email'));
var panel = app.createVerticalPanel();
panel.add(grid);
var button = app.createButton('Submit').setId("button");
var handler2 = app.createServerHandler('dis');
handler2.addCallbackElement(grid);
button.addClickHandler(handler2);
var handler = app.createServerHandler('disc');
handler.addCallbackElement(grid);
button.addClickHandler(handler);
// Add the button to the panel and the panel to the application, then display the application app
panel.add(button);
app.add(panel);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function dis(e){
var app = UiApp.getActiveApplication();
app.getElementById("button").setText("Request is in process, please wait!").setEnabled(false);
return app;
};
function disc(e){
var app = UiApp.getActiveApplication();
var html1 = app.add(app.createHTML("<p><p>Hello Expert,</p>"+
"<p>By clicking OK you agree that your information is correct</p>");
var button = app.createButton('Ok').setId("button");
app.add(button);
var handler2 = app.createServerHandler('gsnot');
button.addClickHandler(handler2);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
return app;}
function gsnot(e) {
var advancedArgs = {bcc:e.parameter.email};
var emailSubject = "Subject";
var address ="albdominguez25#gmail.com";
var emailTemplate =SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Templates").getRange("A1").getValue( ) ;
emailTemplate = emailTemplate.replace("TIME", e.parameter.Times).replace("MIN", e.parameter.Minutes).replace("EXP", e.parameter.Name);
MailApp.sendEmail(address, emailSubject, emailTemplate, advancedArgs);
Browser.msgBox("Your Email has been sent!");
var app = UiApp.getActiveApplication();
app.close();
// The following line is REQUIRED for the widget to actually close.
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
To make a widget value show on your e.parameter you need to add it (or a parent panel) as a callback element on the handler. Like this:
function runmyapp() {
//...
var grid = app.createGrid(4, 5).setId('grid');
//...
}
function disc(e){
//...
var grid = app.getElementById('grid');
var handler2 = app.createServerHandler('gsnot').addCallbackElement(grid);
//...
}
Keep Henrique's answer as best one please.
You can try to change your disc(e) function like this :
function disc(e){
var app = UiApp.getActiveApplication();
var html1 = app.add(app.createHTML("<p><p>Hello Expert,</p>"+
"<p>By clicking OK you agree that your information is correct</p>"));
var grid = app.getElementById('grid')
var button = app.createButton('Ok').setId("button");
app.add(button);
var handler3 = app.createServerHandler('gsnot');// use a different name to avoid confusion
handler3.addCallbackElement(grid);
button.addClickHandler(handler3);
return app;}
And, also, there is a typo in your code in this line :
emailTemplate = emailTemplate.replace("TIME", e.parameter.Times).replace("MIN", e.parameter.Minutes).replace("EXP", e.parameter.Name);
Time has no 's' at the end in the original name ! ;)
and, last point, if I where you I wouldn't call show(app) in disc so the UI would keep the data validation while confirming... (but that's a matter of choice ;-)
I am getting "TypeError: Cannot read property "parameter" from undefined." when trying to log e.parameter properties. (I inserted the following lines in the contactMe() function)
Logger.log(e.parameter.textBox);
Logger.log(e.parameter);
The script otherwise works fine, any idea?
function doGet() {
var app = UiApp.createApplication();
var mainPanel = app.createVerticalPanel().setId('mainPanel');
app.add(mainPanel);
mainPanel.add(app.createLabel('Enter your email to sign up'));
var form = app.createHorizontalPanel();
mainPanel.add(form);
var email = app.createTextBox().setName('textBox').setId('textBox');
form.add(email);
var button = app.createButton('Sign up');
form.add(button);
var info = app.createLabel().setVisible(true).setId('info');
mainPanel.add(info);
//handler
var handler = app.createServerHandler('contactMe').addCallbackElement(mainPanel);
button.addClickHandler(handler);
return app;
}
function contactMe(e){
var app = UiApp.getActiveApplication();
Logger.log("testing");
Logger.log(e.parameter);
Logger.log(e.parameter.textBox);
app.getElementById('textBox').setValue('').setStyleAttribute("color", "black");
app.getElementById('info').setText('Thank you!').setStyleAttribute("color", "black");
var ss = SpreadsheetApp.openById('0AqKSxC6f0Cc7dF9aT1lUeXFEcnR2eUFYRGs4Y1NiVVE')
.getSheets()[0];
var range = ss.getRange(ss.getLastRow()+1, 1, 1, 2);
var values = [[new Date(),e.parameter.textBox]];
range.setValues(values);
return app;
}
I just tested your exact code (except the sheet stuff) and it works nicely... except that the logger doesn't show anything when called from a handler function but that's a known issue...
I used the label to check the e.parameter value like this :
app.getElementById('info').setText(e.parameter.textBox).setStyleAttribute("color", "black");
A bit out of the box but i think it should work:
function doGet() {
var app = UiApp.createApplication();
var mainPanel = app.createFormPanel;
app.add(mainPanel);
mainPanel.add(app.createLabel('Enter your email to sign up'));
var form = app.createHorizontalPanel();
mainPanel.add(form);
var email = app.createTextBox().setName('textBox').setId('textBox');
form.add(email);
var button = app.createSubmitButton('Sign up');
form.add(button);
var info = app.createLabel().setVisible(true).setId('info');
mainPanel.add(info);
return app;
}
function doPost(e){
var app = UiApp.getActiveApplication();
//Logger wont work in uiApps
//in Form panels the UI is cleared so you want to write a thank you note
app.add(app.createLabel("Thanks"));
var ss = SpreadsheetApp.openById('0AqKSxC6f0Cc7dF9aT1lUeXFEcnR2eUFYRGs4Y1NiVVE')
.getSheets()[0];
var range = ss.getRange(ss.getLastRow()+1, 1, 1, 2);
var values = [[new Date(),e.parameter.textBox]];
range.setValues(values);
return app;
With kind regards,
Thomas van Latum
I just copy pasted your complete code made a spreadsheet and ran it.
It works just perfectly dont forget your } at the end.....
I use the following code to create a kind of dropbox for my students. The form is embedded on a google site page . When the file is sent in the "dropbox" folder, it is automatically converted in a text file. I did try with a .doc, .xls and .pdf...
Should it be possible to avoid this problem ?
Thanks a lot
Jean-Paul
var folderName = "Assignments-Spring-2011";
function doGet() {
var app = UiApp.createApplication().setTitle("Upload Assignment");
app.setHeight(180);
var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
var formContent = app.createGrid().resize(6,2);
form.add(formContent);
formContent.setWidget(1, 0, app.createLabel('Assignment Number:'));
var assignmentNumberList = app.createListBox();
assignmentNumberList.addItem("Assignment 1");
assignmentNumberList.addItem("Assignment 2");
assignmentNumberList.addItem("Assignment 3");
assignmentNumberList.addItem("Assignment 4");
assignmentNumberList.addItem("Assignment 5");
assignmentNumberList.addItem("Assignment 6");
assignmentNumberList.addItem("Assignment 7");
assignmentNumberList.addItem("Assignment 8");
formContent.setWidget(1, 1, assignmentNumberList.setName('assignmentNumber'));
formContent.setWidget(3, 0, app.createLabel('Assignment File:'));
formContent.setWidget(3, 1, app.createFileUpload().setName('thefile'));
formContent.setWidget(5, 0, app.createSubmitButton('Submit Assignment!'));
// thank you panel
var panel = app.createSimplePanel().setVisible(false).setId("thankyouPanel");
var label = app.createLabel("Thank you for submitting the Assignment").setStyleAttribute("fontSize", "16px");
panel.add(label);
app.add(panel);
app.add(form);
return app;
}
function doPost(e) {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var name = Session.getActiveUser().getUserLoginId();
var assignmentFile = e.parameter.file;
var uploadBlob = Utilities.newBlob (assignmentFile, "text/plain",e.parameter.assignmentNumber+"-"+name+"-"+e.parameter.thefile.name );
var doc = DocsList.createFile(uploadBlob);
// get assignment folder
var folder = DocsList.getFolder(folderName);
doc.addToFolder(folder);
var app = UiApp.getActiveApplication();
var form = app.getElementById("frm").setVisible(false);
var panel = app.getElementById("thankyouPanel").setVisible(true);
app.close();
return app;
}
It looks as thought he code you've used is intentionally restricting it to text:
var uploadBlob = Utilities.newBlob (assignmentFile, "text/plain",e.parameter.assignmentNumber+"-"+name+"-"+e.parameter.thefile.name );
Simply eliminate that line and redirect your variables like so
var uploadBlob = e.parameter.file;
Should set you straight.