Dalam posting ini, saya menunjukkan langkah-langkah membuat Formulir HTML Kustom untuk Google Sheets menggunakan Google Apps Script
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" title="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