Phase 1 (Set-up environment)
function doGet()
{
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('ELE557(Test1)')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Code.gs
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
<h1 class="text-center"> {{ a }} </h1>
</div>
</body>
<?!= HtmlService.createHtmlOutputFromFile('Vuejs').getContent() ?>
</html>
Index.html
<script>
function myObj(){
return {
a: 'Mohd Nizam',
}
}
const app = new Vue({
el : '#app',
data : myObj(),
methods:{
func1: function(){},
func2: function(){},
},
})
</script>
Vuejs.html
Test deployment. It should be OKEY
Phase 2 (Build your web app)
<head>
<base target="_top">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
Index.html
W3.CSS
<header class="w3-container w3-teal w3-center w3-padding-32">
<h1>ELE557 Submission (Test 1)</h1>
</header>
Header
<div class="w3-row" style="display:flex; justify-content: center;">
<div class="w3-col m6 l3 w3-center">
//CONTENT
</div>
</div>
Column in row
google.script.run.withSuccessHandler(onSuccess).getDatabase()
function getDatabase(){
return 'ok'
}
Call function in gs
const json = vv.map(v =>{
return {
"timestamp" : v[0],
"matrix" : v[1],
"name" : v[2],
"group" : v[3],
}
})
json.shift()
Generate JSON
const sss = SpreadsheetApp.getActiveSpreadsheet().getDataRange();
const dt1 = sss.getValues()
let header= dt1.shift()
let json=[]
dt1.forEach((dt) => {
let obj = {}
header.forEach((h,i) => {
obj[h] = dt[i]
})
json.push(obj)
})
Generate JSON 2
let arr1 = [ { 'bil' : 12, 'nama' : 'Mohd Adam', 'age' : 10 },
{ 'bil' : 2, 'nama' : 'Mohd Danial', 'age' : 12 }, ]
let obj1 = { 'bil' : 1, 'nama' : 'Mohd Adams' }
let arr2 = arr1[0]
Object.assign(arr2,obj1) //This update target arr2 and overwrite/mutate arr1
console.log(arr1)
[ { bil: 1, nama: 'Mohd Adams', age: 10 },
{ bil: 2, nama: 'Mohd Danial', age: 12 } ]
Update/Overwrite JSON
May update/add certain key value
For loop (Vue2)
<template v-for="(item,i) in vv" :key="i">
<tr>
<td> {{item.timestamp}}</td>
<td> {{item.matrix}} </td>
<td> {{item.name}} </td>
<td> {{item.group}} </td>
</tr>
</template>
function getDatabase(name, email){
let dt2 = sh2.getDataRange().getValues()
# code
}
Local variable will get update sheet values
(prefer this)
var sss = SpreadsheetApp.openByUrl('')
var dt1 = sss.getSheetByName('Setup1').getDataRange().getValues()
Global function might not get update values
(Graph/Chart)
https://www.w3schools.com/ai/ai_chartjs.asp
<p align="center">
<canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>
Chart.js
Center canvas -easiest way