We Keep Coding

Use Juice CSS Inliner Tool in Google App script

I am using Google App Script and I am relatively new to coding. I am trying to send an email with an HTML body, but the entire formatting is dropped in Gmail.
To fix it, I came across the Juice Inliner Tool to add the CSS stylesheet to the HTML source. But I have no clue how to use it in Google App Script. Please help me with some guidance or any reference code on this.
So far I have the code to convert a Google Doc into an HTML Page. Now I want to input the HTML code finalhtml into the Juice Inline tool and return that code instead of finalhtml.
function doc2html(googleDocId){
const exporturl = 'https://docs.google.com/feeds/download/documents/export/Export?id='+googleDocId+'&exportFormat=html'; //export and hold the document as HTML in the constant exprotUrl
//set the required fetch parameters to run the UrlFetchApp
const fetchParam = {
method :"get",
headers : {
"Authorization":"Bearer "+ScriptApp.getOAuthToken()
},
muteHttpExceptions:true
};
var finalhtml = UrlFetchApp.fetch(exporturl,fetchParam).getContentText(); // holds the actual HTML code for the doc in the variable finalhtml.
GmailApp.sendEmail('mailId','Subject', finalhtml,{htmlBody: finalhtml});
}

Access Google App Functions in jquery/javascript

I am using google app scripts on google sites. I have created a navigation menu, and I embedded it into the page. I want to get the pageURL() from google scripts and retrieve it in my JavaScript page. I tried using the scriptlet to get the value, but it doesn't execute. Here is what I have so far. How can I get access to values in google app scripts and use them in my JavaScript function?
google script (.gs)
function getPageName(){
var site = SitesApp.getSite("site.com", "sitename");
var page = site.getChildren()[0];
var pageName = page.getUrl().split("/").splice(-1)[0];
return pageName;
}
javascript file
var pageName = <?!= getPageName()?>; // doesnt execute, need to get page url
if(pageName == linkName){
// add class here.
}
Since google loads the apps script as an iframe, I tried doing window.location.href, but it doesn't work either. The page name ends up being the name of the google app instead.

An alternative to using scriptlets is to use google.script.run (Client-side API)
It's pretty easy to use. In your case, it should be like this
code.gs
function getPageName(){
var site = SitesApp.getSite("site.com", "sitename");
var page = site.getChildren()[0];
var pageName = page.getUrl().split("/").splice(-1)[0];
return pageName;
}
Javascript File:
function onSuccess(receviedPageName)
{
if(receviedPageName== linkName)
{
// add class here.
}
}//onSuccess
google.script.run.withSuccessHandler(onSuccess).getPageName();
withSuccessHandler(function) is executed if the server-side function returns successfully or withFailureHandler(function) is executed if a server side function fails to complete the task it was assigned.
Give it a try :)

Web App HTML, JS + Google Apps Script: How to go back to my app after return in GAS?

