I grabbed some links with Google Spreadsheets' importXML() from a Webpage and would like to put it to a webpage, following the docs here https://developers.google.com/apps-script/guides/content
My script is:
function doGet() {
var ss = SpreadsheetApp.openById("1Nhud6O4odcsqgav5A9GrlYfXe9xSLUmOgeft5VBAGxA");
var sheet = ss.getSheetByName("Result");
var link = sheet.getSheetValues(2, 1, 1, 1);
var title = sheet.getSheetValues(2, 2, 1, 1);
var script = 'function makeLink() {var link = document.getElementById("sidebar"); link.setAttribute("href","' +
link + '"); link.innerHTML = "' + title + '";}';
Logger.log(script);
return ContentService.createTextOutput(script).setMimeType(ContentService.MimeType.JAVASCRIPT);
}
Here is the webpage where I want to put the links: http://gimoya.bplaced.net/gapps.html
The html code is:
<html>
<body>
<head>
<script type="text/javascript" src="https://script.google.com/macros/s/AKfycbxMTnkqCllf446UBF6j3OV4Gn2m1g_VXRvvaggHTc4DkiWcyOo/exec">
</script>
</head>
<a id="sidebar" onload = "makeLink()" target="_blank"></a>
</body>
</html>
However, the makeLink() function isn't called, or at least it is without effect, when the page is loaded. In the Web Console I can see that the function makeLink() is loaded properly and I also can call in manually from there and it is working..
If someone has a clue, please help out!
Probably a Caja related issue, try loading after when document.ready with Jquery.
Related
Is there a way to write a google apps script so when ran, a second browser window opens to www.google.com (or another site of my choice)?
I am trying to come up with a work-around to my previous question here:
Can I add a hyperlink inside a message box of a Google Apps spreadsheet
This function opens a URL without requiring additional user interaction.
/**
* Open a URL in a new tab.
*/
function openUrl( url ){
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
+'if(document.createEvent){'
+' var event=document.createEvent("MouseEvents");'
+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
+' event.initEvent("click",true,true); a.dispatchEvent(event);'
+'}else{ a.click() }'
+'close();'
+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">Failed to open automatically. Click here to proceed.</body>'
+'<script>google.script.host.setHeight(40);google.script.host.setWidth(410)</script>'
+'</html>')
.setWidth( 90 ).setHeight( 1 );
SpreadsheetApp.getUi().showModalDialog( html, "Opening ..." );
}
This method works by creating a temporary dialog box, so it will not work in contexts where the UI service is not accessible, such as the script editor or a custom G Sheets formula.
You can build a small UI that does the job like this :
function test(){
showURL("http://www.google.com")
}
//
function showURL(href){
var app = UiApp.createApplication().setHeight(50).setWidth(200);
app.setTitle("Show URL");
var link = app.createAnchor('open ', href).setId("link");
app.add(link);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
If you want to 'show' the URL, just change this line like this :
var link = app.createAnchor(href, href).setId("link");
EDIT : link to a demo spreadsheet in read only because too many people keep writing unwanted things on it (just make a copy to use instead).
EDIT : UiApp was deprecated by Google on 11th Dec 2014, this method could break at any time and needs updating to use HTML service instead!
EDIT :
below is an implementation using html service.
function testNew(){
showAnchor('Stackoverflow','http://stackoverflow.com/questions/tagged/google-apps-script');
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
There really isn't a need to create a custom click event as suggested in the bountied answer or to show the url as suggested in the accepted answer.
window.open(url)1 does open web pages automatically without user interaction, provided pop- up blockers are disabled(as is the case with Stephen's answer)
openUrl.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
const url1 ='https://stackoverflow.com/a/54675103';
const winRef = window.open(url1);
winRef ? google.script.host.close() : window.alert('Allow popup to redirect you to '+url1) ;
window.onload=function(){document.getElementById('url').href = url1;}
</script>
</head>
<body>
Kindly allow pop ups</br>
Or <a id='url'>Click here </a>to continue!!!
</body>
</html>
code.gs:
function modalUrl(){
SpreadsheetApp.getUi()
.showModalDialog(
HtmlService.createHtmlOutputFromFile('openUrl').setHeight(50),
'Opening StackOverflow'
)
}
Google Apps Script will not open automatically web pages, but it could be used to display a message with links, buttons that the user could click on them to open the desired web pages or even to use the Window object and methods like addEventListener() to open URLs.
It's worth to note that UiApp is now deprecated. From Class UiApp - Google Apps Script - Google Developers
Deprecated. The UI service was deprecated on December 11, 2014. To
create user interfaces, use the HTML service instead.
The example in the HTML Service linked page is pretty simple,
Code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
A customized version of index.html to show two hyperlinks
<a href='http://stackoverflow.com' target='_blank'>Stack Overflow</a>
<br/>
<a href='http://meta.stackoverflow.com/' target='_blank'>Meta Stack Overflow</a>
Building of off an earlier example, I think there is a cleaner way of doing this. Create an index.html file in your project and using Stephen's code from above, just convert it into an HTML doc.
<!DOCTYPE html>
<html>
<base target="_top">
<script>
function onSuccess(url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
window.close = function () {
window.setTimeout(function() {
google.script.host.close();
}, 9);
};
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
window.document.body.append(a);
}
event.initEvent("click", true, true);
a.dispatchEvent(event);
} else {
a.click();
}
close();
}
function onFailure(url) {
var div = document.getElementById('failureContent');
var link = 'Process';
div.innerHtml = "Failure to open automatically: " + link;
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).getUrl();
</script>
<body>
<div id="failureContent"></div>
</body>
<script>
google.script.host.setHeight(40);
google.script.host.setWidth(410);
</script>
</html>
Then, in your Code.gs script, you can have something like the following,
function getUrl() {
return 'http://whatever.com';
}
function openUrl() {
var html = HtmlService.createHtmlOutputFromFile("index");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
I liked #Stephen M. Harris's answer, and it worked for me until recently. I'm not sure why it stopped working.
What works for me now on 2021-09-01:
function openUrl( url ){
Logger.log('openUrl. url: ' + url);
const html = `<html>
<a id='url' href="${url}">Click here</a>
<script>
var winRef = window.open("${url}");
winRef ? google.script.host.close() : window.alert('Configure browser to allow popup to redirect you to ${url}') ;
</script>
</html>`;
Logger.log('openUrl. html: ' + html);
var htmlOutput = HtmlService.createHtmlOutput(html).setWidth( 250 ).setHeight( 300 );
Logger.log('openUrl. htmlOutput: ' + htmlOutput);
SpreadsheetApp.getUi().showModalDialog( htmlOutput, `openUrl function in generic.gs is now opening a URL...` ); // https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
}
https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
Is there a way to write a google apps script so when ran, a second browser window opens to www.google.com (or another site of my choice)?
I am trying to come up with a work-around to my previous question here:
Can I add a hyperlink inside a message box of a Google Apps spreadsheet
This function opens a URL without requiring additional user interaction.
/**
* Open a URL in a new tab.
*/
function openUrl( url ){
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
+'if(document.createEvent){'
+' var event=document.createEvent("MouseEvents");'
+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
+' event.initEvent("click",true,true); a.dispatchEvent(event);'
+'}else{ a.click() }'
+'close();'
+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">Failed to open automatically. Click here to proceed.</body>'
+'<script>google.script.host.setHeight(40);google.script.host.setWidth(410)</script>'
+'</html>')
.setWidth( 90 ).setHeight( 1 );
SpreadsheetApp.getUi().showModalDialog( html, "Opening ..." );
}
This method works by creating a temporary dialog box, so it will not work in contexts where the UI service is not accessible, such as the script editor or a custom G Sheets formula.
You can build a small UI that does the job like this :
function test(){
showURL("http://www.google.com")
}
//
function showURL(href){
var app = UiApp.createApplication().setHeight(50).setWidth(200);
app.setTitle("Show URL");
var link = app.createAnchor('open ', href).setId("link");
app.add(link);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
If you want to 'show' the URL, just change this line like this :
var link = app.createAnchor(href, href).setId("link");
EDIT : link to a demo spreadsheet in read only because too many people keep writing unwanted things on it (just make a copy to use instead).
EDIT : UiApp was deprecated by Google on 11th Dec 2014, this method could break at any time and needs updating to use HTML service instead!
EDIT :
below is an implementation using html service.
function testNew(){
showAnchor('Stackoverflow','http://stackoverflow.com/questions/tagged/google-apps-script');
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
There really isn't a need to create a custom click event as suggested in the bountied answer or to show the url as suggested in the accepted answer.
window.open(url)1 does open web pages automatically without user interaction, provided pop- up blockers are disabled(as is the case with Stephen's answer)
openUrl.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
const url1 ='https://stackoverflow.com/a/54675103';
const winRef = window.open(url1);
winRef ? google.script.host.close() : window.alert('Allow popup to redirect you to '+url1) ;
window.onload=function(){document.getElementById('url').href = url1;}
</script>
</head>
<body>
Kindly allow pop ups</br>
Or <a id='url'>Click here </a>to continue!!!
</body>
</html>
code.gs:
function modalUrl(){
SpreadsheetApp.getUi()
.showModalDialog(
HtmlService.createHtmlOutputFromFile('openUrl').setHeight(50),
'Opening StackOverflow'
)
}
Google Apps Script will not open automatically web pages, but it could be used to display a message with links, buttons that the user could click on them to open the desired web pages or even to use the Window object and methods like addEventListener() to open URLs.
It's worth to note that UiApp is now deprecated. From Class UiApp - Google Apps Script - Google Developers
Deprecated. The UI service was deprecated on December 11, 2014. To
create user interfaces, use the HTML service instead.
The example in the HTML Service linked page is pretty simple,
Code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
A customized version of index.html to show two hyperlinks
<a href='http://stackoverflow.com' target='_blank'>Stack Overflow</a>
<br/>
<a href='http://meta.stackoverflow.com/' target='_blank'>Meta Stack Overflow</a>
Building of off an earlier example, I think there is a cleaner way of doing this. Create an index.html file in your project and using Stephen's code from above, just convert it into an HTML doc.
<!DOCTYPE html>
<html>
<base target="_top">
<script>
function onSuccess(url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
window.close = function () {
window.setTimeout(function() {
google.script.host.close();
}, 9);
};
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
window.document.body.append(a);
}
event.initEvent("click", true, true);
a.dispatchEvent(event);
} else {
a.click();
}
close();
}
function onFailure(url) {
var div = document.getElementById('failureContent');
var link = 'Process';
div.innerHtml = "Failure to open automatically: " + link;
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).getUrl();
</script>
<body>
<div id="failureContent"></div>
</body>
<script>
google.script.host.setHeight(40);
google.script.host.setWidth(410);
</script>
</html>
Then, in your Code.gs script, you can have something like the following,
function getUrl() {
return 'http://whatever.com';
}
function openUrl() {
var html = HtmlService.createHtmlOutputFromFile("index");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
I liked #Stephen M. Harris's answer, and it worked for me until recently. I'm not sure why it stopped working.
What works for me now on 2021-09-01:
function openUrl( url ){
Logger.log('openUrl. url: ' + url);
const html = `<html>
<a id='url' href="${url}">Click here</a>
<script>
var winRef = window.open("${url}");
winRef ? google.script.host.close() : window.alert('Configure browser to allow popup to redirect you to ${url}') ;
</script>
</html>`;
Logger.log('openUrl. html: ' + html);
var htmlOutput = HtmlService.createHtmlOutput(html).setWidth( 250 ).setHeight( 300 );
Logger.log('openUrl. htmlOutput: ' + htmlOutput);
SpreadsheetApp.getUi().showModalDialog( htmlOutput, `openUrl function in generic.gs is now opening a URL...` ); // https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
}
https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
I am trying to implement a workflow - I need to send an email with links to approve/reject a candidate to Level 1 Manager and then to Level 2 Manager. Once both approve, a confirmation email is sent to the candidate.
I have a custom function say main_function() that executes before sending each of the two emails. This function needs to pull data from the spreadsheet to which the script is bound.
Since I have a two-step approval, I created different projects to get separate WebApp URLs for each approval step.
I am including the main_function() function as a library in the two projects.
main_function() sends an email with approve/reject link and when the link is clicked an HTML opens with an input box to take comments.
Then the HTML includes a call to a script function saveToSheets() to save the data to google sheet.
The HTML shows up but data is not getting saved because saveToSheets() is not called. How can I resolve this?
Main function in Library myLib
main_function(){
//do something
Logger.log("function called!");
var htmlTemplate = HtmlService.createTemplateFromFile('Index2.html');
htmlTemplate.ID = ID; //pass variables from script to HTML
htmlTemplate.decision = decision;
htmlTemplate= htmlTemplate.evaluate().setTitle('Comments').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlTemplate.asTemplate();
}
saveToSheets(inputArray){
//do something
}
Index2.html in Library myLib
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
</style>
</head>
<body>
// Includes a COMMENT BOX with id comment1
//include DIV element with id output to catch error
<script>
function runGoogleScript() {
var item0 = "<?= ID ?>";
var item1 = "<?= decision ?>";
var item2 = document.getElementById('comment1').value; //comments
var inputArray =[item0,item1,item2];
google.script.run.withFailureHandler(onFailure).myLib.saveToSheets(inputArray);
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = "ERROR: " + error.message;
}
function onSuccess() {
}
</script>
</body>
</html>
Function in another project that needs to reuse the script and HTML through mylib
myfunction(){
var htmlTemplate = mylib.main_function();
return htmlTemplate.evaluate();
}
It is incorrect to say "Index.html is not accessible from project". When you deploy a project as a library, its HTML files are in the context of the library.
But if you want to pass an evaluated HTML template from a library as a template you should use asTemplate()
Example:
main_function(){
//do something
Logger.log("function called!");
var htmlTemplate = HtmlService.createTemplateFromFile('Index.html');
htmlTemplate= htmlTemplate.evaluate();
return htmlTemplate.asTemplate();
}
I've been following the instructions here to have my Gmail signature template display the image stored on Google Drive as a logo.
The goal is to have the 'src' attribute of the image tag point to the image and display it inline. In the answer linked above, the image blob is fetched using UrlFetchApp. In my code, I'm calling the openById(id) method of the DriveApp to open the image file and get the blob.
However, neither approach seems to work. It's only when I have the 'src' point directly to the image URL that it loads the image. I tried using both base64Encode and base64EncodeWebSafe but the signature only shows the empty container for the image.
What am I missing here?
HTML template
<table>
<tbody>
<tr>
<td>
<img src="{{config.imgData}}" alt="my logo">
</td>
<td>
<table>
<tbody>
<tr><td> My name is {{config.name}} </td> </tr>
<tr><td> www.example.com </td> </tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
GS code
var config = {
name: "Anton",
imgData: ""
}
function updateSignature() {
var imgFileId = "DRIVE FILE ID";
var imgFile = DriveApp.getFileById(imgFileId);
var imgBlob = imgFile.getBlob().getAs("image/png"); //getAs doesn't change anything
//Get content type and bytes
var contentType = imgBlob.getContentType();
var imgBytes = imgBlob.getBytes();
var imgData = contentType + ";base64," + Utilities.base64Encode(imgData);
config.imgData = imgData;
var alias = Gmail.Users.Settings.SendAs.get("me", myEmail);
//Get signature html as a string
var templateString = HtmlService.createHtmlOutputFromFile("signature_template").getContent();
for (var configKey in config) {
if (config.hasOwnProperty(configKey)) {
templateString = templateString.replace("{{config." + configKey + "}}", config[configKey]);
}
}
var finalTemplate = HtmlService.createHtmlOutput(templateString).getContent();
alias.signature = finalTemplate;
Gmail.Users.Settings.SendAs.update(alias, "me", myEmail);
}
You want to put an image of your Google Drive to your Gmail signature using the template HTML.
You want to achieve this using Google Apps Script.
If my understanding is correct, how about this answer? Please think of this as just one of several possible answers.
Issue and workaround:
When I checked the official document, I saw the image for the signature as follows.
If you added a photo or image from Google Drive, you'll need to share your image publicly for it to appear in your signature. Note: If you use Gmail with your work or school account, ask your administrator to let you share images publicly.
Search for an image, like your company logo, then get the image URL.
Add your own image to Google and use that URL.
When data:image/png;base64,### is used for src of the image tag, it was found that the signature updated with Gmail.Users.Settings.SendAs.update() doesn't include src attribute. When https://### is used, the signature updated with Gmail.Users.Settings.SendAs.update() includes the src attribute.
From above situation, it is considered that data:image/png;base64,### might not be able to be used to src of the image tag of the signature. This might be the specification.
So in order to put the image from Google Drive, how about the following flow? I think that this is the method showing at the official document.
Publicly share the image in Google Drive.
Put the URL of the image to the signature.
Modified script:
When your script is modified, how about the following modification?
From:
var imgBlob = imgFile.getBlob().getAs("image/png"); //getAs doesn't change anything
//Get content type and bytes
var contentType = imgBlob.getContentType();
var imgBytes = imgBlob.getBytes();
var imgData = contentType + ";base64," + Utilities.base64Encode(imgData);
To:
imgFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
var imgData = "https://drive.google.com/uc?export=download&id=" + imgFileId;
Note:
When the image is manually put to the signature, above URL is used and the file is automatically shared publicly.
By the way, in your current script, imgData of var imgData = contentType + ";base64," + Utilities.base64Encode(imgData); might be imgBytes. And when you want to put the image to src using the base64 data, please use src="data:image/png;base64,###". In your script, src="image/png;base64,###" is used.
References:
Create a Gmail signature
Users.settings.sendAs: update
If I misunderstood your question and this was not the direction you want, I apologize.
Try this:
All you need to do is to add a default image file id to the function convertImageToDataURI and then launch the dialog. Or you can deploy as a webapp also. For my purposes I usually reduce the size of the images to something less than 1000 pixels wide and keep the aspect ratio less than one.
Code.gs:
function onOpen() {
SpreadsheetApp.getUi().createMenu('My Tools')
.addItem('Display Dialog', 'displayDialog')
.addItem('Get File Ids from FolderId','getFileIds')
.addToUi();
}
function convertImageToDataURI(fileId) {
var fileId=fileId||'default image file id';
if(fileId) {
var file=DriveApp.getFileById(fileId);
var blob=file.getBlob();
var dataUri='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
return dataUri;
}
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function displayDialog() {
var userInterface=HtmlService.createTemplateFromFile('image').evaluate();
SpreadsheetApp.getUi().showModelessDialog(userInterface, "For the Birds");
}
function doGet() {
return HtmlService.createTemplateFromFile('image').evaluate();
}
resources.html:(not required for this example)
<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>
css.html:(not required for this example)
<style>
body {background-color:#ffffff;}
input{padding:2px;margin:2px;}
</style>
script.html:(not required for this example)
<script>
console.log('script.html code');
</script>
content.html is empty
images.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('resources') ?>
<?!= include('css') ?>
</head>
<body>
<img id="birds" src="<?!=convertImageToDataURI()?>" width="320" />
<?!= include('content') ?>
<?!= include('script') ?>
</body>
</html>
<html><head>
If you need a tool to get the file ids of images in a folder try this function:
function getFileIds() {
var resp=SpreadsheetApp.getUi().prompt("Folder Id","Enter Folder Id", SpreadsheetApp.getUi().ButtonSet.OK_CANCEL);
if(resp.getSelectedButton()==SpreadsheetApp.getUi().Button.OK && resp.getResponseText().length>0) {
try{
var folder=DriveApp.getFolderById(resp.getResponseText());
var files=folder.getFiles();
var html='<style>td,th{border:1px solid black;padding:2px 5px;}</style><table><tr><th>File Name</th><th>File Id</th><th>Type</th></tr>';
while(files.hasNext()) {
var file=files.next();
html+=Utilities.formatString('<tr><td>%s</td><td>%s</td><td>%s</td></tr>', file.getName(),file.getId(),file.getMimeType());
}
html+='</table><br /><input type="button" value="Close" onClick="google.script.host.close();" />';
var userInterface=HtmlService.createHtmlOutput(html).setWidth(800).setHeight(400);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Files in Folder");
}
catch(e){SpreadsheetApp.getUi().alert(e);}
}else{
SpreadsheetApp.getUi().alert("Invalid or Missing Inputs: No FileId Provided");
}
}
Scriplets
Web Apps
This is what my dialog looks like:
I have successfully been able to create a google chart by querying a google sheet that I have. I'm trying to create a table by querying the same google sheet, but I'm not getting any results. I know I'm doing something wrong, but I'm not sure what it is :/ Here's the code below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=1ZxBkX5lTidV2LJvSJYjBQfILF3PlIYjeNgDqsHZoMqo&tq=select%20D%2C%20S%2C%20T%2C%20U%20where%20D%3C%3E%22Avatar%22');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var table = new google.visualization.Table(document.getElementById('table_div'));
var options = {'title':'Bass Naming',
'width':'927',
'height':'510'};
table.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>
var table = new
google.visualization.Table(document.getElementById('table_div'));
You do not have any element with id="table_div" in your html code, so you won't see you data table displayed in your page.
Check your browser's javascript console for any other errors you may have in your page.
Also, is this code from a general basic html application, or from an HTML file in Google Apps Script project, server by HTMLService? Just asking because GAS HTML Service does not always play well with Google Visualization API due to sandbox restrictions and Caja sanitization.