วันนี้มาเพิ่มศักยภาพของ Google app script กันนะครับ เพราะเราสามารถดึงข้อมูลจาก spreadsheet ออกมาโชว์ในหน้าเว็บแอพได้แบบฟรีๆ มีระบบSearchและFilter เพื่อให้ค้นหาข้อมูลได้สะดวกและรวดเร็ว แถมเรายังทำให้สามารถเลือกข้อมูลเฉพาะบางคอลัมน์ และสลับลำดับคอลัมน์ได้เองแบบ 100% อีกด้วย ไปดูกันเล้ยยย
webappShowData.gs
// Presented by BrilliantPy // Editable let sheetName = 'การตอบแบบฟอร์ม 1'; let index_col = {'ประทับเวลา':0,'ชื่อ-สกุล':1,'อีเมล':2,'เพศ':3, 'รูปโปรไฟล์': 4, 'ดาวน์โหลด': 5}; let order_select_col = [index_col['อีเมล'],index_col['ชื่อ-สกุล'],index_col['รูปโปรไฟล์'],index_col['ดาวน์โหลด']]; let isFirstNumCol = true; // true or false function doGet() { return HtmlService.createTemplateFromFile('index').evaluate() .addMetaTag('viewport', 'width=device-width, initial-scale=1') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } function getData() { let ss = SpreadsheetApp.getActive(); let sheet = ss.getSheetByName(sheetName); let range = sheet.getDataRange(); let values = range.getValues(); let format_values = formatData(values); format_values = JSON.stringify(format_values); return format_values; } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); } function formatData(_data) { let data = _data; data.shift(); for (let i = 0; i < data.length; i++) { let cur_data = data[i]; let new_data = []; if (isFirstNumCol) { new_data.push(i+1); } for (let j = 0; j < order_select_col.length; j++) { new_data.push(cur_data[order_select_col[j]]); } data[i] = new_data; } return data; }
index.html
<!-- Presented by BrilliantPy --> <!DOCTYPE html> <html> <head> <base target="_top"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"> <?!= include('javaScript'); ?> <?!= include('style'); ?> </head> <body> <div class="container"> <div class="header-container"> <div class="header-text"> ข้อมูลผู้สมัครเข้าร่วมกิจกรรม </div> </div> <br> <table id="data-table" class="table table-striped table-hover table-bordered" style="width:100%"> </table> </div> </body> </html>
style.html
<!-- Presented by BrilliantPy --> <style> .header-container { text-align: center; font-size: 33px; color: #fff; min-height: 23vh; position: relative; background-image: url('https://www.klaviyo.com/wp-content/uploads/2016/09/abstract-background-1024x273.jpg'); } .profile-img { width: 50px; height: 50px; object-fit: cover; cursor: pointer; } td { line-height: 50px; } .header-text { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } thead,tbody { text-align: center; } #data-table_wrapper { padding-bottom: 12px; } </style>
javaScript.html
<!-- Presented by BrilliantPy --> <script> google.script.run.withSuccessHandler(showData).getData(); function showData(dataArray){ try{ dataArray = JSON.parse(dataArray); }catch(e){} $(document).ready(function(){ $('#data-table').DataTable({ data: dataArray, columns: [ {"title":"ลำดับ"}, {"title":"อีเมล์"}, {"title":"ชื่อ-สกุล"}, {"title":"รูปโปรไฟล์", 'render':function(data,type) { data = '<img class="profile-img" src="' + formatUrlImg(data) + '" onclick="window.open(this.src)">'; return data; } }, {"title":"ดาวน์โหลด", 'render':function(data,type) { data = '<a href="'+data+'" target="_blank">ดาวน์โหลด</a>'; return data; } }, ] }); }); } function formatUrlImg(link){ var newLink = link.replace("google.com/open?id=", "google.com/uc?&id="); newLink = newLink.replace("google.com/file/d/", "google.com/uc?&id="); newLink = newLink.replace("/view?usp=sharing", ""); return newLink; } </script>
It is best to participate in a contest for one of the best blogs on the web. I’ll advocate this site!
Thank you.
ได้ลองทำตามแล้ว ข้อมูลไม่ขึ้นแสดงบน webapp “No data available in table”
อยากทราบว่าต้องระบุ id ของ sheet ด้วยมั้ยครับ
รบกวนทักมาทางinbox เพจนะครับ
Thank you. You can follow us either way.
youtube : https://www.youtube.com/@brilliantpy/videos
Facebook: https://web.facebook.com/BrilliantPy