Мы узнаем, как создать HTML-форму и подключить ее к электронной таблице Google для сохранения ответов с помощью скрипта Google Apps.
Давайте посмотрим, что нам нужно сделать, чтобы использовать скрипт Google Apps для создания такой формы.
- Перейдите в редактор сценариев внутри электронной таблицы.
- Создайте файлы index.html, JavaScript.html и Code.gs из пункта меню «Добавить файл».
index.html — в этом файле мы напишем HTML-код для формы.
stylesheet.html — этот файл содержит CSS, необходимые для оформления HTML-формы.
JavaScript.html — в этом файле у нас есть скрипт, который будет обрабатывать входящие и исходящие ответы от скрипта Google Apps.
Code.gs — этот файл является файлом скрипта Google по умолчанию, который будет содержать только скрипт Google Apps для записи ответов формы в электронную таблицу Google.
Выполните следующие действия, чтобы создать HTML-форму и подключение к Google Spreadsheet.
Шаг 1.На странице редакторасоздайте страницу index.html и напишите код HTML для создания формы. См. приведенный ниже пример кода.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("JavaScript"); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8" style="background: bisque;">
<div id="output"></div>
<center>
<div>
<h1>-HTML Form-</h1>
<form id="myForm" onsubmit="addRow(this)">
<p class="h4 mb-4 text-center">Details</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="fyear">Financial Year</label>
<input type="text" class="form-control" id="fyear" name="fyear" placeholder="Financial Year" required>
</div>
<div class="form-group col-md-6">
<label for="source_file">Source File Path</label>
<input type="text" class="form-control" id="source_file" name="source_file" placeholder="Source File Path" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="resume_no">No of Resume to Shortlist </label>
<input type="number" class="form-control" id="resume_to_shortlist" name="resume_to_shortlist" placeholder="" required>
</div>
<div class="form-group col-md-6">
<label for="overall_experience">Overall Experience </label>
<input type="number" class="form-control" id="overall_experience" name="overall_experience" placeholder="Overall Experience" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="primary_skills">Primary Skills</label>
<input type="text" class="form-control" id="primary_skills" name="primary_skills" placeholder="Primary Skills" required>
</div>
<div class="form-group col-md-6">
<label for="skill_looking_for">Skills Looking For</label>
<input type="text" class="form-control" id="skill_looking_for" name="skill_looking_for" placeholder="Skills Looking For" required>
</div>
</div>
<div class="form-group">
<label for="exclude_search">Exclude from Search</label>
<input type="text" class="form-control" id="exclude_search" name="exclude_search" placeholder="Exclude from Search">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<br><br>
</div>
</center>
</div>
</div>
</div>
</body>
</html>
В приведенном выше примере кода у нас есть несколько полей ввода, и мы определили их с атрибутами name, id, кроме того, мы включили JavaScript.html следующим образом ‹?!= include("JavaScript") ; ?›, мы используем такой синтаксис для включения файла.
У нас также есть функция: «addRow(this)» в форме, которая будет использоваться для передачи данных на страницу JavaScript.
Шаг 2: Создайте файл JavaScript.html и напишите свой сценарий для получения данных на основе атрибута имени поля ввода. См. пример кода ниже.
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function addRow(formObject)
{
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).addRecord(formObject);\
}
function updateUrl(url) {
var div = document.getElementById('output');
if(url !=""){
// div.innerHTML = url;
div.innerHTML = '<div class="alert alert-success" role="alert"> Details have been received successfully! </div>';
document.getElementById("myForm").reset();
}
}
function onFailure(error) {
var div = document.getElementById('output');
// div.innerHTML = error.message;
div.innerHTML = '<div class="alert alert-danger" role="alert"> Something went wrong</div>';
}
</script>
В приведенном выше коде у нас есть функция addRow, которая имеет несколько функций библиотеки Google Script, давайте разберемся с этим.
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).addRecord(formObject);
В этом скрипте есть две функции, которые вызываются на основе событий успеха и неудачи выполнения скрипта. Поэтому у нас есть такие функции, как при успешном выполнении будет вызываться функция «updateUrl», а при неудаче — «onFailure». В случае успеха мы отправляем объект формы в файл Google Script, который называется «Code.gs».
Шаг 3. На этом шаге мы обработали то же самое и выполнили задачу так, как хотели бы. Давайте сначала посмотрим пример кода, а затем объяснение.
function doGet(request) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function addRecord(formObject) {
try {
var ss = SpreadsheetApp.openById("YOUR_SPREADSHEET_ID");
var webAppSheet = ss.getSheetByName("Sheet1");
webAppSheet.getRange(2,1,1,webAppSheet.getLastColumn()).setValues([[
formObject.fyear,
formObject.resume_to_shortlist,
formObject.overall_experience,
formObject.primary_skills,
formObject.skill_looking_for,
formObject.exclude_search,
formObject.source_file
]]);
return fileUrl;
} catch (error) {
return error.toString();
}
}
В этом примере кода у нас есть следующие функции, давайте разберемся с каждой из них.
- doGet(): эта функция используется для получения ответа и возврата содержимого страницы шаблона HTML.
- include(): функция используется для включения файла в наш индексный файл, поскольку это то же самое, что и встраивание файла в ваш основной файл, мы должны следовать этому, чтобы сохранить чистый код и для лучшего понимания для то же самое, когда мы передаем имя файла внутри функции как include("JavaScript.html"), он добавит файл скрипта в файл index.html.
- addRecord(): это функция, которая принимает объект формы в том виде, в каком мы определили его в файле JavaScript. В этой функции мы объявили идентификатор Google Spreadsheet и диапазон для сохранения ответа из формы.
Чтобы получить данные формы, мы используем атрибут name поля ввода с formobject следующим образом — скажем, если у вас есть «fyear» — это ваш атрибут имени, тогда мы принимаем его как formObject.fyear, чтобы получить значение этого, аналогично мы будем делать для всех значений, и есть массив, объявленный для приема всех значений в этом.
Теперь нам просто нужно установить эти значения в выбранном диапазоне электронной таблицы Google следующим образом.
webAppSheet.getRange(2,1,1,webAppSheet.getLastColumn()).setValues([[ formObject.fyear, formObject.resume_to_shortlist, formObject.overall_experience, formObject.primary_skills, formObject.skill_looking_for, formObject.exclude_search, formObject.source_file ]]);
Я надеюсь, что эта статья даст вам больше информации о скриптах Google Apps.
Если вы хотите изучить скрипт Google Apps и автоматизировать Google Workspace? обязательно попробуйте эту электронную книгу на тему Скрипт Google Apps: руководство для начинающих».
Я был бы рад, если бы вы подписались и проголосовали на средней платформе за больше таких обучающих статей. Большое спасибо!