I'm building a web app using HTML, CSS and JavaScript and using Google Spreadsheet as a database. I'm planning to use PhoneGap to turn my web app into a real app.
I was able to read from my Google Sheet, using the Google Visualization API, now I'm working about the writing options: I used a function set with Google Apps Script, inside the Google Spreadsheet and it works correctly.
This is how my app works and what I need:
I query my first Google Spreadsheet (Database)
If I cannot find what I need, I can make a request
I send the request: the action of the form send my data to the Google Apps Script code
The GAS writes my data in a second Google Spreadsheet (Register)
The GAS should send me back to my page
The page sends a feedback on screen
As you can understand by the bold point, I'm not able to go back to my webpages... I don't know if there's any method or function to do this. The only thing I found was using ContentServiceto make the page "write another form and send it using JavaScript", but I don't think is the best solution...
I'll post my code down here... hoping someone can help me
function doPost(e){
var sheet = SpreadsheetApp.openById("myID").getSheetByName('SheetName');
var column = 1;
var colArray = sheet.getRange(2, column, sheet.getLastRow()).getValues();
var maxi = Math.max.apply(Math, colArray);
var id = maxi+1;
var name = e.parameter['name'];
var surname = e.parameter['surname'];
var serial = e.parameter['serial'];
var eMail = e.parameter['mail'];
var text = e.parameter['text'];
var area = e.parameter['area'];
var date = new Date();
var ans = ""
var flag = "Work In Progress";
var vals = [id, date, name, surname, serial, eMail, area, text, ans, flag];
var sheetObj = sheet.appendRow(vals);
// return ContentService.createTextOutput(someOutput);
On the return line I should go back to my web app/app but I can't find a way to do it. Someone can help me or give me some advice?
Thanks a lot for your help!
S.

This is the solution to your problem.
Instead of using return ContentService.createTextOutput(someOutput);
use HtmlService to return to your form
return HtmlService.createHtmlOutputFromFile('redirect').setSandboxMode(HtmlService.SandboxMode.IFRAME);
And your HTML file should look like this,
Update: redirect.html should be in the same project as that of your app script file.
redirect.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<title>This Is A Sample Title</title>
<script>
function test()
{
window.location.href = "www.hostname.com";
}
</script>
</head>
<body onload="test()">
Login
</body>
</html>
See if this works for you.

PHP Get Rendered Javascript Page

I'm developing application using AngularJS. Everything seems to be nice until I meet something that leads me to headache: SEO.
From many references, I found out that AJAX content crawled and indexed by Google bot or Bing bot 'is not that easy' since the crawlers don't render Javascript.
Currently I need a solution using PHP. I use PHP Slim Framework so my main file is index.php which contains function to echo the content of my index.html. My question is:
Is it possible to make a snapshot of rendered Javascript in HTML?
My strategy is:
If the request query string contains _escaped_fragment_, the application will generate a snapshot and give that snapshot as response instead of the exact file.
Any help would be appreciated. Thanks.

After plenty of times searching and researching, I finally managed to solve my problem by mixing PHP with PhantomJS (version 2.0). I use exec() function in PHP to run phantomJS and create Javascript file to take get the content of the targeted URL. Here are the snippets:
index.php
// Let's assume that you have a bin folder under your root folder directory which contains phantomjs.exe and content.js
$script = __DIR__ ."/bin/content.js";
$target = "http://www.kincir.com"; // target URL
$cmd = __DIR__."/bin/phantomjs.exe $script $target";
exec($cmd, $output);
return implode("", $output);
content.js
var webPage = require('webpage');
var system = require('system');
var page = webPage.create();
var url = system.args[1]; // This will get the second argument from $cmd, in this example, it will be the value of $target on index.php which is "http://www.kincir.com"
page.open(url, function (status) {
page.onLoadFinished = function () { // Make sure to return the content of the page once the page is finish loaded
var content = page.content;
console.log(content);
phantom.exit();
};
});

I recently published a project that gives PHP access to a browser. Get it here: https://github.com/merlinthemagic/MTS. It also relies on PhantomJS.
After downloading and setup you would simply use the following code:
$myUrl = "http://www.example.com";
$windowObj = \MTS\Factories::getDevices()->getLocalHost()->getBrowser('phantomjs')->getNewWindow($myUrl);
//now you can either retrive the DOM and parse it, like this:
$domData = $windowObj->getDom();
//this project also lets you manipulate the live page. Click, fill forms, submit etc.

Responding to button click events in Google Docs custom HTML dialog

I am an Admin of a Google Spreadsheet. Several times a week me and other admins have to add new users to the spreadsheet so I thought it would be easier if we could use a custom HTML dialog to do so.
I am displaying the dialog like so:
function AddRow()
{
var html = HtmlService.createHtmlOutputFromFile('AddRow')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showModalDialog(html, 'Add Row')
}
File AddRow.html is a simple HTML form with text boxes, select elements, etc.
Now is there a way I can access the spreadsheet to add a new row with the values entered by the user?
In the HTML file AddRow.html I tried the following
<script>
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getSheetByName('2015');
sheet.insertRows(2, 1);
</script>
However this does not insert a row. If I move that code of the HTML file into a *.gs file it does work so it must be a limitation on HTML files?

The script code within served HTML files is javascript, not Google Apps Script - the main difference for this question is that server-side Google Apps Script has access to the full set of APIs provided for Google Services, while the client-side javascript does not.
One option is to use the google.script.run Client-side API to invoke the function that you already have working on the server side (in the editor). For more information, see the guide to communicating with server functions in HTML service.
function insertRows(rowIndex, numRows) {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getSheetByName('2015');
sheet.insertRows(rowIndex, numRows);
return true; // Need to have a return value for google.script.run to work
// To return a failure to the client side, throw an error.
}
Client side script:
...
// Call insertRows on server side.
google.script.run
.withSuccessHandler( hooray ) // See function hooray below
.insertRows(2, 1);
...
/**
* This function will receive a call-back if the google.script.run
* call returns success.
*/
function hooray( result ) {
alert( "Received result <" + result + ">" );
}