Need help to get the Html output in google sheet - google-apps-script

With below script, I am able to get the output in deploy as a web app "You are accessing this file from 124.153.80.230"
I am trying to import or copy this output in google sheet
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p id="ip"></p>
<script type="text/javascript">
var userip;
</script>
<script type="text/javascript" src="https://l2.io/ip.js?var=userip"></script>
<script type="text/javascript">
document.write("You are accessing this file from :", userip);
</script>
</body>
</html>
function doGet() {
var t = HtmlService.createTemplateFromFile('getip');
t.data = SpreadsheetApp
.openById('11s8K2-8jhz9RzKRLezl9pqwf5fMolqxw36lNNjJdYdA')
.getActiveSheet()
.getDataRange()
.getValues();
return t.evaluate();
}

How about this sample script? It retrieves the value using google.script.run. The retrieved value is imported to Spreadsheet.
HTML :
Filename is getip.html.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://l2.io/ip.js?var=userip"></script>
<script>
$(function () {
$("#ip").html(userip);
google.script.run.getvalue(userip);
});
</script>
</head>
<body>
<p id="ip"></p>
</body>
</html>
GAS :
function doGet() {
return HtmlService.createTemplateFromFile('getip').evaluate();
}
function getvalue(value){
var ss = SpreadsheetApp.openById("### Spreadsheet ID ###").getActiveSheet();
ss.getRange(ss.getLastRow()+1,1).setValue(value);
}
If I misunderstand your question, I'm sorry.

Related

How do I run an Apps Script function from an HTML dialog box?

Edited: It all works now, I just tried running it using Edge instead of Chrome and it worked for whatever reason. Thanks to everyone who responded!
I am trying to make a script using Google Apps Script that writes to the next line of a Google Sheet using a button in a custom dialog box. I decided to take this approach because I need to manually process a large amount of data, and creating a dialog box with some checkboxes in a Google Sheet is the way my team decided to go.
My issue seems to be that using google.script.run.writeToSheet() is not working correctly. The My Executions tab shows that writeToSheet fails every time it is called, but when I call writeToSheet in the onOpen function it works as intended. Am I using google.script.run incorrectly or something?
Here is my Apps Script code:
function onOpen() {
writeToSheet();
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.addMenu("Detection", [{name: "Detection", functionName: "showDialog"}])
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('Index')
.setWidth(500)
.setHeight(450);
SpreadsheetApp.getUi().showModalDialog(html, "Marine Mammal Detection");
}
function writeToSheet() {
var curSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastRow = curSheet.getLastRow();
var cellRange = "D"+String(lastRow+1)+":G"+String(lastRow+1);
curSheet.getRange(cellRange).setValues([['g', 'g', 'g', 'g']]);
}
And here is my HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="button" value="Submit" onclick="addDetection()"/>
<script>
function onFailure(error) {
google.script.host.close();
}
function onSuccess(error) {
//google.script.host.close();
}
function addDetection() {
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).writeToSheet();
//google.script.host.close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="button" value="Submit" onclick="addDetection();"/>
<script>
function addDetection() {
google.script.run.writeToSheet();
}
</script>
</body>
</html>
GS:
function writeToSheet() {
const sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sh.getRange(sh.getLastRow() + 1 , 1, 1, 4).setValues([[1,2,3,4]]);
}
Try this and suppy comma separated values:
function writeToSheet(v) {
const sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sh.getRange(sh.getLastRow() + 1 , 1, 1, v.length).setValues([v]);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="txt1" />
<input type="button" value="Submit" onclick="addDetection();"/>
<script>
function addDetection() {
let v = document.getElementById('txt1').value.split(',');
google.script.run.writeToSheet(v);
}
</script>
</body>
</html>

Google Script not asking for Auth: ScriptError: Authorization is required to perform that action

So I'm following the examples on here: https://developers.google.com/apps-script/guides/html/reference/run and they don't work. I get the error not in the return from the failure handler. Google never asked for auths. I figured out how to add auths manually to the manifest but idk what to add to fix it.
MainScript.gs
function doGet() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(HtmlService.createHtmlOutputFromFile('Index'), 'test');
}
function getUnreadEmails() {
// 'got' instead of 'get' will throw an error.
Logger.log("yes");
return GmailApp.getInboxUnreadCount();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = error;
}
google.script.run.withFailureHandler(onFailure)
.getUnreadEmails();
</script>
</head>
<body>
<div id="output"></div>
<button onclick="google.script.host.close()">Cancel</button>
</body>
</html>
Resulting Dialogue Box:
This worked for me:
Just run showMyTestDialog();
I think the difference was that you need to add the withSuccessHandler(). Most of the time I don't use the failure handler.
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run
.withFailureHandler((msg)=>{document.getElementById('output').innerHTML=msg})
.withSuccessHandler((msg)=>{document.getElementById('output').innerHTML=msg})
.getUnreadEmails();
</script>
</head>
<body>
<div id="output"></div>
<button onclick="google.script.host.close()">Cancel</button>
</body>
</html>
gs:
function getUnreadEmails() {
return "Hello World"
}
function showMyTestDialog() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile('ah1'), 'test');
}
Some of it's written slightly different but it's the same thing really. Feel free to ask questions. I tend to be rather light in the explanation department.

