I have the following Google Apps Script:
function popUp() {
const ui = SpreadsheetApp.getUi();
var message = "<HTML><BODY>"
+ "The meeting is at <b>10am</b>."
+ "</BODY></HTML>";
var popUP = ui.alert(message, ui.ButtonSet.OK);
}
When I apply this function to a button in my Google Sheets, the popup pops up as expected.
However, the text in the popup carries all the "messy" HTML coding.
How can I get the popup to show actual HTML formatted text?
In other words, how can I make the UI popup use the HTML-laden text I added for var message but in a way that actually formats the text to use the HTML I added?
IS there some kind of HTML wrapper function?
What I get vs what I want:
Here's a simple example closer to what you want. I don't think the alert takes html. It requires simple ascii text. Note: google.script.host.close() doesn't work when deployed as a web app.
function popUp() {
var s='The meeting is at <strong>10:30AM</strong>.<br /><input type="button" value="OK" onClick="google.script.host.close();" />';
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutput(s), 'PopUp');
}
See this in the 'Custom Dialog' documentation for Apps Script: https://developers.google.com/apps-script/guides/dialogs
Related
I borrowed and tweaked this code from another thread.
I have a button on the Google Sheets screen, which when clicked, creates a new UI window/screen with a clickable link, and the link is correctly referenced, but when you click that link it doesn't actually do anything.
The URLValue from AA1 would just be a concatenation of a Google Form address, with a code to pre fill the form with a number from my spreadsheet. The link all works as a cell content, and works fine from Chrome, but doesn't do anything in Safari.
function AddStock(){
var URLValue = SpreadsheetApp.getActiveSheet().getRange('AA1').getValue();
showAnchor('Add Stock',URLValue);
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
Any idea where I'm going wrong?
I am trying to launch an Google Form from a script on Google sheets. At the moment, i am doing it trough the form's unique ID and this is what I have:
function addtoDatabase() {
var formaddnew = FormApp.openById('uniqueformID');
}
I am sure i am using the correct form's ID. The script runs without returning any errors or exceptions but the form isn't launched. I am new to App script and I think I might be overlooking something.
Thank you for your help.
You (as me too) were confused with a strange name of function openById:
var formaddnew = FormApp.openById('uniqueformID');
This code does not "open" a form, it assigns a form to the variable formaddnew. You may check it if you add this line of code:
Logger.log(formaddnew);
run the code and press [Ctrl]+[Enter] to see the log.
How to open a form with a script
No. One has no such option because scripts have no access to a browser. A Form is actually opened in a browser, and google-apps-script cannot open new tabs in a browser.
Is there any way though to open a form from a pop-up or message box?
Please try the method described here:
Google Apps Script to open a URL
Here's a tested sample code based on this answer:
var C_URL = 'https://stackoverflow.com/questions/48947678/launching-google-form-from-app-script'; // change
function onOpen() {
var ui = SpreadsheetApp.getUi();
// Or DocumentApp or FormApp.
ui.createMenu('Menu')
.addItem('Show Window', 'testNew')
.addToUi();
}
function testNew(){
showAnchor('Open this link',C_URL);
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
Notes:
the script creates a custom menu and opens the window with an URL.
User has to click the URL.
I use Google App Script with Google Sheets. When I click a button, the code enters in this following function :
function myButtonClicked(){
const template = HtmlService
.createTemplateFromFile('Index')
.evaluate();
const html = HtmlService
.createHtmlOutput(template)
.setWidth(500)
.setHeight(500)
.setTitle('MyTitle');
SpreadsheetApp.getUi().showModalDialog(html, 'MyTitle');
}
My form contains multiple inputs that have an onclick event. This event does something and displays a message in a specific case.
The message is displayed thanks to the following function :
SpreadsheetApp.getUi().alert('myMessage');
The problem is : when this last one appears, my modal containing my form is closed.
How can I display a modal over another one ?
Thanks.
I have a UiApp that creates some form elements that write data to a specific spreadsheet. Now I want to load the UiApp widgets into an htmlService template, and I'm not sure how to go about this.
My doGet function loads the base template, and the doGetApp builds the UiApp:
function doGet() {
return HtmlService.createTemplateFromFile('base_template').evaluate();
}
function doGetApp() {
// creates input forms for a spreadsheet (the following is just an example
var app = UiApp.createApplication();
var tabPanel = app.createDecoratedTabPanel();
var flowPanel1 = app.createFlowPanel();
var flowPanel2 = app.createFlowPanel();
tabPanel.add(flowPanel1, "Create New Projects");
tabPanel.add(flowPanel2, "Edit Projects");
app.add(tabPanel);
// return app; // <<<< original doGet function returned the app
// testing different ways of returning the UiApp
return HtmlService.createHtmlOutput(app); // this displays the text "HtmlOutput"
}
My base_html template is very simple right now:
<html >
<?!= getCSS("css_js"); ?>
<body>
<h1>Template Test</h1>
<?!= doGetApp(); ?>
</body>
</html>
I've tried a few variations on this, but the results are generally the same: Text output that appears to describe the object, as opposed to displaying the UiApp. (the getCSS function works fine)
The goal is to be able to easily load some of my own css / js as well as the UiApp in order to easily style the forms / resulting content. I'm pretty new to this, so it is entirely possible that I'm approaching this the wrong way. Appreciate any pointers. Thanks!
-greg
For now, you either use html service or uiapp - you cannot combine the two
I'm a Java developer but I did a small site for a non-profit group using Google Sites. I have a form I'd like to be somewhat dynamic and Google Apps Script seemed to be a viable option. As frequently happens when one is learning a new technology, I copied and pasted the code below from a tutorial/documentation. I then published it, and inserted the script widget into a page on the site and saved the page. When I reload the page, the "place holder" for the widget is there, but nothing happens - no buttons, no panel, nothing. Same results when I run it from the script editor. I'm sure I'm missing something obvious, but I haven't been able to get the UI to render at all. A little direction would be greatly appreciated.
thanks in advance!
function doGet(e) {
Logger.log("Executing the doGet() method . . .");
var app = UiApp.createApplication();
var aPanelRoot = app.createVerticalPanel();
var button = app.createButton('Click Me');
aPanelRoot.add(button);
var label = app.createLabel('The button was clicked.');
label.setId('statusLabel');
aPanelRoot.add(label);
var handler = app.createServerHandler('myClickHandler');
handler.addCallbackElement(label);
button.addClickHandler(handler);
aPanelRoot.setVisible(true);
return app;
}
function myClickHandler(e) {
var app = UiApp.getActiveApplication();
var label = app.getElementById('statusLabel');
label.setVisible(true);
//app.close();
return app;
}
It seems that you simply forgot to add aPanelRoot to the app in the doGet() function
app.add(aPanelRoot)
also : by default all widgets are visibles so you can remove all the setVisible(true) statements as they are only necessary if you set them to false somewhere else...
And if I may add a last comment, it's generally a good idea to choose the parent widget as callbackElement so you don't risk to forget to add elements when you begin to have lots of them (all children are automatically included in the parent) .