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.
Related
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;
I Want it That One page is only shown once the application starts and the next time go to the Home screen.I'm trying to look into NavigationHelper but doesn't work!
Check in your App.xaml.cs file, you should have something looking like this code in the OnLaunched method:
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
Here, you can check whether the app is launched for the first time (for instance, by storing a value on the phone), and replace the call to rootFrame.Navigate(typeof(MainPage), args.Arguments)) by the page you want to navigate to.
I am having a problem with a UI that I am building in a Google Spreadsheet. I will First explain a little about how it works and than I will get to the problem. The UI is fairly simple program that connects to a SQL database, it allows users to create new records, Query, search, and render reports. I have created all the panels (eg the intro page, the create record) in the GUI builder. As the user navigates through the UI I swap out a Grid with the new panel that i want the user to see. For example on the intro page there is a create button when the user clicks the button the gird where there intro panel was is replaced by the create record panel. I have created two ways for the user query/search for data. The first way is to select a number range on the intro panel and click the Query button. This will than query the last 10 or so records into a GUI built Panel that I will call MainForm. The second way is to "search" for a job. On the intro page there is a search button when the user clicks with button it goes to a new page; the grid is switched to the search panel. On the new page/panel the user can put in some parameters to search for. After the user clicks the search button the program should load the search results into the MainForm in the same way as when you Query from the intro page. I have taken the whole function apart line by line, so i am sure that the issue has to do with loading the panel/Component. What i mean by that is these few lines of code.
var Component = app.loadComponent("MainForm");
var panel = app.createVerticalPanel().setSize("770px", "900px").add(Component);
app.getElementById("contentGrid").setWidget(0,0, panel);
But why would it load in one case, but not in another? Also it is not the method of loading the Component, rather it is the returning the panel/ Component.
To Summarize, When I load the Component with the query function it works, but when i load the Component in the search function I get and error: Incompatible type passed in as a parameter. Also I load the MainForm Component in two other functions as and it works most of the time, but some times I get the same error.
I think your approach is not ideal, load component is not supposed to be called multiple times. It would be far more efficient to get all your panels in the same compnent and play with visibility of each panel to show / hide them on demand. Each panel should be inserted in a vertical panel so that the "new panel" slips to its place when the "old one" hides.
An example of this approach is shown in this post to simulate tabs and could easily be adapted to your needs.
btw, this method is also very fast and responsive since the full UI is ready from the very beginning ;-)
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);
}
I want a html-form to
open a new window (which contains 2 frames)
send the data of the form to one of these frames as a request
Is this possible? Currently, the form just opens a new window with and sends the request to the URL of the page that processes it. But what I want is that the new window that opens has two frames, one of which processes the form data.
I hope you understand my question and thank you for an answer.
Option A
you will need to use AJAX and make those steps:
Open new window
Send request by using AJAX
Get response
Put response to DIV in new window
Option B
you will need to create special html file that will be default page one of frame. next you will need to copy whole form with values of inputs to this file and trigger the submit. this way is without AJAX but it's more hmm.... twisted?
tell which option you prefere and then i can help you with code if you want of course
You can open and access new window by:
newWin = null;
newWin = open("page.html", 'win1')
if(newWin&&newWin.open&&!newWin.closed){
newDiv=newWin.document.createElement("DIV")
newWin.document.body.appendChild(newDiv)
newWin.focus()
} else {
alert("The window is not open")
}