I am developing a web app using Google Apps Script where I fetch some JSON results from web. I'd like to present those results as a small spreadsheet embedded into one of the panels which is in the screen of the web app itself.
The idea is to do something like this:
var verPanel = app.createVerticalPanel();
verPanel.add(some_spreadsheet);
Is there any way how can I directly embed a spreadsheet object inside UI element?
Many thanks!
Michael
This is not currently possible.
Related
Background
I have a Google spreadsheet that contains multiple chart sheets.
I want to publish the entire spreadsheet and embed it in an HTML page (plain single HTML page. no other files.)
I have this simple HTML embedding simple published Google spreadsheet.
<iframe height="400px" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSE-4lufoePc8SMq1r5o9K_uWE7Km9JiouogYBUJHVBo8Esnf4tImqdNUiCcWu_26AzwDUZCM_wS1Vs/pubhtml?widget=true&headers=false" width="100%"></iframe>
Problem
I want to disable the tooltip-no-hover feature when the cursor is on some area of the chart (specifically one the bar itself).As a matter of fact, I want to disable any user interaction with the chart.
However, the user still needs to be able to navigate between the sheets.
Failed attempts
I'm new in this area so likely my attempts/coding is senseless.
<iframe enableInteractivity="False" ...
<iframe style="pointer-events: none;... - did not allow to navigate between sheets.
Unfortunately, what you want cannot be achieved.
According to the Charts Service documentation:
If you want to render charts in a web browser, use the Google Charts API instead.
The Google Charts Visualization API, however, allows you to modify the tooltip. But in order to do this, you will have to create the chart programmatically.
For this, you can try the example presented in the Quickstart here.
So after modifying the options parameter to this:
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
'tooltip': { 'trigger': 'selection' }};
This is how the chart will look like when hovering over the Mushroom part:
You can include the code from the Quickstart mentioned above in an HTML file in Apps Script in order to create a web app. The only missing part is the doGet function, which can look something like this:
function doGet() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('QUICKSTART_HTML_FILE');
return htmlOutput;
}
Reference
Google Charts Quick Start;
Google Charts Tooltips;
Apps Script Web Apps.
I have a google doc that I show inside an iframe in my website for public editing, it contains linked charts from a public spreadsheet,
I change the chart data with spreadsheet api, but the chart in the doc does not refresh automatically, and I can't clic update or update all in the doc because the "update button" is disabled,
SO I wanted to use google docs api or apps script to refresh charts,
I did not find how to do it with google docs api, and apps script does not trigger inside the iframe,
Can you please give me any idea how to do this,
Thank you.
Unfortunately there is no way to refresh charts programatically in a Google Document. You should definitely submit a feature request for SheetsChart support as there is in Google Slide App Script Service.
Workaround with Slides
Since the update feature is currently available for Slides you could achieve to style a Slide as a document and use it in your iFrame. Following this update logic you will be able to trigger a SheetsChart refresh every minute for example:
function myFunction() {
ScriptApp.newTrigger('updateCharts').timeBased().everyMinutes(1).create();
}
function updateCharts() {
let slides = SlidesApp.getActivePresentation().getSlides();
slides.forEach(slide => {
let charts = slide.getSheetsCharts();
charts.forEach(chart=> chart.refresh());
});
}
Workaround with Documents
However, since your goal is to provide your website viewers with the last version of the iFrame this can be done automatically on Document save:
File > Publish on the Web > check Automatically republish when changes are made
You will have to update manually the chart in your Document though. But this change will be reflected in your webpage automatically.
I'd like to create a form by google script.
This is pretty easy but I'd like to attached this form to a spreadsheet (no only the response), like I would have created it by the UI.
Is that possible ? Given the Formclass or FormApp is doesn't seem so. Is there a way around ?
EDIT: My goal was to create the form with the script and having the same result as if the user had had the form created from the UI interface (the main difference being having the form menu in the SS UI). It's apparently not possible.
You're right - it's pretty easy once you have the trick. Use FormApp to get the published URL of the form, UrlFetch to grab its html, then the HtmlService to present the form in the spreadsheet's UI.
See Single Google Form for multiple Sheets.
I would like to design a UI for google spreadsheets but currently the options allow for a UI to be displayed as a seperate webpage or within the container bound scripting option. Webapps for other google products like gmail allow for content (html, etc.) to be drawn on/over/within the gmail page (the extension "equire" is a great example).
I would like to design a google sheet UI that functions similarly. Is this possible or am I bound to do UI either in a seperate webpage or inside the container-bound script?
You can write a Apps Script library that shows the UI. This script will not be container bound. However, you'll have to call this script's functions from within a container bound script with a shell function in your spreadsheet. Something like
Apps Script library (not container bound)
function showUI(){
/* UI code here */
}
In your spreadsheet
function onOpen(){ // or whatever
Library.showUI();
}
Maybe if you explain why you need to do this, then some other better alternative might arise
I am a beginner in programming and I made a dashboard (populated by a spreadsheet) with Google Apps Script UIApp for my Google Apps website but I can't find the way to create a clickable row in the tableChart (I would like to open a link to a shared document previously stored in the Drive by clicking on each row). It seems impossible to use the Google Visualization APi in this UiApp. I tried to create a Handler but i was not able to link it with the tableChart...Am I wrong ?
Charts are used to display data, not to create interactive UI elements. You may want to look into using UiApp's FlexTable class to accomplish your goal.