Google Apps Script: passing error into templated HTML - javascript

I have the following code:
code.gs:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('My Menu')
.addItem('Test', 'showTestForm')
.addToUi();
}
function showTestForm() {
var html = HtmlService.createHtmlOutputFromFile('TestForm');
SpreadsheetApp.getUi().showModalDialog(html, 'TEST');
}
function Test(formObject){
Logger.log("TEST")
var a = new Error( "Allready present "+ formObject);
a.error_code = 99;
Logger.log(JSON.stringify(a));
throw a;
}
TestForm.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<base target="_top">
<script>
function onFailure(error) {
var keys = Object.keys(error);
alert(JSON.stringify(keys));
alert(JSON.stringify(error.message));
alert(JSON.stringify(error.error_code));
}
function onSuccess() {
alert("Success");
}
</script>
</head>
<body>
<input type="submit" value="Save" onclick="google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).Test('1')" />
<input type="button" value="Close" onclick="google.script.host.close()" />
</body>
</html>
When I open TestForm from menu and press "Save" I've got following log from Logger:
[18-12-24 23:08:24:765 PST] TEST
[18-12-24 23:08:24:766 PST] {"message":"Allready present 1","error_code":99}
So I see, that error object have properties 'message' and 'error_code'. But in browser I've got following alerts:
["name"]
"Error: Allready present 1"
undefined
So I see, that recived error object has only one empty (i've checked) property "name". But if I but refer to the property "message, I've got string like in original object (but not the same). And it looks like that object haven't poperty "error_code".
What's the matter?

I thought you might like a complete working example as I know this stuff can be quite frustrating.
This a simple example templated HTML file that can be used as a dialog or a webapp. All it does is create a Google Doc file with todays date in the header and footer of each page and it puts the file into the same directory as the spreadsheet which contains the script. That's it. I use the Chrome Browser. I don't even care if my scripts won't run on another browser.
Here's the HTML: (FileName:'docwithdate.html')
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('resources') ?>
<?!= include('css') ?>
</head>
<body>
<?!= include('form') ?>
<?!= include('script') ?>
</body>
</html>
The Resources: (FileName: 'resources.html')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
The CSS: (FileName: 'css.html')
<style>
body {background-color:#ffffff;}
input[type="button"]{padding:0 0 2px 0;}
</style>
The Form: (FileName: form.html) This is probably push the templating idea a little far.
<form id="myForm" onsubmit="event.preventDefault();processForm(this);" >
<input type="text" id="txt1" name="filename" />
<input id="btn" type="submit" value="Submit" />
</form>
The Javascript: [FileName: 'script.html')
<script>
function createFile(){
var name=document.getElementById('filename').value;
google.script.run
.withSuccessHandler(function(rObj){
var html='<br />Go To File:' + rObj.filename + '';
$(html).appendTo("body");
})
.createTemplatedGoogleDoc(name);
}
function getInputObject(obj) {//I'm probably doing something wrong here. But this is what I had to do to get the object with the properties that I desired. So if you have another way. Go for it.
var rObj={};
for(var i=0;i<Object.keys(obj).length;i++){
if(obj[i].type=="text"){
rObj[obj[i].name]=obj[i].value;
}
console.log('Object.keys(rObj): %s',Object.keys(rObj).join(', '));
}
return rObj;
}
function processForm(obj){
var fObj=getInputObject(obj);
var name=fObj.filename;
google.script.run
.withSuccessHandler(function(rObj){
document.getElementById("btn").disabled=true;
var html='<br />Go To File:' + rObj.filename + '';
$(html).appendTo("body");
})
.createTemplatedGoogleDoc(name);
}
console.log('My Code');
</script>
The Google Script: (FileName: Code.gs)
function onOpen(){
SpreadsheetApp.getUi().createMenu('My Menu')
.addItem("Open Templated Google Doc", 'showMyDialog')
.addToUi()
}
function createTemplatedGoogleDoc(name){
Logger.log(name);
var doc=DocumentApp.create(name);//Creates a google doc
var fldrs=DriveApp.getFileById(SpreadsheetApp.getActive().getId()).getParents();
while(fldrs.hasNext()){
var fldr=fldrs.next();
if(fldr.getName()=="Create Templated Google Doc App"){
var folder=fldr;
}
}
Drive.Files.update({"parents": [{"id": folder.getId()}]}, doc.getId());//puts doc file into same directory as the spreadsheet that contains the script
doc.addHeader().appendParagraph(Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM dd, yyyy"));
doc.addFooter().appendParagraph(Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM dd, yyyy"));
//doc.getBody().getChild(0).removeFromParent();
doc.saveAndClose()
var rObj={url:doc.getUrl(),filename:doc.getName()}
return rObj;
}
function showMyDialog(){
var ui=HtmlService.createTemplateFromFile('docwithdate').evaluate();
SpreadsheetApp.getUi().showModelessDialog(ui, 'My Doc with Date');
}
function doGet(){//if you want a web app this is helpful
return HtmlService.createTemplateFromFile('docwithdate').evaluate();
}
function include(filename){//this is the include that the template uses
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
It's a pretty simple script. I hope it helps you get a start.

In accordance with the proposal of #TheMaster it is necessary to do this:
code.gs
function Test(formObject){
var a = new Error( JSON.stringify({msg:"Allready present "+ formObject,code:99}));
throw a;
}
TestForm.html
// removing "Error: " from message string to get our json back
var json = error.message.replace("Error: ",'')
var msg = JSON.parse(json).msg;
var code = JSON.parse(json).code;
That is, we put json into the attribute message of the Error object, and then, by cutting our json, we parse it and get the necessary values.
This is not exactly the answer to the question, but a good way to solve the problem.

Related

How to create an HTML template inside a called HTML Template

So, i've been experimenting with de google apps script lately. So far so good, but i ran into a problem that's drivin me out: I have a button in a spreadsheet that calls a sidebar menu with a function in scripts
macros.gs
function sbCases() {
var Form = HtmlService.createTemplateFromFile("Cases");
var ShowForm = Form.evaluate();
ShowForm.setTitle("ASS-CAD - Cases manager system").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showSidebar(ShowForm);
the html file I call with this function works just fine, but I'd like to call a second form, also trough an html file to manage the spreadsheet data. So i've added this function to the .gs file (and started a new html file):
function NovoCasoMSE(){
var Form = HtmlService.createTemplateFromFile("NewCase");
var ShowForm = Form.evaluate();
ShowForm.setTitle("New Case").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "New Case");
}
but when I try to call it from a button in the first html file, nothing happens at clicking the button (checked the log and the function the button should call isn't being executed.
Follow the code (the html is full of stuff, like the buttons and everything)("btn" is the ID for a button working on the html file):
<script>
document.getElementById("btn").addEventListener("click", NewCase);
function NewCase(){
google.script.run.NewCase()
}
</script>
I'm learning c in college but have very little experience in javascript ou google script, so I'm pretty sure I've done something really wrong. Thanks for any help in advance. :)
You can try something like this:
Run showTSidebar to get things rolling and then click the button.
ag1.gs:
function loadForm() {
var html='<form><input type="text" name="name1"/><input type="button" value="Click" onClick="process(this.parentNode);" /></form>';
return html;
}
function showTSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('ah4').evaluate());
}
function processForm(obj) {
SpreadsheetApp.getUi().alert('name1: ' + obj.name1);
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
ah4.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('sbresrc') ?>
</head>
<body>
<div id="form"></div>
<input type="button" value="Load Form" onClick="loadForm();" />
<?!= include('ah6') ?>
</body>
</html>
ah6.html:
<script>
function loadForm() {
google.script.run
.withSuccessHandler(function(html){
$('#form').html(html);
$('#form').css('display','block');
})
.loadForm();
}
function process(obj) {
google.script.run.processForm(obj);
}
</script>
sbresrc.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
animation:

How to display month fetched via JS in html email contents.?

code.gs
function showMonth() {
var recipient1 = 'user#gmail.com';
var subject = "email subject";
// send email using html page
var emailTemplate = HtmlService.createTemplateFromFile('file');
MailApp.sendEmail(recipient1, subject,'',{'htmlBody': emailTemplate.evaluate().getContent(), 'cc': '', 'bcc': ''});
}
file.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="displaymonth"> </p>
<script>
var d = new Date();
var mnth = getMonthDetails();
function getMonthDetails() {
switch (d.getMonth()) {
case 9 :
return "October";
break;
}
document.getElementById("displaymonth").innerHTML = "Current month is " + mnth;
</script>
</body>
</html>
Output in email:
My First Web Page
My First Paragraph.
I'm trying to get date and month in JS script tag and posting them to HTML content.
Later fetching the same HTML content using email template service of Google Apps Script and sending an email to user to show the current month.
When I run the code on other online editor like jsfiddle.net, it is showing the month details on the results page. However, I cannot get the expected result in the email upon running the code on Google Apps Script.
Let me know a way to fix my code to see the expected results. Thanks!
This way your email and your webapp get the same contents
Most of the contents comes from a text file that's written in html. And then in the function getContents() I append the line with the month in it. That function provides content to the doGet() and the sendEmail().
aq1.gs
function getContents() {
var folder=DriveApp.getFolderById('folderId');
var file=folder.getFiles().next();//assume only one
var contents=file.getBlob().getDataAsString()+Utilities.formatString('<p>This month is %s</p>',Utilities.formatDate(new Date(), Session.getScriptTimeZone(),"MMMM" ));//get content from file and append the date to it as a string
return contents;
}
function sendEmail() {
var recipient1 = 'recipient email';
var subject = "Combining Email and Website Contents";
var html=getContents();
MailApp.sendEmail(recipient1, subject,'',{htmlBody:html});
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('aq5');
}
function launchDiaog() {
var userInterface=HtmlService.createHtmlOutputFromFile('aq5');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "My Dialog");
}
aq5.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
console.log('Ready State Function');
google.script.run
.withSuccessHandler(function(hl){
console.log(hl);
$('#mydiv').html(hl);
})
.getContents();
});
console.log("My Code");
</script>
</head>
<h1>Testing</h1>
<div id="mydiv"></div>
</html>
This is the contents of the ascii text file:
<h2>My First Web Page</h2><p>My First Paragraph.</p><p>My second paragrah</p>
But it could be anything upto 50MB
Try getting the date on the app script then passing it as a variable into your HTML file.
I don't think your client side js code will be executed by the Apps Script.

have to encode by HTML link with base64

It is my first post and hope it won't be already solved previously.
I'm using a call center software and also using Salesforce lightning.
When a caller calls, I would like to check in my CRM if it is a customer or not.
It was possible easily with the basic version of Salesforce but is not anymore because the link is coded with base64.
Please, read this post for more explanation : https://tomsmalara.blogspot.com/2019/01/create-lightning-component-that.html
So, I have to create a HTML page for collecting the caller phone number and compose + encrypt the Salesforce link and open the link encrypted.
<!DOCTYPE html>
<html>
<head>
<title>Waiting a call ...</title>
<style>
body {text-align: center;}
</style>
</head>
<body>
<form name="form1" onsubmit="event.preventDefault();return displayResult();">
<label for="name">Phone number:</label>
<input type="text" id="PhoneNumber" name="PhoneNumber" size="10">
<div id="myEncoding"></div>
</form>
<script>
function b64EncodeUnicode(PhoneNumber) {
// first we use encodeURIComponent to get percent-encoded UTF-8,
// then we convert the percent encodings into raw bytes which
// can be fed into btoa.
var Mytxt = '{"componentDef":"forceSearch:search","attributes":{"term":"'+PhoneNumber+'","scopeMap":{"resultsCmp":"forceSearch:resultsTopResults","label":"Top Results","type":"TOP_RESULTS","cacheable":"Y","id":"TOP_RESULTS","labelPlural":"Top Results"},"context":{"disableSpellCorrection":false,"SEARCH_ACTIVITY":{"term":1234567890}}},"state":{}}';
return btoa(encodeURIComponent(Mytxt).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
var MyResult = String.fromCharCode('0x' + p1);
return MyResult;
}));
}
function displayResult() {
var result = b64EncodeUnicode(PhoneNumber);
document.getElementById('myEncoding').innerHTML = result;
return false;
window.open("https://mycompany.lightning.force.com/one/one.app#" +result,,,true)
}
</script>
</body>
</html>
Something is wrong and tried different things without result.
I will really appreciate if someone can find what is wrong and explain it to me
Thank you in advance
PLease find the solution I found to remove the input steps ...
<!DOCTYPE html>
<html>
<head>
<title>Waiting a call ...</title>
<style>
body {text-align: center;}
</style>
</head>
<body onload=acceptParam()>
Waiting a call ...
<script>
function acceptParam(){
var hashParams = window.location.href.substr(1).split('?'); // substr(1) to remove the `#`
hashParams = hashParams[1].split('&');
var p = hashParams[0].split('=');
//document.getElementById('PhoneNumber').value = p[1] // Pour info
var stringToEncode = '{"componentDef":"forceSearch:searchPage","attributes":{"term":"'+p[1]+'","scopeMap":{"type":"TOP_RESULTS"},"context":{"disableSpellCorrection":false,"disableIntentQuery":false,"permsAndPrefs":{"SearchUi.searchUIPilotFeatureEnabled":false,"SearchExperience.LeftNavEnhancementEnabled":true,"Search.crossObjectsAutoSuggestEnabled":true,"SearchResultsLVM.lvmEnabledForSearchResultsOn":true,"MySearch.userCanHaveMySearchBestResult":false,"SearchResultsLVM.lvmEnabledForTopResults":false,"OrgPermissions.UnionAppNavSmartScope":false,"SearchUi.feedbackComponentEnabled":false,"SearchExperience.TopResultsSingleSOSLEnabled":false,"OrgPreferences.ChatterEnabled":true,"Search.maskSearchInfoInLogs":false,"SearchUi.orgHasAccessToSearchTermHistory":false,"SearchUi.searchUIInteractionLoggingEnabled":false,"MySearch.userCanHaveMySearch":false},"searchDialogSessionId":"bdded2dc-91d1-3b3e-11d7-ff339bce1727","searchSource":"INPUT_DESKTOP"},"groupId":"DEFAULT"},"state":{}}'
var encoded = window.btoa(stringToEncode);
//var output = "Encoded String : " + encoded;
//document.getElementById("myEncoding").innerHTML = "Original String: " + p[1] + "<br>" + output;
window.location.assign("https://mycompany.lightning.force.com/lightning/one/one.app?source=alohaHeader#"+encoded);
}
</script>
</body>
</html>
PLease, can you say me what do you think about it ? Maybe we can be more efficient ?

Passing JS variable to HTML in Google Scripts

I am trying to change text in the html that is sent via email to a JS variable that I have defined. It is important that I am doing this in Google Scripts and have 2 files Code.gs & Email.html.
It seems like my html is not able to access the JS variable but I am not sure where I am going wrong here. I have referenced somewhat similar posts and tried a could different ways but cant get it to work. If anyone ha suggestions, that would be fantastic.
Code.gs
var JSname;
function Email() {
JSname = 'It works!'
var theEmail = 'myemail#gmail.com';
var theSubject = 'Email subject line';
var template = HtmlService.createTemplateFromFile('Email');
var message = template.evaluate().getContent();
MailApp.sendEmail({ to: theEmail, subject: theSubject, htmlBody: message });
return
}
Email.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<span id="HTMLname">[Text here]</span>
<script type="text/javascript" src="Code.gs">
document.getElementById("HTMLname").innerHTML = JSname;
</script>
</body>
</html>
Issue:
You're using a variable out of scope, simple as that
Fix:
Use template vars:
code.gs
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Index'); // Or whatever you have
var JSname = 'It works!' // Ideally var names should start with lowercase
template.JSname = JSname // This is the IMPORTANT change
// Build and return HTML in IFRAME sandbox mode. (Copied from GS directly)
return template.evaluate()
.setTitle('Web App Window Title')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function Email() {
var theEmail = 'myemail#gmail.com';
var theSubject = 'Email subject line';
var template = HtmlService.createTemplateFromFile('Email');
var message = template.evaluate().getContent();
MailApp.sendEmail({
to: theEmail,
subject: theSubject,
htmlBody: message
});
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<span id="HTMLname"><?= JSname ?></span>
</body>
</html>
Source: https://script.google.com/u/1/home/start

Javascript/JSON error: not well formed

I am testing putting a text editor on my page and storing it as part of a JSON object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"> </script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css"/>
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form method="post" action="formSubmit.js">
<textarea name ="editor"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
JS
$(document).ready(function () {
var text = $("editor").val();
var name = "project name";
var id = 5;
var item = new item(name, text, id);
var itemArray = localStorage.items;
if (itemArray == undefined) {
itemArray = [];
} else {
itemArray = JSON.parse(itemArray);
}
itemArray.push(item);
localStorage.items = JSON.stringify(itemArray);
});
I want to be able to store item in a JSON object. When I run this I receive a "not-well formed" error at line 1 of the Javascript. It's a very simple program I'm running and can't seem to pinpoint what is causing the error. Is the JSON done incorrectly or are scripts in my HTML header causing issues?
$("editor") is looking for an html tag called 'editor'. you probably want to attach an id attribute to your and do $('#editor')

Categories