Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

260 lines (242 sloc) 8.42 KB
<!-- [START apps_script_forms_notifications_quickstart] -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
.branding-below {
bottom: 54px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.logo {
vertical-align: middle;
}
.width-100 {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
label {
font-weight: bold;
}
#creator-options,
#respondent-options {
background-color: #eee;
border-color: #eee;
border-width: 5px;
border-style: solid;
display: none;
}
#creator-email,
#respondent-email,
#button-bar,
#submit-subject {
margin-bottom: 10px;
}
#response-step {
display: inline;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<form>
<div class="block">
<input type="checkbox" id="creator-notify">
<label for="creator-notify">Notify me</label>
</div>
<div class="block form-group" id="creator-options">
<label for="creator-email">
My email addresses (comma-separated)
</label>
<input type="text" class="width-100" id="creator-email">
<label for="response-step">Send notifications after every</label>
<input type="number" id="response-step" value="10"
min="1" max="99999"> responses (default 10)
</div>
<div class="block">
<input type="checkbox" id="respondent-notify">
<label for="respondent-notify">Notify respondents</label>
</div>
<div class="block form-group" id="respondent-options">
<label for="respondent-email">
Which question asks for their email?
</label>
<select class="width-100" id="respondent-email"></select>
<label for="submit-subject">
Notification email subject:
</label>
<input type="text" class="width-100" id="submit-subject">
<label for="submit-notice">Notification email body:</label>
<textarea rows="8" cols="40" id="submit-notice"
class="width-100"></textarea>
</div>
<div class="block" id="button-bar">
<button class="action" id="save-settings">Save</button>
</div>
</form>
</div>
<div class="sidebar bottom">
<img alt="Add-on logo" class="logo" width="25"
src="https://g-suite-documentation-images.firebaseapp.com/images/newFormNotificationsicon.png">
<span class="gray branding-text">Form Notifications by Google</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
/**
* On document load, assign required handlers to each element,
* and attempt to load any saved settings.
*/
$(function() {
$('#save-settings').click(saveSettingsToServer);
$('#creator-notify').click(toggleCreatorNotify);
$('#respondent-notify').click(toggleRespondentNotify);
$('#response-step').change(validateNumber);
google.script.run
.withSuccessHandler(loadSettings)
.withFailureHandler(showStatus)
.withUserObject($('#button-bar').get())
.getSettings();
});
/**
* Callback function that populates the notification options using
* previously saved values.
*
* @param {Object} settings The saved settings from the client.
*/
function loadSettings(settings) {
$('#creator-email').val(settings.creatorEmail);
$('#response-step').val(!settings.responseStep ?
10 : settings.responseStep);
$('#submit-subject').val(!settings.responseSubject ?
'Thank you for filling out our form!' :
settings.responseSubject);
$('#submit-notice').val(!settings.responseText ?
'Thank you for responding to our form!' :
settings.responseText);
if (settings.creatorNotify === 'true') {
$('#creator-notify').prop('checked', true);
$('#creator-options').show();
}
if (settings.respondentNotify === 'true') {
$('#respondent-notify').prop('checked', true);
$('#respondent-options').show();
}
// Fill the respondent email select box with the
// titles given to the form's text Items. Also include
// the form Item IDs as values so that they can be
// easily recovered during the Save operation.
for (var i = 0; i < settings.textItems.length; i++) {
var option = $('<option>').attr('value', settings.textItems[i]['id'])
.text(settings.textItems[i]['title']);
$('#respondent-email').append(option);
}
$('#respondent-email').val(settings.respondentEmailItemId);
}
/**
* Toggles the visibility of the form creator notification options.
*/
function toggleCreatorNotify() {
$('#status').remove();
if ($('#creator-notify').is(':checked')) {
$('#creator-options').show();
} else {
$('#creator-options').hide();
}
}
/**
* Toggles the visibility of the form sumbitter notification options.
*/
function toggleRespondentNotify() {
$('#status').remove();
if($('#respondent-notify').is(':checked')) {
$('#respondent-options').show();
} else {
$('#respondent-options').hide();
}
}
/**
* Ensures that the entered step is a number between 1
* and 99999, inclusive.
*/
function validateNumber() {
var value = $('#response-step').val();
if (!value) {
$('#response-step').val(10);
} else if (value < 1) {
$('#response-step').val(1);
} else if (value > 99999) {
$('#response-step').val(99999);
}
}
/**
* Collects the options specified in the add-on sidebar and sends them to
* be saved as Properties on the server.
*/
function saveSettingsToServer() {
this.disabled = true;
$('#status').remove();
var creatorNotify = $('#creator-notify').is(':checked');
var respondentNotify = $('#respondent-notify').is(':checked');
var settings = {
'creatorNotify': creatorNotify,
'respondentNotify': respondentNotify
};
// Only save creator options if notify is turned on
if (creatorNotify) {
settings.responseStep = $('#response-step').val();
settings.creatorEmail = $('#creator-email').val().trim();
// Abort save if entered email is blank
if (!settings.creatorEmail) {
showStatus('Enter an owner email', $('#button-bar'));
this.disabled = false;
return;
}
}
// Only save respondent options if notify is turned on
if (respondentNotify) {
settings.respondentEmailItemId = $('#respondent-email').val();
settings.responseSubject = $('#submit-subject').val();
settings.responseText = $('#submit-notice').val();
}
// Save the settings on the server
google.script.run
.withSuccessHandler(
function(msg, element) {
showStatus('Saved settings', $('#button-bar'));
element.disabled = false;
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, $('#button-bar'));
element.disabled = false;
})
.withUserObject(this)
.saveSettings(settings);
}
/**
* Inserts a div that contains an status message after a given element.
*
* @param {String} msg The status message to display.
* @param {Object} element The element after which to display the Status.
*/
function showStatus(msg, element) {
var div = $('<div>')
.attr('id', 'status')
.attr('class','error')
.text(msg);
$(element).after(div);
}
</script>
</body>
</html>
<!-- [END apps_script_forms_notifications_quickstart] -->
You can’t perform that action at this time.