I can get/access the value of the UI elements using,
e.parameter.elementname or app.getElementById(id)
if i create UI using UiApps or GUI builder like,
app.add(app.loadComponent("MyGui"));
app.getElementbyId('textbox1').setText("Hi");
If i use, HtmlService.createHtmlOutputFromFile('myPage');
How can i get the values entered in the html form - elements ?
As an alternative to client-side JavaScript, you can also create simple forms that submit to the doPost() handler which then processes the data. I created a sample script to demonstrate: Run, Source
When using HtmlService you need to rethink your app to be primarily client based not server based. You can (in client-side JavaScript) add a change handler to any element and do something with the value, including calling a server function with google.script.run.myFunction(someValue). See the new user guide here: https://developers.google.com/apps-script/html_service
Related
I am new to web development and need your help to figure out how to use the form in HTML and use the data to populate the said field in a word document. Any advice on how to approach this problem is highly appreciated. It would really help if you could post a live example for the below. Please,do let me know if any further explanation is required.
As a new developer, I want to advise you that you are getting into some challenging territory here and many of the solutions might require some heavy experience with programming and MS Word. In this forum, there are many options you can try, but from what I gather you will need to learn about macros.
The second option you could try are some services that will do this for you for a fee. Here are two options. Check out Formstack or Jotform
If you use this type of service, you would create a form action within your html code that will merge the data from the form into the Microsoft Word Document using merge tags.
The third option you can try is using Javascript within the form to populate the Word Document. The code would look more like this:
function Export2Word(element, filename = ''){
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml+document.getElementById(element).innerHTML+postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename?filename+'.doc':'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
Export HTML Table Data to Excel using JavaScript
HTML Content:
Wrap the HTML content in a container you want to export to MS Word document (.doc).
<div id="exportContent">
<!-- Your content here -->
</div>
Last option would be using PHP, and I recommend watching this video by CodexWorld and reviewing the post that goes along with it here. This is a challenging concept, so I would encourage you to take your time.
Hopefully this will help and best of luck.
Well, I don't know how to exactly do that, I am also a beginner like you. What seems to help you might be connecting your form with Google Sheets. The Google Spread Sheet will store all data submitted via your form. You can then use this data wherever you want.
There is an open source project for this task, you can do that by following the steps stated here: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
You can see it in action here: https://nisootech.vercel.app/#contact-me
There are two parts in your application
Enabling user to input the values in frontend. Which you can build using any frontend technology stack eg: HTML and Plain Javascript(Required for calling the Services), React JS, Angular etc.
Backend Service which will basically does the heavy work
Receiving the input from user.
Creating Word file using any libraries such as
Generate word files using Apache POI ,
Using Node.js to generate dynamic word document using Database value
Downloading the file after its completely generated using the values supplied by user.
download a file from Spring boot rest service
how to download file in react js
For the Backend service you can use technologies like Java and Springboot, Python, Node Js etc.
Building Restful webservices using spring
Use Technology in which you are more comfortable and start building. These Links and documentation you can use to start from basic.
Suggest you to breakdown your problems focus on each specific areas and do the development as per your smaller problems and integrate them later.
I'm having trouble with the autocomplete feature in Google App Script.
Built-in methods like SpreadsheetApp. will provide an autocomplete menu with methods to choose from.
However, if I create my own child object, autocomplete works for a little while, and then it just stops working.
for example:
var skywardRoster = SpreadsheetApp.getActiveSheet();
skywardRoster. will produce method options for a while, and then it stops.
However, the code still functions, and methods work if I type them out manually, so I know the declarations must be right. The menu simply won't appear, and it's just very inconvenient to have to look up each method individually as I go.
I have tried: breaking the variable and retyping that line; copy and pasting the code back into the editor; using different browsers; copying the gs file itself and working within the copy; and signing out completely and signing back in. Nothing seems to get it back to work.
I'm really new to coding, and I'm not sure what can be causing this.
Does anyone know how to fix this issue?
You might want to check Built-in Google Services:Using autocomplete:
The script editor provides a "content assist" feature, more commonly called "autocomplete," which reveals the global objects as well as methods and enums that are valid in the script's current context. To show autocomplete suggestions, select the menu item Edit > Content assist or press Ctrl+Space. Autocomplete suggestions also appear automatically whenever you type a period after a global object, enum, or method call that returns an Apps Script class. For example:
If you click on a blank line in the script editor and activate autocomplete, you will see a list of the global objects.
If you type the full name of a global object or select one from autocomplete, then type . (a period), you will see all methods and enums for that class.
If you type a few characters and activate autocomplete, you will see all valid suggestions that begin with those characters.
Since this was the first result on google for a non-working google script autocompletion, I will post my solution here as it maybe helps someone in the future.
The autocompletion stopped working for me when I assigned a value to a variable for a second time.
Example:
var cell = tableRow.appendTableCell();
...
cell = tableRow.appendTableCell();
So maybe create a new variable for the second assignment just during the implementation so that autocompletion works correctly. When you are done with the implementation you can replace it with the original variable.
Example:
var cell = tableRow.appendTableCell();
...
var replaceMeCell = tableRow.appendTableCell(); // new variable during the implementation
And when the implementation is done:
var cell = tableRow.appendTableCell();
...
cell = tableRow.appendTableCell(); // replace the newly created variable with the original one when you are done
Hope this helps!
I was looking for a way how to improve Google Apps Script development experience. Sometimes autocomplete misses context. For example for Google Spreadsheet trigger event parameters. I solved the problem by using clasp and #ts-check.
clasp allows to edit sources in VS Code on local machine. It can pull and push Google Apps Script code. Here is an article how to try it.
When you move to VS Code and setup environment you can add //#ts-check in the beginning of the JavaScript file to help autocomplete with the special instructions. Here is the instructions set.
My trigger example looks like this (notice autocompletion works only in VS Code, Google Apps Script cloud editor doesn't understand #ts-check instruction):
//#ts-check
/**
* #param {GoogleAppsScript.Events.SheetsOnEdit} e
*/
function onEditTrigger(e) {
var spreadsheet = e.source;
var activeSheet = spreadsheet.getActiveSheet();
Logger.log(e.value);
}
I agree, Google Script's autocomplete feature is pretty poor comparing with most of other implementations. However the lack is uderstandable in most cases and sometimes the function can be preserved.
Loosing context
The autocomplete is limited to Google objects (Spreasheets, Files, etc.). When working with them you get autocomplete hints, unless you pass such object instance to function as an argument. The context is lost then and the editor will not give you suggestions inside the called function. That is because js doesn't have type control.
You can pass an id into the function instead of the object (not File instance but fileId) and get the instance inside of the function but in most cases such operation will slow the script.
Better solution by Cameron Roberts
Cameron Roberts came with something what could be Goole's intence or a kind of hack, don't know. At the beginning of a function assign an proper object instance to parameter wariable and comment it to block:
function logFileChange(sheet, fileId){
/*
sheet = SpreadsheetApp.getActiveSheet();
*/
sheet.appendRow([fileId]); // auto completion works here
}
Auto completion preserved
I am learning GAS. The app script on the Quickstart: Managing Responses for Google Forms uses the depecrated Class&method:ScriptProperties.getProperty(key) ie.ScriptProperties.getProperty('calId'). I have reported this as an issue to Google. Is there a better way to code this example and achieve similar results?
// Store the ID for the Calendar, which is needed to retrieve events by ID.
ScriptProperties.setProperty('calId', cal.getId());
You'll want to use Properties.setProperty(key, value) instead of ScriptProperties.setProperty(key, value) The reason is because The "Properties Service" has now replaced Google's ScriptProperties class. Here's my source: https://developers.google.com/apps-script/guides/properties
The other answer is almost right..., it just uses a shortcut from the documentation without defining the shortcut itself.
The syntax is as follows
PropertiesService.getScriptProperties().setProperty(key, value)
And all the similar methods as described in the documentation. (getProperty,setProperties , etc...)
The usage is the same, you can use find/replace in your script to simply update every occurrences .
I am trying to create an app script for a Google Spreadsheet that I have. I created a script for another sheet a couple of years ago and I can't remember how to to get the component ID.
Here's the code:
var pointsSheet = SpreadsheetApp.openById('1o8_f063j1jYZjFEnI_P7uAztpnEAvQ6mc3Z1_Owa69Y');
function doGet() {
var app = UiApp.createApplication();
app.add(app.loadComponent("Marks")); //IT IS NOT CALLED MARKS!
var panel = app.getElementById("VerticalPanel1");
var text = app.createPasswordTextBox().setName("text");
var handler = app.createServerHandler("getResults").addCallbackElement(text);
panel.add(text);
panel.add(app.createButton("Get Record", handler));
//SpreadsheetApp.getActiveSpreadsheet().show(app);
return app;
}
...
The commented part where it says "IT IS NOT CALLED MARKS" is the part I'm talking about. In my other script this works, but in the new script it doesn't work. How do I find the component name (if that's what it's called)?
You are trying to run a script that uses the GUI Builder, a couple of years ago it was possible but now it is not anymore (since october 2013)! See here.
I saw that because you are using app.loadComponent("Marks"), which was the method to call the Ui components created in the GUI Builder.
The old apps built with it still work but you can't create/modify it.
EDIT following your comment :
You will have to build your UI from scratch using either UiApp - which uses the same elements as the GUI builder and the same syntax - or HTML Service.
The latter is much more powerfull but uses a completely different approach as it uses client JavaScript in combination with server code. Take a look at the docs and tutos and make your choice ;-)
Box:// seems to open the app, however I am not able to discern how to target a specific file.
Currently we don't have support for this, but it is a great idea that we'll consider for our roadmap.
We actually do support this. The best way to add this integration into your app is to use our OneCloud AppToApp framework (additional information available here http://developers.box.com/the-box-sdk-for-onecloud-on-ios/)
This is easy using the app-to-app framework. You just need to call BoxAppToAppAPI's sendFileDownloadRequestToApplication:withMetaData: if you want an app to go to a particular file and in Box's case download/preview it.
To make it go to the Box app you can simply pass in [BoxAppToAppApplication BoxApplication] in the first parameter.
As for the metadata parameter, you can create it with BoxAppToAppFileMetadata's appToAppFileMetadataWithFileName:fileExtension:folderPath:mimeType:fileID:folderPathByID:exportToken:username:
Assuming your app already integrates with the Box API via the SDK or otherwise, it should be able to get all of that information easily.
If the mimeType is not known, nil can be passed in. Also, nil can be passed in for the exportToken if the file was not exported out of the Box app (with the AppToApp framework, a roundtrip scenario is also supported where the user starts in the Box app, picks a file to view/edit/etc in your app, and then sends it back to Box to upload). So if it's not a round-trip, it's just a one-way from your app to Box, use nil for the exportToken.
Before doing this, you can also check if the Box app is installed by checking for [[BoxAppToAppApplication BoxApplication] isInstalled].
Below is a fictional example (the values are made up):
BoxAppToAppFileMetadata *metadata = [BoxAppToAppFileMetadata appToAppFileMetadataWithFileName:#"fileName"
fileExtension:#"png"
folderPath:#"All Files/Folder1"
mimeType:nil
fileID:[NSNumber numberWithLongLong:123456]
folderPathByID:#"0/12345"
exportToken:nil
username:#"username#email.com"]
BoxAppToAppStatus status = [BoxAppToAppAPI sendFileDownloadRequestToApplication:[BoxAppToAppApplication BoxApplication]
withMetaData:metadata];