I like to generate the Google Form using my own template engine. Unfortunatelly in the basic theme you can change only the background image, fonts, color etc is allowed. I like to have a nice HTML page in "bootstrap" style. So far I can see I could do this using Google Script. The script should open the form and generate HTML template (like example below).
Does someone know how to generate correctly this form? Which url to submit should I use? Hidden parameters?
Thanks for any comments.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
};
function getData() {
var form = FormApp.openById('....................');
return form;
}
index.html
<? var data = getData(); ?>
<? var items = data.getItems(); ?>
<form action="https://docs.google.com/forms/d/..................../formResponse" method="POST">
<!-- .................... stands for form id //-->
<ul>
<? for (var i = 0; i < items.length; i++) { ?>
<li><?= items[i].getTitle(); ?></li>
<? } ?>
</ul>
<input type="submit"/>
</form>
You can use this Google Form HTML Exporter tool
http://stefano.brilli.me/google-forms-html-exporter/ all you have to provide is link to the Google Form.
Related
I'm building a UI for my Google sheet and I have written my .gs function that returns the value I want. I have also written the HTML dialog that shows the window I need.
I know how to fill the dialog with static text, but I don't know how to put the value returned from the .gs function to be printed out in the dialog.
HTML
<html>
<head>
<base target="_top">
</head>
<body>
I want to have the value returned from the .gs function visible here as text.
<select id="simple" name="simple">
<option> or even better here </option>
<option>another option</option>
<option>yet another option</option>
</select>
</body>
</html>
gs
function getCellContent() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("MySheet");
var value = ss.getRange('A2').getValue();
return value;
};
I feel like I've read the whole internet and found nothing about such basic things.
You can use scriplets to print the value into your HTML. For example
<html>
<body>
<h1> Cell content: </h1>
<p> <?= getCellContent() ?> </p>
</body>
</html>
The solution was outside the code, I've attached.
There is another function which display the window on the screen. In my previous code it was:
.GS
var html = HtmlService.createHtmlOutputFromFile('Index');
But correctly it should appear like this:
var html = HtmlService.createTemplateFromFile('Index').evaluate();
Thanks for your patience.
I faced similar issue when I started with AppsScript. Plain html was rendering fine but scriplets inside the html was not rendering. The problem in my case was simple. Hers's a example that might be helpful for some.
So my Code.gs script contained:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Menu')
.addItem('Open Html Dialog', 'openDialog')
.addToUi();
}
function getCellContent() {
return 'Some content';
}
function openDialog() {
var html = HtmlService.createTemplateFromFile('index')
.evaluate();
SpreadsheetApp
.getUi()
.showModalDialog(html, 'Dialog title');
}
And I had template named index.html
<body>
<h1>Content: <? getCellContent() ?></h1>
</body>
Note that the above was failing because I was using <? which is parsed by most templating engines as regular JavaScript statements (eg. loops, conditionals, etc) instead of <?= which is used for evaluating an expression (something you want to evaluate and output to html view). So this (<?=) worked:
<?= getCellContent() ?>
Reference :
Single Google Form for multiple Sheets
Re-claim :
I have a little bit hard to made my writing some good or as well to
be understanding (less english).
I have a little insight about a Google Apps Script (GAS).
I have change "MyURLDoc" and "MyIdDoc" bellow as cosinderring of
mine.
Question :
How do I make a Google Form be inside of a Pop up what I've made in Google Spreadsheet ?
Attempt 1 :
function goToURL() {
FormApp.openByUrl(//*** MyURLDoc! ***//);
}
Attempt 2 :
Following as the reference has worte there!
function goToForm() {
var form = FormApp.openById(//*** MyIdDoc! ***//),
formUrl = form.getPublishedUrl(),
response = UrlFetchApp.fetch(formUrl),
formHtml = response.getContentText(),
htmlApp = HtmlService
.createHtmlOutput(formHtml)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Ta Daaa!')
.setWidth(500)
.setHeight(450); SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
Problem :
It says always like this: " No item with the given ID could be found or You do not have permission "
Creating a Sidebar with a Google Form
I just went to an old form I have and got the embed code. I loaded into a sidebar that I had on another project and pasted the embed code which is an iframe and it loaded perfectly except for the size and I ran the form and sure enough it loaded data into the spreadsheet that contains it.
I thought I'd go ahead and add a complete example. This is a simple example which creates a form for inputting time stamped text into a spreadsheet. It's done two ways. The first technique uses standard html, javascript, JQuery and Google Script. The second technique is accomplished by just creating a form and embedding it into a simple html page. Both versions fit into the side bar and both are linked to spreadsheet pages where the text is loaded and timestamped.
Code.gs:
function onOpen()
{
SpreadsheetApp.getUi().createMenu('My Tools')
.addItem('createTextEntryForm', 'createTextEntryForm')
.addToUi();
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
//This loads the text into the spreadsheet for the html version of the form.
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('formBar');//sidebar for html and formBar for form
SpreadsheetApp.getUi().showSidebar(userInterface);
}
//This is the form
function createTextEntryForm()
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var form=FormApp.create('Form On A Sidebar');
form.setDescription('Enter Your Message and Push Submit when complete.')
.setConfirmationMessage('Message Saved and TimeStamped.')
.setAllowResponseEdits(true)
.setAcceptingResponses(false)
.setDestination(FormApp.DestinationType.SPREADSHEET, ss.getId());
var containerLink=form.addParagraphTextItem();
containerLink.setTitle('Enter your comment now.')
.isRequired();
}
sidebar.html which is the html version of the form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea>
<br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
formBar.html is where the form is embedded:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<iframe src="FormURL?embedded=true#start=embed" width="300" height="550" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</body>
</html>
This is what the spreadsheet and sidebars look like:
I have a list of records in multiple sheets (same workbook).
I currently have a dropdown menu within my googlesheet where if you select one of the records it will delete the row with that record.
However, I would like to give the option to either move it to another sheet or delete it. I was trying to use UiApp but then found out alot of the options are deprecated and that now I have to use HTMLService.
So what I'm looking to do is, once I select a record, have a popup that has two options.
Option 1 : a Move option (button) with a dropdown of the names of the other sheets within the workbook that will then move that record to that sheet
Option 2 : Delete the record
Option 3 : Cancel.
Is this possible? and if so, would someone be able to guide me to the right direction or a similar example so I can try and figure out how to get that going?
You can try creating a Custom dialogs
A custom dialog can display an HTML service user interface inside a Google Docs, Sheets, or Forms editor.
Custom dialogs do not suspend the server-side script while the dialog is open. The client-side component can make asynchronous calls to the server-side script using either the google.script API for HTML-service interfaces or server handlers for UI-service interfaces.
Code.gs
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show dialog', 'showDialog')
.addToUi();
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('Page')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<select>
<option>Delete</option>
<option>Move</option>
</select>
</body>
</html>
With that, try reading about HTML Service: Communicate with Server Functions
google.script.run is an asynchronous client-side JavaScript API that allows HTML-service pages to call server-side Apps Script functions. The following example shows the most basic functionality of google.script.run — calling a function on the server from client-side JavaScript.
Here is a sample code for form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="myFile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
Hope this helps!
I have inserted instances of the Share to Classroom button on my school GSite using GAS.
Html:
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<? var site = SitesApp.getSite("domain", "webiste name"); ?>
<? var page = SitesApp.getActivePage().getUrl(); ?>
<div style="height: 35px; ">
<g:sharetoclassroom size=32 url="<?!= page ?>"></g:sharetoclassroom>
</div>
Code.gs:
function doGet() {
return HtmlService
.createTemplateFromFile('gClassroomShare')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
The web app is published to run as me for anyone in the domain.
They have been working perfectly up until yesterday/today. When I click on the buttons now, the new empty window opens with about:blank in the url.
Any idea what would have happened to break it? Would a setting in the Admin Console block this?
Cheers.
How can I use a function that returns html within a string, inside a html template in google apps script ?
For example, here is my code.gs:
function doGet() {
return HtmlService.createTemplateFromFile('test').evaluate();
}
function getHtml(){
return "<b> hello there </b>";
}
and in my html file 'test.html' I have the following:
<html>
<?= getHtml() ?>
</html>
You will see the result is something like this:
How can I change this so it produces hello there in bold, without showing the tags ?
Many thanks
Use force-printing:
<?!= getHtml() ?>
as explained here.