I am new to the world of Google's Apps Script, and I am trying to create a basic UI for my end user to query data (stored in google spreadsheets) and display the data in a formatted / user friendly way.
Since I want to start off simple and add in components as I learn Apps Script I decided to create a basic form that will allow me to enter text in a text box, then assign that value to a label (what I thought would be a simple exercise in creating basic form components, and retrieving / assigning values).
Unfortunately the stumbling block I ran into is that there is no getText() or TextBox.getValue() function. I tried searching through online forums / google etc to find out the way around this, but nothing I try seems to work (previous searched led me totry and work this out in an event handler).
My question is this. If I have a textBox ('textBox1') and a button ('button1') and a label ('label1'). How to I get my web app to assign the value I enter in textBox1 to label1 when I click button1?
I realize this is probably the most basic of questions, and I know it has been asked before....but no matter how hard I dig through these old posts I can't seem to figure what should be an easy bit of code out.
Thanks in advance.
Suppose you have code that looks like this:
var textbox = app.createTextBox().setName("textboxName");
var buttonHandler = app.createServerHandler("updateLabelText").addCallbackElement(textbox);
var button = app.createButton("Click me").addClickHandler(buttonHandler);
var label = app.createLabel().setId("label");
Then in your function:
function updateLabelText(e) {
var app = UiApp.getActiveApplication();
app.getElementById("label").setText(e.parameter.textboxName);
return app;
}
So the things to note:
The button handler is given the name of a function that you define somewhere else in your code.
The button handler also must be given a "callback element". This is required if you want to read the value of that element in your function. You can add a panel as a callback element and anything that's on that panel will be added to the callback.
Values of callback elements are passed back through e.parameter. The property name is the name of the element. Example: e.parameter.textboxName.
The label needs an ID so that you can reference it from your other function.
Related
We've got a google sheet with user editable text that will eventually be used within images. We have a web application that generates the images and serves them, so they can be embedded within the IMAGE function provided within Sheets.
This works fine and ends up being something like:
=IMAGE(CONCAT("PREVIEW_TOOL_URL", "?t=", ENCODEURL(previewText(D2))), 3) where 'previewText' is simply formatting the string to pass to the web tool.
However, to avoid overloading the server and generating a ton of requests every single time someone loads the sheet, I'd like to make it so images only load in some condition (i.e. a user presses a button or they highlight the text), is there some way of doing this?
Add a checkbox to E2:
=IF(E2,IMAGE(CONCAT("PREVIEW_TOOL_URL", "?t=", ENCODEURL(previewText(D2))), 3),"Check to preview")
You can also use Apps Script for this!
You will have to start by:
Go to Tools > Create a new script;
Use the following script:
function loadImages() {
let sheet = SpreadsheetApp.openById("SPREADSHEET_ID").getSheetByName("SHEET_NAME");
sheet.getRange("CELL_YOU_WANT_TO_PLACE_THE_FORMULA").setFormula("YOUR_FORMULA");
}
Do not forget to adjust this script such that it meets your needs accordingly.
Insert a new drawing into the sheet;
Attach a script to it by going to the three dots symbol on the drawing; when asked about the name, input loadImages which is the function which we had created previously.
Press the button on the sheet and that's it!
Reference
setFormula(formula).
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'm looking for a way to use a button on my website as a trigger for a google script. The script needs to be called with an email input:
scripts.google.com/.../exec?[email]
Using a text input field that is submitted with a button seems the simplest.
Is it possible for the button's link to change to reflect the email typed into the text field?
NEW: Is there a HTML/CSS only way to do this?
Is it possible for the button's link to change to reflect the email typed into the text field?
Yes. You could use oninput to do it live, or a lesser version of that such as onblur or onchange if it didn't need to change right as the user typed it. You could also simply go with onclick, and change it prior to submission ensuring that you return true during the click event handler.
Are there better ways to approach this?
This would just be an opinion, there are certainly many ways to approach this, however especially given the lack of code presented, this isn't really answerable without context. One route could be to use an ajax request with XMLHtppRequest. It depends on what you need to get back.
//get email
<input id="mail" type"email" placeholder="en">
//sent data
<button onclick="submit();">click to sent</button>
<script>
//get input data
var email = document.getElementById("mail").value;
//button clicked start function
function submit(){
window.location.href = "you'r url"+ "/"+ email;
}
</script>
OK, I'm tired of searching for specific questions to help with a project, finding answers, changing my implementation which just adds more questions, realizing there's a better way to do things, etc. So allow me to ask for general assistance, I will then do my best to research how to do it and ask further questions if needed.
I'm writing a script to be used as a Gadget in a Google Site page
(I'm more than willing to share this if anyone wants to take a look
at it); right now I'm doing this just for me, but I want to write
this to be easily used by others.
This will list all user's Google Docs in a specified folder; when
selecting the document from the list, the contents will be displayed
for editing in another field.
The user will be able to define certain lines, starting wit a period,
to "mark" as chords that can be automatically transposed with the
push of a button; that is to say, the user clicks a button and all
A's go to A#, B to C, C to C# and so on, but only on the specified
"Chord" lines.
The user can then save this document back to the Google Docs for
printing if needed.
I've got the layout mostly. Some problems I'm coming across:
Doing a .find apparently finds all documents that have the given string in the name and
the contents. The fix would be to put the document IDs in a Hidden, but it doesn't seem
that a List returns the numbered item you clicked on, so how can I also get the ID
that's stored somewhere else?
I'd like the TextArea to be rich text for bolding and what-not; does
Google Apps have a text editor (it'd be awesome if I could just put
the Google Docs editor in a panel)? RichTextArea has been
deprecated, is there a replacement?
To do the transposing, I was planning on just putting every character
of the text area into an array, stepping through the array, when it
sees a "\n" followed by a "." to flip a var "on", then changing any
following characters, then if it sees another "\n" to turn the var
"off"; is there a better way to do this?
Or, is there way to add a script to a Google Document that would do
the transposing (I know you can do macros for spreadsheets, but there
doesn't really seem to be an equivalent for documents)? That way I can
just give out this macro and tell people to use on their existing document.
Since you asked, yes, separate questions would be appropriate, because the combination of questions is very specialized, while the individual problems might be more general, and of use to more people. But let me take a stab at it anyway...
[With the result of find()]... how can I also get the ID that's stored somewhere else?
DocsList.find() returns a list of File objects. Class File has a getId() method that returns the document ID you are used to seeing in Google Drive. To get the IDs of all your files:
var files = DocsList.getAllFiles();
for (var i in files) {
Logger.log(files[i].getId());
}
You should also look at DocsListDialog for creating a file picker that works on Google Drive.
RichTextArea has been deprecated, is there a replacement?
No, not in apps-script. You've just got TextArea. However, you may be able to embed a third-party rich text editor in your UI.
To do the transposing, ... is there a better way to do this?
Change the TextArea.value into an array of lines, then manipulate those, without needing to manage an on/off state. See How do I get information out of TextArea in Google App Script on the button click? and Javascript: Convert textarea into an array.
// aTextArea contains user's input. Probably a Johnny Cash song.
var inputText = e.parameter.aTextArea;
var inputLines = inputText.split('\n');
for (var i in inputLines) {
if (inputLines[i].charAt(0) == '.') {
// Transpose
}
}
// Put lines back together, if you wish
var outputText = inputLines.join('\n');
..is there way to add a script to a Google Document that would do the transposing...
Yes (capability extended to Docs and Forms since question was originally asked). No, Spreadsheets are the only document type that can be a container for scripts at this time.
Alternatively, you could employ a stand-alone script to operate directly on Docs! Perhaps with a script deployed as a Web App that lets users pick the target music to transpose from documents on their Google Drive, and that then writes a new copy of the document, transposed?
I run my GAS as an Apps-script-gadget on my web-page and use the GUI-builder. I have two questions:
1.
I know how to set text in a textbox:
app.getElementById("TextBox1").setText("BigSister");
But how do i get text from a textbox?
I tried:
app.getElementById("TextBox1").getText();
...getValue();
...value;
etc.
Nothing works...
2.
Is it possible to print a message window from the code to the screen f.Ex. for debugging purposes?
Any advice would be appreciated.
Within your handler code, you can access the value of the text box as
var value = e.parameter.TextBox1 ;
Before doing this you must have run the setName() method on your text box.
var tetxbox1 = app.createTextBox().setName('TextBox1');
I suggest you run through some of the tutorials at https://developers.google.com/apps-script/articles where you can find answers to many of your questions.
You can retrieve the value of your ListBox when it is passed back through a handler. It's passed in the parameter class under the Id of the ListBox. The following is a fool-proof method of retrieving that value:
function changeHandler(e)
{
var source = e.parameter['source']; //source is your Id of the element
var value = e.parameter[source]; //value is the selected item as ['a' | 'a,b,c']
//More code here
}
I'm still waiting for a solution to retrieve that value without a handler.
EDIT here is a workin example for you to test
online test
and the script + GUI is here
=======================
Srik answer is absolutely right - as usual ;-) - but to make things a bit more clear to you since you are using GUI builder here is a small screen capture that shows the relevant parameters.
As for your second question, the simplest thing to do to get a momentary showing window to 'print' some data to screen is to use a texBox or a textAreal (or anything else that allows to show text...) and play with the setVisible(true) & setVisible(false) to show/hide the widget. In the GUI builder you can put it anywhere in your UI, even over other elements that you normally use since it will be invisible most of the time (the visibility parameter is available in the GUI builder environment as well). It will behave exactly as a 'popup' in other environments...