Code as seen in the video:
Code.gs
function doGet(e) {
var page = e.parameter.page || "index";
switch(page){
case "about":
// return HtmlService.createHtmlOutputFromFile("About");
var template = HtmlService.createTemplateFromFile("About");
template.username = "Bea Ysabel";
return template.evaluate();
case "contact":
return HtmlService.createHtmlOutputFromFile("ContactUs");
default:
//return HtmlService.createHtmlOutputFromFile("Index");
return HtmlService.createTemplateFromFile("Index").evaluate();
}
}
function getScriptUrl(){
return ScriptApp.getService().getUrl();
}
function getGreetings(){
return "Greetings from the server!";
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function sendEmail(to, cc, bcc, subject, body, files){
try{
//convert the files to blob
var attachments = files.map(base64String => {
var mimeType = base64String.match(/data:(.*?);base64,/)[1];
var base64Data = base64String.split(',')[1];
var blob = Utilities.newBlob(Utilities.base64Decode(base64Data), mimeType);
return blob;
})
MailApp.sendEmail(
{
to: to,
cc:cc,
bcc:bcc,
subject: subject,
htmlBody: body,
attachments: attachments
}
);
return "Email sent Successfully!";
}catch(err){
return `Something went wrong! ${err}`;
}
}
Scripts.html
<script>
function openModal(){
const myModal = new bootstrap.Modal(document.getElementById('emailModal'), {
keyboard: false,
backdrop:"static"
});
myModal.show();
}
async function sendMail(){
const to = document.getElementById("to").value;
const cc = document.getElementById("cc").value;
const bcc = document.getElementById("bcc").value;
const subject = document.getElementById("subject").value;
var body = document.getElementById("body").value;
body = `
<h1>${body}</h1>
<ul>
<li>List #1</li>
<li>List #2</li>
<li>List #3</li>
<li>List #4</li>
</ul>
`;
var files = document.getElementById("files").files;
//convert files to base64 format
var attachments = [];
for(var i=0; i < files.length; i++){
var base64String = await readFileAsBase64(files[i]);
attachments.push(base64String);
}
google.script.run.withSuccessHandler(
function(response){
document.getElementById("messageDiv").innerText = response;
}
).sendEmail(to,cc,bcc,subject,body,attachments);
}
async function readFileAsBase64(file) {
//from the web
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onload = function(e) {
resolve(e.target.result);
};
reader.onerror = function(e) {
reject(e);
};
reader.readAsDataURL(file);
});
}
function buttonClicked(){
google.script.run.withSuccessHandler(function(response){
var msgDiv = document.getElementById("messageDiv");
msgDiv.innerText = response;
}).getGreetings();
}
function updateLinks(linksList){
google.script.run.withSuccessHandler(
function(url){
linksList.forEach(function(link){
document.getElementById(link.id).href = `${url}?page=${link.param}`;
})
}
).getScriptUrl();
}
document.addEventListener("DOMContentLoaded",
function(){
const links = [
{id:"aboutLink", param:"about"},
{id:"contactLink", param:"contact"}
]
updateLinks(links);
}
);
</script>
Modal.html
<!-- MODAL -->
<div class="modal fade" id="emailModal" role="modal" >
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header text-white" style="background-color:#006400">
<h5 class="modal-title" id="modalTitle">Send Email</h5>
<button type="button" class="btn-close btn-primary" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modalBody">
<div class="row m-1">
<input type="text" class="form-control" placeholder="example@myemail.com" id="to">
</div>
<div class="row m-1">
<input type="text" class="form-control" placeholder="cc@myemail.com" id="cc"/>
</div>
<div class="row m-1">
<input type="text" class="form-control" placeholder="bcc@myemail.com" id="bcc"/>
</div>
<div class="row m-1">
<input type="text" class="form-control" placeholder="Subject" id="subject"/>
</div>
<div class="row m-1">
<textarea placeholder="Body" id="body" rows="5"class="form-control"/></textarea>
</div>
<div class="row m-1">
<input type="file" id="files" multiple /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="btnSendMail" class="btn btn-primary" onclick='sendMail()'>Send</button>
</div>
</div>
</div>
</div>
No comments:
Post a Comment