Google App Script WebApp, Manipulating UI - google-apps-script

Hi and Good day to all,
Google App Script can be used in so many ways. I know cause I have tried some of them but Iam not an expert so, the situation is.
I have created an Spreadsheet
create a form using the new UI Building that comes with the script editor.
named:gtest01
UI compose of:
label, id=label_caption
button 1, id=button_hide, event-onmouseclick=hide_label
button 2, id=button_show, event-onmouseclick=show_label
button 3, id=button_message, event-onmouseclick=message_me
now, the code is:
/* This is so when I want to just deploy it as a [webapp] using the
script editor -> Publish Deploy as Web App
*/
function doGet(e) {
var app = UiApp.createApplication().setTitle("Sheet Application");
app.add(app.loadComponent("gtest01"));
Logger.log("Application UI Loaded");
return app;
}
function message_me(e) {
Browser.msgBox("my message");
}
function hide_label(e) {
var app = UiApp.getActiveApplication();
label =app.getElementById("label_caption");
label.setVisible(false);
}
function show_label(e) {
var app = UiApp.getActiveApplication();
label =app.getElementById("label_caption");
label.setVisible(true);
}
// this code is for when the spreadsheet is shared so they can access the form
function showform_() {
var app = UiApp.createApplication();
app.add(app.loadComponent("gtest01"));
SpreadsheetApp.getActiveSpreadsheet().show(app);
}
function onOpen() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var menuEntries = [];
menuEntries.push({name: "Show Form", functionName: "showform_"});
ss.addMenu("e-Test", menuEntries);
}
First scenario is that when spreadsheet is shared
when menu is clicked the form will load - thats good
when show and hide button nothing happens - why and how can i fixed
this?
when message button is click - message will show but the form will
close, how can I display a message without closing the form?
Second scenario is that when publish as Webapp.
When Developer Link is Access the UI is always updated - ok
When URL Link is Access the UI is always updated its like it is
cache, how can I fixed this?
on dev link: when show and hide button nothing happens - why and how
can i fixed this?
on dev link: when message button is click - will generate an error,
how can I display an alert message on WebApp
Please help I have search and tried the sample codes and answer in the forum am missing something.
Thanks
Nick Ace

First scenario
when show and hide button nothing happens - why and how can i fixed this?
In your functions, use return app at the end. Unless you return the app object, the UI doesn't get updated.
how can I display a message without closing the form? - Try
SpreadsheetApp.getActiveSpreadsheet().toast()
2nd scenario
When URL Link is Access the UI is always updated its like it is cache, how can I fixed this? - Save your most recent code as a version
on dev link: when show and hide button nothing happens - Again return app will take care of this
on dev link: when message button is click... - Browser.msgBox is not supported in a web app.

When Using UI it is generally a good idea to make everything happen inside this Ui, so try to avoid showing messages with Toast( as they are not supported in web apps anyway).
Since you are using the GUI it should be quite easy to use a label with your message that is initially invisible and to make it visible in an handler routine.
Note that this kind of handler can be a client handler as well unless you need to do something else from this action.
As for the other points of you question, our (very fast) friend Srik has already answered thoroughly ;-)

Related

Google script - link to download /export file from google sites

on google sites i have a search page and i need to insert a button to export to a spreadsheet the search. The script creates a spreadsheet with the information and provides a download link.
How can I do this without reloading the search page?
is it possible to open a modal or a window over the page to display the link?
how can I fill in the doGet() event argument from the search page?
In another implementation, I had a problem with the sandbox, saying that downloading was disabled in chrome since update 83. is there any way to solve this?
Or if anyone has another solution for all of that, it would be most welcome. I appreciate the collaboration.
my code.gs:
function doGet(e)
{
var report = e.parameter.report; //// how to fill a 'parameter' in search.html ?
if(report)
{
var planilha = SpreadsheetApp.create('asd');
// fill the Spreadsheet
var ssID = planilha.getId();
var URL = 'https://docs.google.com/spreadsheets/d/'+ssID+'/export?format=xlsx';
return ?? /// returns what exactly?
}
return HtmlService.createTemplateFromFile('search').evaluate();
}
There is already a reported issue on Public Issue Tracker to to add "allow-downloads" in HtmlService.XFrameOptionsMode.ALLOWALL
You can go there and click on the star besides the issue title so it gets more visibility.

How to show the Load Indicator while running the google app script

