Google Script, Programming, Webapp

สร้างWebapp จากข้อมูลใน Spreadsheet สลับ/เลือกบางคอลัมน์ได้ Search&Filterได้

Posted on by BrilliantPy

วันนี้มาเพิ่มศักยภาพของ 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>
BrilliantPy

4 thoughts on “สร้างWebapp จากข้อมูลใน Spreadsheet สลับ/เลือกบางคอลัมน์ได้ Search&Filterได้”

  2. tm23 says:

    ได้ลองทำตามแล้ว ข้อมูลไม่ขึ้นแสดงบน webapp “No data available in table”

    อยากทราบว่าต้องระบุ id ของ sheet ด้วยมั้ยครับ

    ตอบกลับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *