Open a new window from the apps script add-on menu - javascript

I have an add-on where I need to redirect to external URL instead loading with Dialog or Sidebar when the menu is clicked.
I have the sidebar code
function showContactDialog() {
var html = HtmlService.createTemplateFromFile('Website').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setWidth(480).setHeight(380);
SpreadsheetApp.getUi().showModalDialog(html, 'Website');
}

In your HTML you can open a new tab (if your browser supports such a thing) but you can't redirect the page.
In your HTML, you can do something like below:
<script>
function openPage() {
window.open('https://google.com', '_blank');
}
window.onload = openPage;
</script>

In your Website.html place this code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript">
function opentab(){
window.open(LINK_YOU_WANT_TO_OPEN, '_blank');
}
</script>
</head>
<body onload="opentab()">
</body>
</html>

This works fine for me
function open_new_doc()
{
var html = '<script>google.script.host.close();'+
'window.location.href = "'+open_url+'"</script>';
var html_open = HtmlService.createHtmlOutput(html).setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html_open, 'Opening New Window...');
}

Related

function won't run when executed from htmlService?

Im trying to switch my current sheet after 5s of the htmlService modalDialog opening.
For some reason SwitchToSheet1() does not work...
.gs
function openModal() {
var ui = SpreadsheetApp.getUi();
var html = HtmlService.createTemplateFromFile('BarcodeLoadingHTML')
.evaluate()
.setWidth(400)
.setHeight(250);
ui.showModalDialog(html, "‎");
}
function SwitchToSheet1() {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.setActiveSheet(spreadsheet.getSheetByName('Bestandsliste'), true);
};
BarcodeLoadingHTML.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('jQuery'); ?>
<?!= include('Stylesheet'); ?>
<?!= include('lottieplayer'); ?>
</head>
<body>
<div id="loading">
<lottie-player id="lottie-load" src="https://static.staticsave.com/lottie/cloudupload.json"
background="transparent"
speed="1"
loop
autoplay>
</lottie-player>
<lottie-player id="lottie-success" src="https://assets3.lottiefiles.com/private_files/lf30_qXYuJE.json"
background="transparent"
speed="1">
</lottie-player>
<p class="loadingtext" id="text">Bitte warten<span>.</span><span>.</span><span>.</span></p>
</div>
<script>
$(window).ready(setTimeout (function() {
$('#lottie-load').hide()
$('#text').text('Upload Erfolgreich!')
$('#lottie-success').fadeIn()
$('#lottie-success').get(0).play();
}, 2500));
$(window).ready(setTimeout (function() {
google.script.run.SwitchToSheet1();
google.script.host.close();
}, 5000));
</script>
</body>
</html>
Replace
google.script.run.SwitchToSheet1();
google.script.host.close();
by
google.script.run
.withSuccessHandler(() => google.script.host.close())
.SwitchToSheet1();
The above because google.script.host.close() is executing before google.script.run.SwitchToSheet1(). This happens because calls to server code using google.script.run are asynchronous, in other words, the Google servers not all the time responds instantly when they are called by run, so google.script retry until the server responds, but if the dialog is closed, there aren't more attempts to call the server.
Related
Auto close modal dialog - After server code is done, close dialog in Google Spreadsheet
Modal dialog doesn't write back to sheet, when google.script.host.close() is used
FWIW, assuming I have a spreadsheet with two sheets named Sheet1 and Sheet2, and Sheet2 is the active, the following code works for me:
// Code.gs
function showDialog() {
const html = HtmlService.createHtmlOutputFromFile('page')
.setWidth(400)
.setHeight(400);
SpreadsheetApp.getUi().showModalDialog(html, 'My custom dialog');
}
function SwitchToSheet1() {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sh = spreadsheet.getSheetByName('Sheet1');
spreadsheet.setActiveSheet(sh, true);
};
And the HTML page:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout (function() {
google.script.run.SwitchToSheet1();
google.script.host.close();
}, 5000)
})
</script>
</body>
</html>

what is the error in this web app script to give the desired effect?