How can I show a randomly selected welcome text from a google sheet column to web app index page?

I want to show a randomly selected text from Sheet1 column A1:A(last column with text) to the user. I can do it using google sheet with
=index(A1:A50, randbetween(1, 50 ) )
and script code assigned to the Show button :
function random1() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
var val = ss.getRange("B1").getValue()
var clr = ss.getRange("C1").clearContent()
ss.getRange("C1").setValue(val)
}
But I want to deploy it as a web app that will greet everyone with a different randomly selected text each time from the sheet. I think I need to make an HTML page but I don't know how can I show the string from variable val of code.gs to < div > at index page! How can I do that?
Try this:
thoughts.gs:
function getThought() {
var thoughtsA=SpreadsheetApp.getActive().getSheetByName("Thoughts").getDataRange().getValues();
var index=Math.floor(Math.random()*(thoughtsA.length));
return thoughtsA[index][0];
}
function launchThoughts() {
var userInterface=HtmlService.createHtmlOutputFromFile('thoughts');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "This Mornings Thought");
}
thoughts.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(){
google.script.run
.withSuccessHandler(function(thought) {
$('#thought').html(thought);
})
.getThought();
});
</script>
<style>#thought {font-size:60px;color:blue;}</style>
</head>
<body>
<div id="thought"></div>
</body>
</html>
My Spreadsheet has a sheet called "Thoughts". It looks like this:
I presume you can add the thoughts.

Html5 Div Data atribute bot showing

I am trying to set atributes for my div from Json, but i cannot get it to work. Writing the values manually works, but not when setting them. i cannot figure out what i am doing wrong.
This is my code:
<html>
<head>
<title>ThingSpeak Live Colours</title>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var Temp;
var Humidity;
var Light;
$(document).ready(function () {
$.getJSON('http://api.thingspeak.com/channels/200101/feed/last.json', null, function (data) {
Temp = data["field1"];
Humidity = data["field2"];
Light = data["field3"];
var PreviewGaugeMeter_1 = document.getElementById("PreviewGaugeMeter_1");
var Data_percent_1 = PreviewGaugeMeter_1.getAttribute("data-percent");
PreviewGaugeMeter_1.setAttribute("data-percent", Temp);
});
});
</script>
</head>
<body>
<div class="GaugeMeter" id="PreviewGaugeMeter_1" data-percent="" data-append="%" data-size="90" data-theme="Green-Gold-Red" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="9" data-label="" data-style="Arch" data-label_color="fff"></div>
</html>
And this my JSON output:
{"created_at":"0016-12-12T00:00:00Z","entry_id":37,"field1":" 4","field2":" 7","field3":"4"}
I found a workaround, by getting "$.getJSON" to send variables to another webpage, from there i used $_GET, to retrieve them from the url, and it works.

Separate localstorages

I have 1 site under foo.com/test1/test1.html and another at foo.com/test2/test2.html
test1.html looks like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test1");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
And test2.html is like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test2");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
My question is that is it possible to achieve that that if I go to test1, the value of name is "test1" and if I go to test2 the name will be test2. Basically I suspect that I need to name them differently but I rather not do that. Is there any good work around for this?
Thank you in advance.
local storage is defined per domain. You should keep objects in localstorage to maintain page context.
Here is solution to do it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var thispage = JSON.parse(localStorage.getItem("page1"));
if(thispage.name){
console.log("name is defined");
}else{
console.log("name is not defined");
var obj={name : "test1"}
localStorage.setItem("page1", JSON.stringify(obj));
}
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
similar to all pages.