In Google App Maker, how do you display a snackbar message?

Question

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!

I think you have already asked this question [here](https://stackoverflow.com/a/50883752/1423927). If not then what extra you want to achieve? — Darpan Sanghavi, Jul 24 '18 at 08:50

score 6 · Accepted Answer · answered Jul 24 '18 at 04:48

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.

In Google App Maker, how do you display a snackbar message?

1 Answers1