enter image description herewe've tried to write a script for a web app to a specific spreadsheet
the code is 2 files one in js
function doGet() {
return HtmlService.createHtmlOutputFromFile("page");
}
//function userClicked(name) {
//var url = "https://docs.google.com/spreadsheets/d/1T3AX_YBC8703g6N7sKot41tXUh6XN4zpcBF2V-_7iJ8/edit#gid=0";
//var ss = SpreadsheetApp.openByUrl(url);
//var ws = ss.getSheetByName("Data");
//ws.appendRow([name])
//Logger.log(name + "Clicked Run Button");
//}
function userClicked() {
Logger.log("Someone Clicked the button");
}
and the other in html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Welcome</h1>
<button id="btn">RUN !!</button>
<script>
function doSomething() {
google.script.run.code.userClicked();
}
document.getElementById("btn").addEventListener("click", doSomething());
</script>
</body>
</html>
we can't get the desired action when run button is clicked
we don't know if it's the declaration of functions or summoning them
please help guide to rectify the error
this is yje project link for further analysis
https://script.google.com/d/1daP7bLBlL46av4Wc6-Pr9-z9lg6JyMY44FUtfA08fnKRKLeMuCTxH3LY/edit?usp=sharing
According to the Google Script client side API documentation, the path to call the App Script function is google.script.run.yourFunction() so in your html file. Also you are invoking the function straight away and passing the result of it to addEventListener(), instead of passing the function itself. The script should be this:
function doSomething() {
google.script.run.userClicked();
}
document.getElementById("btn").addEventListener("click", doSomething);

What's wrong with this code? It's doing nothing

<HTML>
<HEAD>
<script>
$(function(){
$(window).on('hashchange', function() {
var hash = location.hash.replace( /^#/, '' );
document.title = 'example ' + hash;
});
$(window).trigger('hashchange');
});
</script>
<TITLE>example</TITLE>
</HEAD>
<BODY>
</body>
</HTML>
Let's say the <title> of example.com is example
This code should automatically update the page title for example.com/#city1 to example city1 and example.com/#city2 to example city2 and so on.
I have only an index.html file and I don't want to add php file to my html file.
As said in the comments you need to add the jQuery library to your page using :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
Then your code should work as expected.

Open popup in Javascript

I have a js rendered in HTML which would give a preview of the form. The code is functioning correctly but it gives me the output on the same page rather i want to open it in a pop-up window. I have tried using window.open () with no luck. Could you please help me out in how i can use window.open() for the below. The button ID is preview. When the button is clicked it executes a function similar to below
$("#preview").click(function() {
$("#formpreview").delete();
var fieldSet = ...................});
You can populate the html in the child window using the below example:
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="launch" value="Launch Child Window"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
var btnLaunch = document.getElementById("launch");
btnLaunch.onclick = function () {
var childWindow = window.open("", "", "height=500, width=500");
var html = "";
var theVariable = "Conent in Child Window";
html += "<p>" + theVariable + "</p>";
childWindow.document.body.innerHTML = html;
}
Store the popup as a variable, then set the popup's HTML to whatever you need.
$("#preview").click(function() {
var myWindow = window.open("", "Popup", "width=300, height=500");
myWindow.document.write("<html>This is where your content goes</html>");
});

Redirection to a locale page with a Firefox extension

I'd like to have a page redirecting to another using Javascript. I've tried with document.location.href but it doesn't work with local pages (stored in my hard drive).
Does someone know something that would do the trick ?
thanks,
Bruno
Doesn't it? I've tried the following and it works fine:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<input type="text" value="" id="test"/>
</body>
<script type="text/javascript">
document.location.href = "file:///C:/dev/PICCS/vb/binaries/";
</script>
</html>
Tested in IE8 and Chrome
Posting this on the xul file of the extension :
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
gBrowser.addEventListener("DOMContentLoaded", function(e) {
var documentElement = e.originalTarget.defaultView.document;
var div = documentElement.createElement("div");
div.innerHTML = Read("chrome://firefox_extension/content/locale.html");
documentElement.body.appendChild(div);
},
false
);
the complete extension : http://uploadingit.com/file/xef7llflgmjgfzin/my_firefox_extension.xpi

Categories