Google Forms, sidebar for live form - google-apps-script

I would like to create a sidebar to a live google form, ideally in order to pick from a (google) map coordinates to be entered in the form.
From the documentation and from my trials I can create a sidebar to the form editor/designer (https://docs.google.com/forms/d/ID/edit), not the live form itself (https://docs.google.com/forms/d/ID/viewform). Forms are different in regard to the Doc and Sheet Apps, that there exist these two views.
For example:
function onOpen() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setTitle('Maps');
FormApp.getUi().showSidebar(ui);
}
First problem is that the trigger for onOpen() fires when opening the form designer, not when the end user will open the form (/viewform URL) to fill it out.
Then FormApp.getUI().showSidebar(ui); gets the UI of the forms designer and opens up a sidebar there and not in the Form the end user has to fill out.
Documentation seems to confirm this.
So, is it possible to get access to the live form, including any associated triggers?

So, is it possible to get access to the live form, including any
associated triggers?
No
However, you could embed your form in a page that also hosts the map in a separate frame, enabling users to browse the map, click to see coordinates, and then copy them to the form. There would be no interaction between the google-hosted form and the map.

Related

How to create and inject custom fields into Google Calendar UI for certain users?

I want to be able to edit the Google Calendar UI to have custom fields show up when a user is creating an event. I know it is possible to patch events and add custom fields to it after, but I want these custom fields to be defaulted on the user's calendar so anytime they create an event, the options show up. The pop-up I'm talking about is below.
I know that you can use AppScripts to create an add-on on the side of the screen, but I would prefer to have the change made right in the user's main UI. It seems like this is possible, as there is a Zoom add-on that allows you to "Make it a Zoom Meeting" as seen in the screenshot above in the bottom right hand corner.
If anyone could point me towards an example/documentation on how to do this, that would be greatly appreciated. Thanks in advance!
There is a similar question asked here
Where a community member shared a few options such as:
Using a browser extension to inject your custom fields + the Google Calendar API + the OAuth required.
Create your own UI using Google Apps Script CardService and its HTML service.

AppsScript with Google Sheets: Conditionally load images based on user interaction/when a range is selected

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).

Displaying a Google form on sheets

I am creating a form for users to input information on a Google spreadsheet. They will access the spreadsheet and then click on an image that is linked to a script. When the image is clicked, I want a form to appear. Then I want the input from the form to be accessible in the script.
I am able to create a form but the form does not appear on the sheet. Here is the code thus far for the GS script
function startForm() {
var form = FormApp.create('myForm');
var item = form.addCheckboxItem();
item.setTitle('What would you like to do?');
item.setChoices([
item.createChoice('Budget Inquiry'),
item.createChoice('Add Purchase')
]);
var choices = item.getChoices();
// then I can respond to the user's choice
}
I would like this simple form to just appear on the google sheet. Any input would be appreciated.
Instead of creating you own form with script, just go to the insert menu of your spreadsheet and select form. Enter you question and your two choices. Close the form. You will see a form response sheet created in your spreadsheet. Also, a menu item Form will appear on your menu. Then go to the script editor and from the menu select Resources. Select Current Project Triggers and set a new trigger for onFormSubmit. You can then enter a function onFormSubmit to do whatever you want done when the form is submitted getting data from the form response sheet. There is plenty of documentation you can Google.
The way in Google Sheets to display external content other than images and Google Drawings is by creating a dialog or sidebar with the related content embeded.
There is a similar question that includes an answer that shows how to do this:
Single Google Form for multiple Sheets

How to update data from google spreadsheet while using htmlview

I have a spreadsheet where I am accepting google form responses and in the same spreadsheet I have a dashboard which give out link to open new form. users are suppose to enter data every 10 minutes and I have a minute counter that show when last time data was submitted, how many minutes since last data submit and what was summary of last submit. Along side this information they will have a link to open new form.
Users are using tablet to record data and they are opening spreadsheet on html view as on tablet browser by default it opens like that as well as its easier to open hyperlink through html view.
I have sheet on recalculate every 1 minute to make sure minute counter updates at least every minute.
But html view does not update it self unless user manually reloads the page hence they cant see updated summary of last submit as well as can not see the timer.
Is there a way to force reload or refresh or recalculate sheet on html view to have this work?
Thank you very much for help in advance.
No, there's no way to refresh the users browser page/session and reload the page, as Apps script can't access the browser.
You can combine window.setTimeout() and window.onload to make a website run a function at intervals.
Mozilla Documentation - setTimeout
Documentation - window.onload
<script>
function reloadMyPage(delayMilliseconds) {
setTimeout("location.reload(true);",delayMilliseconds);
}
</script>
<body onload="JavaScript:reloadMyPage(5000);">
Here is documentation about embedding a Google sheet into a website:
Google Support Documentation - Share a Speadsheet
You need to publish the spreadsheet to the web. Make sure to choose the EMBED Tab:
Copy out the iframe code and put it into your website.

Display Form in Sidebar

I am not sure if what I am trying to do is even possible.
I am trying to put a google form into the sidebar of a google doc.
Right now I have an apps script document plugin that opens the sidebar fine, and I am able to open the form using var form = FormApp.openById('form_id');
But I don't know how to get a html object or blob from a form element that I could use to embed the form in the sidebar.
I also can't use iframes as those are disallowed.
While you can display a google form in a sidebar in a spreadsheet/document (see sample code below), there is one significant gotcha with it: the form does not work, i.e. you can't submit the form. Not sure exactly why, but my guess it is due to the sandbox restrictions and/or caja sanitization.
I suggest you code your own form using HTML and HTML Service (or UI Service) and show that in a sidebar. If you need you form to save the responses to a spreadsheet, you can also do that rather easily. See this for more on info and code samples of using forms in HTML Service and this for using forms in UI Service. Your server-side script can open a spreadsheet and write form values to it, if that's what you need to do.
Sample code for an Add-on to show Google Form in a Sidebar in Google Sheet:
NOTE: The form does not actually work - it does not submit when shown in a sidebar!
function showFormInSidebar() {
var form = FormApp.openById('YOUR-FORM-ID-HERE');
var formContent = UrlFetchApp.fetch(form.getPublishedUrl()).getContentText();
var ui = HtmlService.createHtmlOutput(formContent).setTitle("Google Form in Sidebar Example");
SpreadsheetApp.getUi().showSidebar(ui);
};
function onOpen(e) {
// Add this add-on to Add-ons menu
SpreadsheetApp.getUi().createAddonMenu()
.addItem('Show form', 'showFormInSidebar')
.addToUi();
};