How to show the Load Indicator while running the google app script
If you want to stop the interaction with the sheets while the image is showing and the is executing you could try to use the UI method showModalDialog().
So something like this would do the trick for what you are trying to achieve:
function showDialog() {
var ui = SpreadsheetApp.getUi();
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput('<img src=https://i.stack.imgur.com/AuqJU.gif>')
.setWidth(250)
.setHeight(300);
ui.showModalDialog(htmlOutput, 'Script Running');
}
If you want to have more control over the closing of the dialog you will need to do it from the client side. Modifying the HTML object inside the showModalDialog(). In case you are interested in that I would suggest to take a look into this question.
You can also check the Apps Script documentation about dialogs and other UI elements.

Display Form in Sidebar

I am not sure if what I am trying to do is even possible.
I am trying to put a google form into the sidebar of a google doc.
Right now I have an apps script document plugin that opens the sidebar fine, and I am able to open the form using var form = FormApp.openById('form_id');
But I don't know how to get a html object or blob from a form element that I could use to embed the form in the sidebar.
I also can't use iframes as those are disallowed.
While you can display a google form in a sidebar in a spreadsheet/document (see sample code below), there is one significant gotcha with it: the form does not work, i.e. you can't submit the form. Not sure exactly why, but my guess it is due to the sandbox restrictions and/or caja sanitization.
I suggest you code your own form using HTML and HTML Service (or UI Service) and show that in a sidebar. If you need you form to save the responses to a spreadsheet, you can also do that rather easily. See this for more on info and code samples of using forms in HTML Service and this for using forms in UI Service. Your server-side script can open a spreadsheet and write form values to it, if that's what you need to do.
Sample code for an Add-on to show Google Form in a Sidebar in Google Sheet:
NOTE: The form does not actually work - it does not submit when shown in a sidebar!
function showFormInSidebar() {
var form = FormApp.openById('YOUR-FORM-ID-HERE');
var formContent = UrlFetchApp.fetch(form.getPublishedUrl()).getContentText();
var ui = HtmlService.createHtmlOutput(formContent).setTitle("Google Form in Sidebar Example");
SpreadsheetApp.getUi().showSidebar(ui);
};
function onOpen(e) {
// Add this add-on to Add-ons menu
SpreadsheetApp.getUi().createAddonMenu()
.addItem('Show form', 'showFormInSidebar')
.addToUi();
};

Google UiApp reset UI Application

I have a script I am making that is essentially a form that submits an email. There is a submit and a reset button. My goal I am hoping to accomplish is the the Reset button either reloads the Google Site, or reloads the App Script.
Is there a function in Google Apps Scripts that I can use to accomplish this?
By putting everything in a panel (horizontal, vertical, scroll, etc), you can do the following in your server handler for your form submit
app = UiApp.getActiveApplication().remove(0);
/*add whatever you want here using app */
return app;
This removes the first item in the app (the panel) and lets you add whatever.
You could also use a client handler with an initially invisible item. On submit, hide the form and show a message until the server handler returns.
Unfortunately, there is no way to refresh the page.
Edit: Adding what I wrote in the comment so it's readable:
The way I usually set mine up, doGet and the handler both call another function with arguments for the new/current app and whatever values my listboxes have. For example,
function doGet(e){
return actuallyCreateGadget(UiApp.createApplication(), "default value for listbox");
}
function actuallyCreateGadget(app, selectedValue){
//do stuff here and finish by returning app
}
function serverHandlerFunction(e){
return actuallyCreateGadget(UiApp.getActiveApplication().remove(0), e.parameter.lbFirst);
}

GAS: GUI Builder, File Upload, Submit Button

I already read some answers to this question on stackoverflow but I was not able to get my case working.
I have the components in GUI Builder and the code runs to function respondToSubmit after pressing Submit button, but the fileName is undefined. fileName is the content of Name in Input Fields in component File Upload. Any Ideas what is wrong?
function respondToSubmit(e) {
var app = UiApp.getActiveApplication();
var fileBlob = e.parameter.fileName;
throw(fileBlob); // fileBlob = undefined!!!
return app;
}
RECENT CODE:
function doPost(e) {
throw("doPost"); // never thrown so code does not run here!
var app = UiApp.getActiveApplication();
var fileBlob = e.parameter.FileUpload1;
return app;
}
I think you have to have your labels, text boxes, and submit buttons all in a Flow Panel, which then has to be enveloped by a Form Panel. I had this exact same problem, even the 'Unexpected Error'. I solved it by putting all of those elements into a Flow Panel.
There are two types of buttons - one is the regular button and the other is a Submit button (which can be placed only on a form panel)
Make sure you are using the Submit button and not a regular button
When you use a Submit button, there is no need to provide a handler function. Submit buttons, by default get handled by a special function called doPost(e). So, write a doPost function and you will be able to filename parameter.
The FileUpload widget documentation has a nice example of how this is done.