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);
}
Related
I have a table in which the last column of each row holds a Button that is intended to trigger a popup to "edit and save" certain values of that row in my React app. Part of the criteria was that clicking outside the popup would also close it while preventing the user from clicking things in the background until the popup closed.
To do this, I opted to use a package called reactjs-popup. Currently for all criteria, it works perfectly. The next step, though, was to run a function when the button is clicked so that I could pull data from the API to populate the fields. However, I found that I couldn't call any functions from the onClick of the button used as a trigger. This is the main snippet of code:
import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
trigger = {
<Button onClick = {() => { loadInfo() }}
}
modal
nested
>
{ close => (
<div className = "modal1" id = "popupForm">
// popup content with input forms with values to be populated
</div>
}
</Popup>
The main problem I have is the "onClick" part of the Button in the trigger. No matter what I put in there, it is never ran when I click it. When I test the same button as a standalone, and not as the trigger for the popup, it works fine.
I also tried using
onClick = {loadData()}
But this just caused the function to constantly run as soon as it was rendered, and inevitable break due to too many renders. Does anyone know why this reactjs-popup component does not allow onClick within its trigger? And if so, how to get around it? Thanks!
I believe you want to loadInfo when the popup opens.
For that, there is a prop onOpen in Popup which accepts a function . You can use that,
Or you can manually set open prop using state. Have a button outside popup and update the open state when it clicked.
I am currently trying to build an application using Google App Maker. After a user hits a "Create" button, depending on whether the files were successfully or unsuccessfully sent, a popup snackbar should display saying "File successfully sent" or "Something went wrong. File not sent." I want to indicate to the user in the final deployed application (no bottom console log) whether their files were sent or not. I do not know how to do this. I have tried creating separate pre-created snackbars (one for success, one for failure) and having the clientscript function display either one depending on what is returned from the serverscript function. However, I do not know how to show them. How do you display a snackbar popup in a clientscript function? Thank you for your help!
Please follow below steps in order to display Snackbar page.
Create a Snackbar page in your appmaker. In order to click on Left Hand Side panel '+' button on the "Page" section.
Choose Pop up. Click "Next" button. On the Next page Select "Snackbar" and click on "Create".
This will create a snack bar page for you. Open the snack bar page. On the bottom part you can see a text box which will display your custom message. Bind a Function to it. Show cased below.
Now in the client script add the following code to configure Snackbar.
This will create a Reusable Snack bar for you for all different messages.
//Client Script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Whenever any event happens add the following code to Display Snackbar.
setNotificationText('Congratulations!!! You have successfully showcased SnackBar');
app.popups.Snackbar.visible = true; //Snackbar is page name.
Here configuring Snackbar code is optional, just to reuse one page for many messages. You can directly showcase the Snackbar page by adding app.popups.Snackbar.visible = true; code in your client script.
I am trying to include a feature in my app that examines the values of a column in a user-uploaded Google sheet and verifies whether they are correct or not. If there are any incorrect values, a popup like Snackbar or Notification dialog will appear listing the incorrect values. If there are no incorrect values, no popup will appear. How do you display a popup with different values depending on the situation? Is there a way to display unique popups directly from the ServerScript without having to create separate pages? Thank you very much!
You can do it either by direct interaction with Snackbar's children widgets or by binding them to Custom Properties:
// option 1
app.popups.Snackbar.descendants.SnackbarText.text = message;
// option 2
app.popups.Snackbar.properties.Text = message;
app.popups.Snackbar.visible = true;
You can see first option implementation sample here - https://developers.google.com/appmaker/samples/jdbc/
You can create one Snackbar page. In that Page you should have Textbox at the bottom. You can bind that Textbox's value to custom function like getNotificationText();
In the client script right the following code in the common script.
//Client script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Once you do this, you can write following lines from your different methods to display message.
//Client script
setNotificationText('Your message.');
app.popups.Snackbar.visible = true;
Using the JEditable JQuery plugin, and everything seemed to work fine in Firefox. However, in Chrome whenever I selected something out of a JEditable dropdown, or clicked Enter when editing a JEditable textbox, the form JEditable creates on the fly was being submitted, and my entire page was refreshing. I didn't want that to happen, as I've got it configured to call a custom function that makes an Ajax call to do the update. How do you keep the JEditable form from being submitted when changing the value of one of the form inputs?
My understanding from researching online is this is a Webkit-browser issue, not just a Chrome issue, as it seems Webkit-based browsers automatically submit forms when inputs in the form are changed.
After much trial-and-error I found one way to get around this is to use JEditable's bind function. The bind function gives you access to the form JEditable creates, and you can hijack the onsubmit event with that.
So first, create a function to override the form's onsubmit event.
var bindSubmitDisableWebkitSubmission = function(settings, self){
$('form', self).attr("onsubmit", "return false;");
}
Then bind that function to the various JEditable events that you don't want to submit the form.
$.editable.types['select'].plugin = bindSubmitDisableWebkitSubmission;
Note that using preventDefault and returning false (see below) didn't work.
function bindSubmitDisableWebkitSubmission (settings, self) {
$('form', self).submit(function(e){
e.preventDefault();
return false;
});
}
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 ;-)