toolmania1
New Member
I made a page in my site on google apps. I used their new "Build a User Interface 'Experimental'" to build a ui for the page. Basically, I wanted to put a 'Contact Us 'page in the google sites. I researched and found this is not possible in html. I even copied html code for a different 'Contact Us' page I had already made in html and php from another page I made and pasted it into a page I made for my google site. The page was not displayed. When I took the <form> and </form> tags out, the rest of the table was displayed correctly. So, I can confirm that I could not just add a form to a page for my google site. Also, I researched and found that php pages cannot be stored on their site.
At this point, I researched and found a lot of old documentation about using spreadsheets to create a 'Contact Us' page. I don't want to use this method. I should be able to use javascript. At least all of the sample code I have found in researching the google apps script looks like they are using javascript.
So, I found this new "Build a User Interface 'Experimental'" in google sites. It actually is easy to use. So, I built a page. I put some textboxes, labels and form panels on there. For the submit button, I clicked on it and then went to Events -> onMouseClick. I chose the function I created in apps script. So, basically, when the submit button is pressed, the code will run for the app script I chose. This works, because when I hard code the email information for the mail function, as I will note later, I do get a successful email.
Anyways, the one strange thing I noticed is that I can only put one child element on each form panel. I thought that I would drop a form panel and put everything inside of it. But, this does not appear to be how this works. So, when I made my design, the way that made sense to me was to add 2 form panels. I put the submit button into one. I put the reset button into another. There were no errors displayed on the screen. I also do not think this is the issue anyways. I think the problem lies when I do the scripting:
=======
function doGet() {
var app = UiApp.createApplication();
app.add(app.loadComponent('emailForm1'));
var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');
var emailToAddressValue = emailToAddress.value;
// var emailToAddressValue = "hey"; user this one to see the hard coded value and I saw it, so I know the other .value are not retrieving the value from the ui page
var subjectValue = subject.value;
var messageValue = message.value;
// debugger
// MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );
MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );
return app;
}
======
Side Note:
I also found that the main function MUST be called "doGet" or google sites throws an error.
=====
So, the problem I am having is that when I leave the above MailApp.sendEmail uncommented:
MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );
I get an error and the mail does not get sent:
"Syntax error: Invalid email: undefined line: ? (line 18)"
But, if I comment that line out and uncomment the line above it where I hard code email addresses in, then I actually do receive the email into my account and no error occurs:
MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );
So, I used their debugger. If you type "debugger" right into the code on the apps script page and then click on the debug icon ( looks like a bug icon ) when you are editing the apps script in google sites, the debugger will run. So, when I run the debugger, the values listed in the debugger for these lines is "undefined" for each one:
var emailToAddressValue = emailToAddress.value;
var subjectValue = subject.value;
var messageValue = message.value;
So, I am not retrieving the value of the items on the ui I build using the "Build a User Interface 'Experimental'".
Also, in the debugger still, I have the value of "Object xxxxx" for each of the elements when I grab them by id:
var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');
So, I know I am able to retrieve the elements by id. I just cannot get the values that are typed in. But, actually, I never get a chance to retrieve the values since the page errors and does not display the page correctly when I navigate to the page in a browser.
I think this is a simple javascript problem though. I know javascript a little, but I still have some stuff to learn. So, maybe I am making a simple mistake. Does anyone have any idea why I do not have a value for any of these variables?
By the way, here is how I opened the "Build a User Interface 'Experimental'" for those of you who will read this and want to use this:
1. Create google account
2. Log into google with your new account ( I log into gmail first so that I am logged into google )
3. Open a new tab and go to http://www.google.com
4. Click on More and then click on Even More
5. Under "Home and Office", click on Sites
6. Click on Create
7. Follow instructions to create the new site
8. Now, go back to the sites page if you have not been taken directly to your new site ( I don't remember since I already have a site created and it just comes up for me already )
9. Click on your site
10. Click on More -> Manage Site
11. Click on App Scripts
12. Click on Add New Script
13. Save the new script ( even if you don't put anything into the function they put up on the screen for you right now )
14. Now, click on File -> Build a User Interface 'Experimental'
15. Build the interface
16. Add a form panel
17. Add a submit button inside the form panel
18. Click on the submit button
19. On the right side, click on Events -> onMouseClick
20. Choose the function the you saved in step 13, it should be listed with the name of the function here
21. Save the ui by File -> Save
21. Hit the page in a browser now
At this point, I researched and found a lot of old documentation about using spreadsheets to create a 'Contact Us' page. I don't want to use this method. I should be able to use javascript. At least all of the sample code I have found in researching the google apps script looks like they are using javascript.
So, I found this new "Build a User Interface 'Experimental'" in google sites. It actually is easy to use. So, I built a page. I put some textboxes, labels and form panels on there. For the submit button, I clicked on it and then went to Events -> onMouseClick. I chose the function I created in apps script. So, basically, when the submit button is pressed, the code will run for the app script I chose. This works, because when I hard code the email information for the mail function, as I will note later, I do get a successful email.
Anyways, the one strange thing I noticed is that I can only put one child element on each form panel. I thought that I would drop a form panel and put everything inside of it. But, this does not appear to be how this works. So, when I made my design, the way that made sense to me was to add 2 form panels. I put the submit button into one. I put the reset button into another. There were no errors displayed on the screen. I also do not think this is the issue anyways. I think the problem lies when I do the scripting:
=======
function doGet() {
var app = UiApp.createApplication();
app.add(app.loadComponent('emailForm1'));
var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');
var emailToAddressValue = emailToAddress.value;
// var emailToAddressValue = "hey"; user this one to see the hard coded value and I saw it, so I know the other .value are not retrieving the value from the ui page
var subjectValue = subject.value;
var messageValue = message.value;
// debugger
// MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );
MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );
return app;
}
======
Side Note:
I also found that the main function MUST be called "doGet" or google sites throws an error.
=====
So, the problem I am having is that when I leave the above MailApp.sendEmail uncommented:
MailApp.sendEmail( emailToAddressValue, subjectValue, messageValue );
I get an error and the mail does not get sent:
"Syntax error: Invalid email: undefined line: ? (line 18)"
But, if I comment that line out and uncomment the line above it where I hard code email addresses in, then I actually do receive the email into my account and no error occurs:
MailApp.sendEmail("[email protected]", "Here is the subject", "Here is some text" );
So, I used their debugger. If you type "debugger" right into the code on the apps script page and then click on the debug icon ( looks like a bug icon ) when you are editing the apps script in google sites, the debugger will run. So, when I run the debugger, the values listed in the debugger for these lines is "undefined" for each one:
var emailToAddressValue = emailToAddress.value;
var subjectValue = subject.value;
var messageValue = message.value;
So, I am not retrieving the value of the items on the ui I build using the "Build a User Interface 'Experimental'".
Also, in the debugger still, I have the value of "Object xxxxx" for each of the elements when I grab them by id:
var emailToAddress = app.getElementById('emailTextBox');
var subject = app.getElementById('SubjectTextBox');
var message = app.getElementById('MessageTextBox');
So, I know I am able to retrieve the elements by id. I just cannot get the values that are typed in. But, actually, I never get a chance to retrieve the values since the page errors and does not display the page correctly when I navigate to the page in a browser.
I think this is a simple javascript problem though. I know javascript a little, but I still have some stuff to learn. So, maybe I am making a simple mistake. Does anyone have any idea why I do not have a value for any of these variables?
By the way, here is how I opened the "Build a User Interface 'Experimental'" for those of you who will read this and want to use this:
1. Create google account
2. Log into google with your new account ( I log into gmail first so that I am logged into google )
3. Open a new tab and go to http://www.google.com
4. Click on More and then click on Even More
5. Under "Home and Office", click on Sites
6. Click on Create
7. Follow instructions to create the new site
8. Now, go back to the sites page if you have not been taken directly to your new site ( I don't remember since I already have a site created and it just comes up for me already )
9. Click on your site
10. Click on More -> Manage Site
11. Click on App Scripts
12. Click on Add New Script
13. Save the new script ( even if you don't put anything into the function they put up on the screen for you right now )
14. Now, click on File -> Build a User Interface 'Experimental'
15. Build the interface
16. Add a form panel
17. Add a submit button inside the form panel
18. Click on the submit button
19. On the right side, click on Events -> onMouseClick
20. Choose the function the you saved in step 13, it should be listed with the name of the function here
21. Save the ui by File -> Save
21. Hit the page in a browser now