Cara membuat formulir entri data dengan layanan google html dan mengirimkan data ke google sheets

Question

Dalam posting ini, saya menunjukkan langkah-langkah membuat Formulir HTML Kustom untuk Google Sheets menggunakan Google Apps Script

Table of Contents Show

Catatan Video
Kode dalam Video
Pos terkait
Bisakah Google Formulir mengirim data ke Google Sheets?
Bagaimana Anda membuat Google Sheets untuk membuat formulir input yang diisi dalam spreadsheet?
Bagaimana cara mengotomatiskan entri data di Google Sheets?
Bagaimana cara mendapatkan formulir Google untuk mengumpulkan data di Google Sheets?

Cara Video

Catatan Video

Editor Skrip Aplikasi Lama Digunakan dalam Video
Skrip Aplikasi (Editor Skrip) sekarang berada di bawah tab 'Ekstensi' alih-alih 'Alat' di Google Sheets

Kode dalam Video

function AddRecord(name) {
  
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var mainSheet = ss.getSheetByName("MAIN");
  mainSheet.appendRow([name, new Date()]);
  
}

function startForm()
{
 var form = HtmlService.createHtmlOutputFromFile('AddForm');
 SpreadsheetApp.getUi().showModalDialog(form, 'Add Record');
  
  
}

function addMenu()
{
 var menu = SpreadsheetApp.getUi().createMenu('Custom');
 menu.addItem('Add Record Form', 'startForm');
 menu.addToUi();
  
}

function onOpen(e)
{
  
 addMenu(); 
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function AddRow()
    {
    var name = document.getElementById("name").value;
    google.script.run.AddRecord(name);
    }
    </script>
  </head>
  <body>
    Name:  <input type="text" id="name" />
    <input type="button" value="Add" onclick="AddRow()" />
  </body>
</html>

_

Pos terkait

</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>

Dalam kode contoh di atas, kami memiliki beberapa kolom input dan mendefinisikannya dengan nama, atribut id, selain itu kami menyertakan JavaScript. html sebagai berikut

Kami juga memiliki fungsi. ”addRow(this)” dalam formulir yang akan digunakan untuk mengirimkan data ke halaman JavaScript

Langkah 2. Buat JavaScript. html dan tulis skrip Anda untuk mendapatkan data berdasarkan atribut name dari kolom input. Silakan lihat contoh kode di bawah ini

<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>

Dalam kode di atas, kami memiliki fungsi addRow, yang memiliki beberapa fungsi pustaka Google Script, mari kita pahami itu

google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).addRecord(formObject);

_

Pada script ini terdapat dua fungsi yang dipanggil berdasarkan peristiwa sukses dan gagalnya eksekusi script tersebut. Oleh karena itu, kami memiliki fungsi seperti pada eksekusi yang berhasil, fungsi "updateUrl" akan dipanggil dan pada kegagalan "onFailure". Jika berhasil, kami mengirimkan formulir Object ke file Google Script, yaitu “Code. g”

Langkah 3. Pada langkah ini, kami telah menangani hal yang sama dan melakukan tugas seperti yang ingin kami lakukan. Mari kita lihat contoh kodenya dulu baru penjelasannya

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(); }}

Dalam kode contoh ini, kami memiliki fungsi berikut, mari kita pahami masing-masing

doGet(). Fungsi ini digunakan untuk mendapatkan respon dan mengembalikan konten di halaman template HTML
termasuk(). Fungsi digunakan untuk memasukkan file ke dalam file indeks kami karena sama dengan menyematkan file di dalam file utama Anda, kami harus mengikuti itu untuk menjaga kode tetap bersih dan untuk pemahaman yang lebih baik, ketika kami meneruskan nama file di dalam . html”), itu akan menambahkan file skrip di index. html
addRecord(). Ini adalah fungsi, yang mengambil formobject seperti yang kita definisikan di dalam file JavaScript. Dalam fungsi itu kami mendeklarasikan ID dan rentang Google Spreadsheet untuk menyimpan respons dari formulir

Untuk mendapatkan data formulir, kami menggunakan atribut name dari bidang input dengan formobject sebagai berikut — katakanlah jika Anda memiliki "fyear" adalah atribut nama Anda, maka kami menganggapnya sebagai formObject. fyear, untuk mendapatkan nilai itu, hal yang sama akan kita lakukan untuk semua nilai dan ada array yang dideklarasikan untuk mengambil semua nilai di dalamnya

Sekarang, kita hanya perlu mengatur nilai-nilai tersebut dalam rentang yang diambil dari Google Spreadsheet sebagai berikut

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]]);

_

Saya harap artikel ini akan memberi Anda lebih banyak bersandar pada Google Apps Script

Saya akan senang jika Anda mengikuti dan memberi suara positif pada platform menengah untuk lebih banyak artikel pembelajaran semacam itu. Terima kasih banyak

Untuk pertanyaan apa pun, terkait dengan artikel ini atau saran teknis lainnya, kami dapat mengobrol di Clueby di sini

Bisakah Google Formulir mengirim data ke Google Sheets?

Pilih tempat untuk menyimpan respons . Pilih tujuan tanggapan. Pilih opsi. Buat spreadsheet baru. Membuat spreadsheet untuk tanggapan di Google Spreadsheet .

Bagaimana Anda membuat Google Sheets untuk membuat formulir input yang diisi dalam spreadsheet?

Buat formulir dari spreadsheet Google. Klik menu tarik-turun Alat, gulir ke Formulir, dan pilih Buat formulir . Respons formulir akan dikumpulkan di tab tempat Anda membuat formulir.