On load my web app is producing this error:
DataTables warning: table id=data-table - Requested unknown parameter '9' for row 21, column 9. For more information about this error, please see http://datatables.net/tn/4
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData(){
var spreadSheetId = "1VzHY8fTq8OsXhpHYHESSSPxeVNOnqxpjcsyWJpbuEOs"; //CHANGE
var dataRange = "Base Stats!A2:L"; //CHANGE
var range = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
var values = range.values;
return values;
}
//INCLUDE JAVASCRIPT AND CSS FILES
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('JavaScript'); ?> <!--INCLUDE JavaScript.html FILE-->
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
<!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
</table>
</div>
</div>
</body>
</html>
JavaScript.html
<script>
/*
*THIS FUNCTION CALLS THE getData() FUNCTION IN THE Code.gs FILE,
*AND PASS RETURNED DATA TO showData() FUNCTION
*/
google.script.run.withSuccessHandler(showData).getData();
//THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
//CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
columns: [
{"title":"Date Added"},
{"title":"SpotRacer"},
{"title":"Brand"},
{"title":"Model"},
{"title":"Acceleration"},
{"title":"Speed (MPH)"},
{"title":"Speed (KPH)"},
{"title":"Handling (%)"},
{"title":"Star Rating"},
{"title":"Comments"},
{"title":"Score (Cumlative)"},
{"title":"Score (Weighted)"}
]
});
});
}
</script>
I'm not sure what is causing the error with that specific row and column, but perhaps has something to do with the column not displaying plain text? Column 9 is 'Star Rating'.
Google Sheet: SpotRacers Fanbase Database
In your script, Sheets.Spreadsheets.Values.get of Sheets API is used. In this case, the retrieved values are 2-dimensional array. But, for example, when all rows are not embedded by the cell values (for example, the 1st row has the values in the columns "A", "B", "C", and the 2nd row has the values in the columns "A" and "B".), the lengths of all rows are different. I'm worried about this situation. So, I thought that the reason for your issue might be due to this.
If my understanding of your current issue was correct, how about the following modification?
From:
function getData(){
var spreadSheetId = "###"; //CHANGE
var dataRange = "Base Stats!A2:L"; //CHANGE
var range = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
var values = range.values;
return values;
}
To:
function getData(){
var spreadSheetId = "###"; // Please set your Spreadsheet ID.
var sheet = SpreadsheetApp.openById(spreadSheetId).getSheetByName("Base Stats");
var values = sheet.getRange("A2:L" + sheet.getLastRow()).getDisplayValues();
return values;
}
In this modification, the values are retrieved using getDisplayValues(). And, the data is retrieved from the data range.
Note:
When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.
You can see the detail of this in the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".
Reference:
getDisplayValues()
Related
I have a little website I am building to help me learn HTML/PHP/Javascript. On this website I have a Leaflet map where I display the locations of tweets I have stored in a postgreSQL/POSTGIS database. I had this working when I hardcoded the SQL query into my PHP code, but now I wanted to add a feature that allows the user to provide text input which will be used to query one of the columns of the database (hashtag column). Here is where I am running into problems, as I cannot seem to get the input text to work in my query. I am using $_GET to pass the value from the input text box to the PHP page which uses that value to perform the query. However, when I use echo to see what value $_GET['input'] was returning, I found that it returns some HTML string:
[
For the website I have created 4 scripts. The first is the main page which contains my HTML code, the second is a javascript code which creates the leaflet map and defines a function when people click on the map features, the third is another javascript code which uses ajax to get data from the database (by interacting with the 4th script) and loading them to my leaflet map.
Below are the four pages:
Page 1, main HTML:
<html>
<head>
<title>Leaftet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1> Welcome to my Leaftlet Map </h1>
<p> Search for a City and if we have tweets for it they will display on the map! (Currently only #Tokyo and #Berlin are supported) </p>
<!-- insert to input box here -->
<form name="input" method="get">
<input type='text' value="#Berlin" id='input' name='input'/>
<input type='button' value='Search hashtag' id='search' onclick="loadData();"/>
</form>
<div id = "mapid"></div>
<!--If we put the script before the div, then the script will run but div doesnt exist yet, so the map won't show up!-->
<script src="./mapLoad.js"></script>
<script>
function loadData() {
var value = $("#input").val();
if (value.length != 0) {
$.getScript("ajax.js")
}
}
</script>
</body>
</html>
Page 2, Leaflet map creation:
var mymap = L.map('mapid').setView([51.505, -0.09], 5);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=wq2dobtMr2Zc1pJFS7rB',
{attribution: '© MapTiler © OpenStreetMap contributors'
}
).addTo(mymap);
// create a function to perform when someone mouses on each feature
function func_name (feature, layer) {
layer.bindPopup(feature.properties.tweet)
};
Page 3, Ajax script:
// JQuery script that runs the load from database script
$.ajax({url:'loadFromDB.php', // loadfromDB.php is the fourth script/page (see below)
success: function(response){
feats = JSON.parse(response);
L.geoJSON(feats, {onEachFeature: func_name}).addTo(mymap);
},
error: function(xhr, status, error){
alert("ERROR: "+error);
}
}
);
Page 4, PHP script to connect to DB, query, and return result
<?php
// ***********************Connect to the database***********************
try{
$myPDO = new PDO("pgsql:host=localhost;dbname=PostGIS_DB","postgres","password");
}
catch(PDOException $e){
echo $e->getMessage();
}
// ***********************Define function***********************
function getData($input){
// Query the polygon table
$result = $myPDO->query("SELECT json_build_object(
'type', 'Feature',
'geometry', ST_AsGeoJSON(geog)::JSONB,
'properties', to_jsonb(row) - 'gid' - 'geog'
) FROM (SELECT *
FROM tweets_point
WHERE tweets_point.hashtag = '".$input."'
UNION ALL
SELECT *
FROM tweets_poly
WHERE tweets_poly.hashtag = '".$input."')
row;");
// Loop through rows of the result and append to the feature collection
$features = array();
foreach($result AS $rows){
//since $row['jsonb_build_object'] is in json format but is currently wrapped in a string we decode the json from the string
$j = json_decode($rows['jsonb_build_object']);
array_push($features, $j);
}
$feature_collect=["type"=>"FeatureCollection", "features"=>$features];
echo json_encode($feature_collect);
}
// ***********************Get the input value to display tweets***********************
$input = '';
if(isset($_GET['input'])){
$input = $_GET['input'];
getData($input);
};
?>
But as I stated above, I think the problem comes down to the code I have written for the text input and the $_GET['input'] variable. Maybe someone has some ideas?
I want to create a new sheet in my spreadsheet with the sidebar. I'm new to working with the sidebar so I'm not sure how to do it.
Code.gs:
function createSheet(sheetName) {
var sheet = ss.getSheetByName(sheetName)
if (!sheet) {
ss.insertSheet('Lookup: ' + sheetName)
}
}
Page.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Create Partial Vlookup Table</h3>
<input id="myData">
<button onclick="createLookup()">Click</button>
<script>
function createLookup(){
var myData = document.getElementById('myData').value
google.script.run.withSuccessHandler(createSheet(myData))
}
</script>
</body>
</html>
I'd appreciate any help I can get with this issue!
I believe your goal as follows.
You want to insert new sheet in the active Spreadsheet using the sidebar.
Modification points:
In order to run the function at Google Apps Script side, please modify google.script.run.withSuccessHandler(createSheet(myData)) to google.script.run.withSuccessHandler(function).createSheet(myData).
In your script of createSheet, it seems that ss is not declared.
When your script is modified with above points, it becomes as follows.
Modified script:
HTML & Javascript side:
In this case, please modify createLookup as follows.
function createLookup(){
var myData = document.getElementById('myData').value;
google.script.run.withSuccessHandler(alert).createSheet(myData); // Modified
}
Google Apps Script side:
function createSheet(sheetName) {
var ss = SpreadsheetApp.getActiveSpreadsheet(); // Added
var sheet = ss.getSheetByName(sheetName);
if (!sheet) {
ss.insertSheet('Lookup: ' + sheetName);
}
return "ok"; // Added
}
By above modification, when the button on the side bar by inputting a value is clicked, a new sheet is inserted in the active Spreadsheet. And, ok is returned and you can see it at the alert dialog on the browser.
When you want the script for opening the side bar, how about the following script?
function openSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile("Page"));
}
Reference:
Class google.script.run
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.
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.
I uploaded the following index.html file for a subdomain and it isn't properly loading. It only shows the title tag.
I want it to load when I go to xxx.myapp.com. The setup is ok on godaddy because I see the title, but the rest of the page doesn't render. Also I see the network requests on the server bit nothing...
Any thoughts?
<!DOCTYPE html>
<html>
<head>
<title>MI Testing title</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.myapp.com/JS/HelperFunctions.js"></script>
<script type="text/javascript" src="http://www.myapp.com/JS/Settings.js"></script>
<!-- zurb foundation-->
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/foundation.css" />
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/foundation.min.css" />
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/foundation-4.3.1/CSS/normalize.css" />
<!--Local css -->
<link type="text/css" rel="stylesheet" href="http://www.myapp.com/CSS/AnalyticsIndex.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);
/*
Called when library loaded
*/
function drawCharts(){
drawDailyAverageSessionLength();
drawUsersGender();
}
/*
Draws the chart for average session length by day
*/
function drawDailyAverageSessionLength() {
//Apit to get the data from
var api = GET_AVG_SESSIONS_URL+"2013/0/0";
//Request data (using jquery/ajax)
$.getJSON(api,function(data){
//Start a days and seconds array
var days = [];
var seconds = [];
//Init google data array
var googData = new google.visualization.DataTable();
//Add X Y columns
googData.addColumn('string', 'days');
googData.addColumn('number', 'seconds');
//Init sort array
var sorted =[];
//Parse the results to get the dates
for (var key in data){
var date = new Date(key);
sorted.push(date);
}
//Sort the array
sorted.sort(sortDateArrayDescending);
//Split results
for (i=0;i<sorted.length;i++){
//Get the date object
var day = sorted[i];
//Add 1 to month
var month = day.getMonth()+1;
//Parse to string
var newKey = day.getFullYear()+'-'+month+'-'+day.getDate();
var short = month+'/'+day.getDate();
//Add date to days array
days.push(short);
//Add to integer array
seconds.push(parseInt(data[newKey]));
}
//Parse to google data
for (i=0; i<days.length;i++){
googData.addRow([days[i], seconds[i]]);
}
// Set chart options
var options = {'title':'Average session length (NOT ACCURATE since end of sessions aren\'t being tracked)',
'width':1200,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('averageSessionLengthChart'));
chart.draw(googData, options);
});
}
/*
Draws the chart for average session length by day
*/
function drawUsersGender() {
//Apit to get the data from
var api = GET_USERS_SEX;
//Request data (using jquery/ajax)
$.getJSON(api,function(data){
//Start a days and seconds array
var result = [['gender', 'number']];
//Iterate over the genders
for (var gender in data){
//Get the value pair and push
var entry = [gender, parseInt(data[gender])];
result.push(entry);
}
//Parse to google data
var data = google.visualization.arrayToDataTable(result);
//Display options
var options = {
title:'Gender for registered users',
'width':600,
'height':400
};
//Draw the chart
var chart = new google.visualization.PieChart(document.getElementById('genderChart'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<div class="row">
<div id = "averageSessionLengthChart" class="large-12 small-12 columns">
</div>
</div>
<div class="row">
<div id = "genderChart" class="large-12 small-12 columns">
</div>
</div>
</body>
</html>
Try a developper console from a PC outside your network to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox).
There should be a "Network" tab that shows what requests are made from the page.
Maybe it will help you understand what is happening.