Google Script

sendEmail

function sendEmail2(user)

{

const recepient = user[3]

//recepient = 'mnizam@uitm.edu.my' //FOR TESTING

const subject = 'Password Recovery'

const htmlTemplate = HtmlService.createTemplateFromFile('emailTemplate')

htmlTemplate.user = user

const htmlForEmail = htmlTemplate.evaluate().getContent()

//console.log(htmlForEmail)

GmailApp.sendEmail(

recepient,

subject,

'Please open this email with supported html',

{htmlBody : htmlForEmail}

)

// console.log('email sent')

}

Use GmailApp
EmailTemplate
1. Create Template
2. Update/Modify
3. Evaluate

source

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div dir="ltr">Assalamualaikum / Good Day,

<br>

<br>Your login credential as follows:

<br>1. Staff ID: <b> <?= user[2] ?> </b>

<br>2. Password: <b> <?= user[4] ?> </b>

<br>3. Tasbih: <b>subhanallah</b>

<div>

<div>

<div style="color:rgb(136,136,136)">Terima Kasih.</div>

<br>

</div>

</body>

</html>

Code.gs

function doGet() {

return HtmlService.createTemplateFromFile('Index')

.evaluate()

.setTitle('Papa Parse')

.setSandboxMode(HtmlService.SandboxMode.IFRAME)

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

Cdn.html

Index.html

<!DOCTYPE html>

<html>

<head>

<?!= HtmlService.createHtmlOutputFromFile('Cdn').getContent() ?>

</head>

<body>

</div>

</body>

<?!= HtmlService.createHtmlOutputFromFile('Vuejs').getContent() ?>

</html>

Vue2js.html

////////////////////////////////////////////////////////////////////////////////////////////////

// Global variables to hold the data from the spreadsheet

Vue.prototype.$gVar = []

////////////////////////////////////////////////////////////////////////////////////////////////

const app = new Vue({

el: '#app',

data(){

return{

a: 'Welcome',

b: '',

}

},

created: function() {},

methods:{

func1: function(){},

func2: function(){},

},

computed:{},

watch:{},

})

////////////////////////////////////////////////////////////////////////////////////////////////

</script>

Papa Parse

CDN

created(){

this.runPapaParse()

},

methods:{

runPapaParse: function(){

const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTsGJswWrFNOCKQ5qOKrfx1ic6qoYQlfSrUiPGd00BnS00C8rkSTBBWctKcQSEA87KNA1xi4zj-466v/pub?gid=0&single=true&output=csv"

Papa.parse( url, {

download: true,

header: true,

complete: (results) => {

console.log(results.data)

}

})

}

},

AXIOS

const spreadsheet_id = "1Zhwn1avkVt1Z1fnJ3_fx5B_h6BD-p4n19oh6mjGyTfs"

const gsheet_url = "https://spreadsheets.google.com/feeds/list/" +spreadsheet_id+ "/1/public/values?alt=json";

<b-spinner></b-spinner>

<p>Loading ...</p>

</div>

<h3 class="text-center text-danger" v-if="!showSpin">{{ title }}</h3>

<br>

<h5>1. Axios Method</h5>

<b-table hover :fields="fields" :items="movies" responsive="sm">

</template>

</template>

</template>

<a :href="data.item.Url" target="_blank"> video link </a>

</template>

</b-table>

</div>

</template>

</div>

const app = new Vue({

el: '#app',

data(){

return{

showSpin: true,

title: 'HTML connect to Google Sheet via Axios',

movies: [],

fields: ['Index', 'Title', 'Year', 'Url'],

}

},

created: function() {

this.axiosRun()

},

methods:{

axiosRun: function(){

axios

.get(gsheet_url)

.then(response => (

this.createItems(response.data.feed.entry)

))

},

createItems: function(entries){

const mvs = entries.map(v => ({

"Title": v.gsx$title.$t,

"Year": v.gsx$year.$t,

"Url": v.gsx$url.$t,

}))

this.movies = mvs

},

})

html2pdf

How to Generate a PDF with JavaScript

CDN
Link

const element = document.querySelector('.printArea')

const opt = {

filename: 'myPage.pdf',

margin: 10,

image: {type: 'jpeg', quality: 0.7},

jsPDF: {format: 'A4', orientation: 'portrait'}

}

// New Promise-based usage:

html2pdf().set(opt).from(element).save()

Deploy

Keep existing link
Update version and description on manage deployment

Code.gs

const json = vv.map(v =>{

return {

"nama" : v[0],

"bulan" :[ v[1], v[3] ],

"tarikh" :[ v[2], v[4] ]

}

})

json.shift()

Sheet to json

const ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getDataRange()

const vv = ws.getDisplayValues();

Read google sheet

let idx = data.findIndex(v => v[3]==id && v[5]==pwd )

if(idx > -1){

parcel = {

'name' : data[idx][1],

'post' : data[idx][2],

'email' : data[idx][4],

}

Find Index for login and password

const date = Utilities.formatDate(new Date(),"GMT+8:00", "dd-MM-yyyy | HH:mm:ss")

arr.unshift(date)

Insert date

let vals = ss.getSheetByName(sheet).getDataRange().getValues()

item = vals.find(v => v[2] == mykid)

if(item == undefined ){ throw 'Student Not Found'}

if(item){...}

onFailureLogin: function(e){

this.login.errMsg = e.message

},

Find and Throw message

const data = SpreadsheetApp.getActiveSpreadsheet()........getValues()

let json = []

let txt = 'bil'

data.forEach( column => json.push({ [txt] : column[0] }))

txt = 'nama'

data.forEach((column,i) => json[i][txt] = column[1])

console.log(json)

Create JSON

const shtPassword = SpreadsheetApp.openByUrl("..")

const head = shtPassword.shift()

const dt_password = shtPassword.map((v) => {

obj={}

head.forEach((h,i) => {

obj[h] = v[i]

})

return obj

})

console.log(dt_password)

Create JSON 2

try

{

let vals2 = ss.getSheetByName(sheet).getDataRange().getValues()

// some codes

}

catch(error)

{

throw 'Sheetname Error, Please contact Admin'

}

Try catch to read google sheet

Vuejs

.withSuccessHandler(this.onSuccessUpload)

VS

if( !this.selID ){ this.onSuccessUpload(); return }

google onSuccess function
vuejs onSuccess function
the different is the bracket ()

JavaScript

let kpi

switch (true) {

case (this.avgOA >= 90): kpi = "Excellent"; break;

case (this.avgOA >= 80): kpi = "Very Good"; break;

case (this.avgOA >= 70): kpi = "Good"; break;

case (this.avgOA >= 60): kpi = "Average"; break;

default: kpi = "Weak";

}

this.kpiA = kpi

Switch

[1,"", null, NaN, 2, undefined,4,5,6].filter(x => x)

Remove null, NaN, undefined, ""
Link

Bootstrap 5

<h1 class="display-4 text-success">Selamat Datang</h1>

<p class="lead">Sistem Pemarkahan</p>

</div>

Jumbotron

abc

</div>

</section>

div/section - row - column

<a href="#" class="link-dark text-end" v-on:click="logout">Logout</a>

</div>

Logout

<div class="progress-bar progress-bar-striped progress-bar-animated"

role="progressbar" aria-valuenow="100"

aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>

</div>

<p class="text-center mt-1"><i> processing... </i></p>

</div>

const myModal = new bootstrap.Modal(document.querySelector('#exampleModal'),{ keyboard: false })

myModal.show()

show Modal using vanilla js