I would like to use data from my google sheet and have it displayed on my google site but not be embedded, just plain text so that the data can be made part of a sentence (eg, the bold bits in this sentence "We have 35 new lines this week and 12 of them are on magazines" ).
I have looked at other post and these two posts come close but as they are old, the info doesn't quite work anymore or are just not fully answered.
How do I grab data from only 1 cell and input it into HTML?
How do you Import data from a Google Spreadsheet to Javascript?
If anyone could help or even point me to maybe another topic which I have missed which answers this question that would be great, thanks in advance for the help.
You can create an HTML result in apps script see: HTML service and just add the result as an iFrame in your google site.
Here you have a more complete example of the use of HTML Service ctrlq.org
Here is a short example from the docs:
gsCode:
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('[spreadsheet_ID]')
.getActiveSheet()
.getDataRange()
.getValues();
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
This is a general idea for your request rather than direct answer:
Create a Google App Script in your Google Site Setting Page
Within the Script, use SpreadsheetApp Class to read the data from your Google Sheet into array
Within the script, use HTML service to output your array as texts.
Deploy the Google App Script as Web App
Back to your page, insert your Script.
It will work and you can customise the dynamic contents you want to display but you will need to learn Google Script (just javascript with their apis) and code it out yourself.
Some References:
https://developers.google.com/apps-script/guides/sheets
https://developers.google.com/apps-script/guides/web
Related
I am trying to automate sending emails on Google sheets using Mailapp.
My problem is the following:
I need to include the gmail signature in the email.
When using Mailapp, the pre-defined signature on gmail does not appear.
Is there any solution for that?
The other solution, as I found online, is using HTML.
I need to develop the email automation for many users on a single google sheet and need to include Linkedin links.
My issue here is that I am not able to assign HTML's 'href' as a variable (variable that is in fact a cell containing the linkedin link.
JS:
var linkedin_link = SpreadsheetApp.getActiveSheet().getRange(1, 1).getValue();
var templ = HtmlService.createTemplateFromFile("MailTemplate");
var message = templ.evaluate().getContent();
MailApp.sendEmail({
to: "xxx#gmail.com",
subject: "Automation",
htmlBody: message,
});
HTML file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<a href="https://linkedin.com/" + linkedin_link >LINKEDIN</a>
</body>
</html>
If anyone could help it would be great!
Thanks!
If you enable Gmail advance API (under services) you can use this to get the signature as HTML. Then you can use this in your own html template:
function readCurrentOutOfOffice(){
console.log(Gmail.Users.Settings.getVacation('user#company.com'))
}
Good morning and thank you in advance for the help. I am a noobi at java/gas scripting so any help is appreciated.
On a google spreadsheet I have a custom menu that launches a small html menu that I would like to be able to launch various web pages from. The actual addresses are variable. I have set those as Keys with the property service when the page launches.
Here is the html code (taken from another example and trying to adapt)"
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script type="text/javascript">
var myArr = ["Peter", "Paul", "Tony", "Adam"];
function display(name) {
var accScriptPageLinkID= PropertiesService.getScriptProperties().getProperty('scriptPageLinkAdd');
Logger.log(accScriptPageLinkID)
alert(name);
}
for(var i = 0; i < 4; i ++) {
document.write('<input type="button" onclick="display(this)" name="'+ myArr[i] + '" value="'+ myArr[i] +'">'); // Will log Peter, Paul..
}
</script>
</body>
</html>
I need to modify the above code so that when the button Peter is pressed it opens the Script Page linked under the Property Service Key 'scriptPageLinkAdd'.
Or if there is an easier way to create a dynamic html page for my menu that is linked to cells in the google spreadsheet, please advise.
Mike
PropertiesService (and Logger too) are server-side AppsScript classes - they can't be invoked directly from the client side (your html page).
To invoke them on the server side from your html page you must use google.script.run.withSuccessHandler(clientSideFunctionToProcessReturnedData).someServerSideFunction() which can return some data back to your html page.
Learn more about HtmlService and communicating with the server here
My aim is to get an element <div id="calender"> and all what is in the element shown in a browser. The point is that normal get-html-source won't do the thing. The element what I am looking for does not exists in the html output of php-function file_get_contents.
I have tried to get the source by php with xpath byt the help of http://us3.php.net/manual/en/class.domxpath.php which inludes a nice tool to get what is in any tag in the html page. But the problem here might be that the element (a calender) is formed to the loaded page by javascript and cannot be caught by server side php. So, is there a way I can catch such element (div) by javascript instead.
There are script examples of javascript for this kind of problem (if I have understood them correctly) but currently I cannot get a simple javascript to work. An example below shows how I have tried to built up a code. $ajax thing here is just one path I have tried to solve the problem but don't know how to use it. More here I cannot figure out why the simple javascript functions do not work (just test purposes).
<!doctype html>
<html lang="fi">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script type="text/javascript">
function ok {
alert "OK";
}
function get_html (my_html){
alert "OK";
var l = document.getElementById('my_link').value;
alert l;
alert my_html;
var url = my_html;
$.ajax({
url: url,
dataType: 'html'
success: function(data){
//do something with data, which is the page 1.html
var f = fs.open("testi_kalenteri.html", "w");
f.write(data);
f.close();
alert "data saved";
}
});
}
</script>
</head>
<body>
<p id ='my_link' onclick='get_html("lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192")'>html-link</p>
<p id ='ok' onclick='ok()'>show ok</p>
</body>
</html>
Briefly, I have a link to a web page, which shows up a (booking) calendar in it but this calendar is missing in the "normal" source code, by file_get_contents (php). If I browse the html source with Chromes tools (F12) I can find the calendar there. T want that information get by javascript or by php or such.
If you read the source code of the page you point to (http://www.yllaksenonkalot.fi/booking/varaukset_akas.php), you notice that the calendar is loaded via an iframe.
And that iframe points to that location :
http://www.nettimokki.com/bookingCalendar.php?id_cottage=3629&utm_source=widget&utm_medium=widget&utm_campaign=widget
Which is in fact the real source of the calendar...
EDIT following your comment on this answer
Considering the real link : http://www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192
If the calendar is not part of the generated html, it is surely asynchronously generated (in javascript, client side).
From this asumption, I inspected the source code (again).
In the developper tools of my browser, in the Network section, where you can monitor what files are loaded, I looked for
calls to server (everything but calls to resources : images, stylesheets...).
I then noticed calls to several urls with json file extensions like http://www.lomarengas.fi/api-ib/search/availability_data.json?serviceNumber=9192¤tMonthFirstDate=&duration=7.
I felt I was on the right track (asynchronous javscript calls to generate html with json datas), I looked for javascript code or files that was not the usual libraries files (jquery, bootstrap and such).
I stumbled upon that file : http://www.lomarengas.fi/resources_responsive/js/destination.js.
It contains the code that generates asynchronously the calendar.
tl;dr
The calendar is indeed generated asynchronously.
You can't get the full html with a curl or file_get_content in PHP and
you can't access it with ajax code (due to Same-origin policy).
By the way, you should contact the site to see if you can access their api via PHP with their consent.
Hope it helped you understand the whole thing...
To get <div id="calender"> you can use next code (jquery):
<div id="calender"></div>
<script>
$("#calendar").click(function(){
alert('calendar was clicked');
});
</script>
If I understand you correctly. I think you need appropriate php respond with some correct code inside php file:
// json_handler.php
<?php
if (is_ajax()) {
$return = $_POST;
$return["ok"]="ok";
$return["json"] = json_encode($return);
echo json_encode($return);
}
function is_ajax()
{
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
and this is script wich is inside html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<a id="click">click</a>
<script>
$("document").ready(function(){
$("#click").click(function(){
var data = {
"request": "request"
};
data=$.param(data);
// alert(data);
$.ajax({
type: "POST",
dataType: "json",
url: "json_handler.php",
data: data,
success: function(data) {
// here you will see echo respond from your php json_handler.php
// also you can add here more javascript (jquery code) to change your page after respond
alert();
}
});
return false;
});
});
</script>
<body>
<html>
http://www.w3schools.com/jquery/jquery_ajax_intro.asp
First off, I am NOT a professional programmer, which is why I am here for help, so thanks in advance for your time and patience. I need a bit of code for a website that will call and display information from a specific field in a published Google spreadsheet, to be displayed via HTML, through javascript or some other similar method.
Looking around, there seems to be several ways of doing this, but all of the examples and tricks I can find are a bit beyond my expertise, and my efforts at applying several of those methods have, frankly, failed miserably. I have searched through previous questions, but they all cite examples that are way more complicated than what I need.
If someone could cite me an easy example, I'd greatly appreciate it. (The simpler the better.) In the meanwhile, I will continue to experiment to see what I can do.
This is a duplicate of How can I access Google Sheet spreadsheets only with Javascript?
But since that example is not trivial for beginners, here is the code that will show the second cell of the spreadsheet using the code from the answer above
Go to https://github.com/mikeymckay/google-spreadsheet-javascript and download the file google-spreadsheet.js
Edit that file with a text editor and change
this.jsonCellsUrl = "http:// to this.jsonCellsUrl = "// and
this.jsonListUrl = "http:// to this.jsonListUrl = "//
to not have mixed http and https in your page
Change the var url in the below to point your sheet
FIDDLE
<!DOCTYPE html>
<html>
<head>
<title>Spreadsheet example</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src='google-spreadsheet.js'></script>
<script type='text/javascript'>
$(function() {
var url = "https://spreadsheets.google.com/pub?key=0Ago31JQPZxZrdHF2bWNjcTJFLXJ6UUM5SldEakdEaXc&hl=en&output=html";
var googleSpreadsheet = new GoogleSpreadsheet();
googleSpreadsheet.url(url);
googleSpreadsheet.load(function(result) {
$('#results').html(result.data[1]); // show the 2nd (0-based) cell
});
});
</script>
</head>
<body>
Here is the result: <span id="results"></span>
</body>
</html>
I am trying to place a javascript ad zone inside a php function. I am doing this to control what ad zones are placed on each page. Currently in the php template I am using:
<?php
if(is_page('welcome-president')) {
oiopub_banner_zone(9);
oiopub_banner_zone(19);
}
?>
I am trying to place this javascript code inside the if conditional tag instead of the oiopub_banner_zone(9); so that the ads will not be cached and rotate.
<script type="text/javascript" src="http://rutgers.myuvn.com/wp-content/plugins/oiopub-direct/js.php#type=banner&align=center&zone=9"></script>
Thanks in advance!
Rather than call the function oiopub_banner_zone(9) to display the banner code, you can just replace that function call with echo and the actual script tag that you would like to output on the page.
<?php
if(is_page('welcome-president')) {
echo '<script type="text/javascript" src="http://rutgers.myuvn.com/wp-content/plugins/oiopub-direct/js.php#type=banner&align=center&zone=9"></script>';
oiopub_banner_zone(19);
}
?>
If you want to prevent caching. Make an that points to some place in your site ( e.g. /ad_iframe.php ) and do the rotate logic to retrieve the add content there. That will not get cached.
There was a post about it that helped me a lot.
Preventing iframe caching in browser
Good luck, and cheers.