googlewebcomponents / google-sheets Goto Github PK
View Code? Open in Web Editor NEWGoogle Spreadsheets web components
Home Page: https://elements.polymer-project.org/elements/google-sheets
License: Other
Google Spreadsheets web components
Home Page: https://elements.polymer-project.org/elements/google-sheets
License: Other
Google Sheets as a proper gapi.client API now! This element should be migrated to it.
I am trying to access the following Google spreadsheet:
https://docs.google.com/spreadsheets/d/1E77UIqc5VD0KFjJjHK_dLbWBl7bw8_eUmeUcxxAA6sM/edit#gid=1380168487
According to the docs, the following code should do the trick:
<google-sheets id="sheet" key="1E77UIqc5VD0KFjJjHK_dLbWBl7bw8_eUmeUcxxAA6sM" gid="1380168487" published></google-sheets>
However, I am getting the following error on my console:
XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/list/1E77UIqc5VD0KFjJjHK_dLbWBl7bw8_eUmeUcxxAA6sM/mtpx19/public/values?alt=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 400.
When I load the above feed URL, https://spreadsheets.google.com/feeds/list/1E77UIqc5VD0KFjJjHK_dLbWBl7bw8_eUmeUcxxAA6sM/mtpx19/public/values?alt=json in my browser, I see the following error message:
Invalid query parameter value for grid_id.
After a bit of research, I found this thread on Google Groups, which explains that the format of the second parameter in that URL has changed, and suggests to try the value '1' instead.
Since the value is computed by the gid_to_wid
function inside the <google-sheets>
tag, I tried patching line 118 to say return 1;
instead (alternatively, we could set the gid
attribute to 31579
, which produces the same result).
Now, the sheet is loaded correctly and I can access its contents through the rows
property on the <google-sheets>
tag.
If this is a permanent change in the Google Spreadsheets API, this component should probably be updated to reflect that.
Since only a list
based feed is used to obtain the sheet data, there is no header row data returned in the google-sheet-data
event and thus no way of obtaining the content of the header row cells.
When working with the data returned and want to display it in HTML, the header row cells are essential for displaying column titles, particularly in the case of displaying the data as a table.
Is this a limitation of this web component? Are there plans to include this header row data? Is there an alternative or workaround? Thanks
Just trying to pull up some data from the demo page and not working with Polymer 2.0-Preview
google-sheets.html:402 Uncaught TypeError: Cannot read property 'feed' of undefined
at HTMLElement._onCellRows (google-sheets.html:402)
at HTMLElement.handler (event-listeners.html:21)
at HTMLElement.fire (legacy-element.html:188)
at HTMLElement._handleResponse (iron-ajax.html:479)
My code
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="/bower_components/iron-signals/iron-signals.html"/>
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html"/>
<link rel="import" href="/bower_components/google-sheets/google-sheets.html"/>
</head>
<body>This is that thing that does the stuff</body>
<dom-bind>
<google-sheets
id="sheet"
key="0Anye-JMjUkZZdDBkMVluMEhZMmFGeHpYdDJJV1FBRWc"
tab-id="1"
published
rows="{{rows}}"
tab="{{tab}}"
open-in-google-docs-url="{{openInGoogleDocsUrl}}">
</google-sheets>
<dom-repeat items="{{rows}}">
<template>Row your boat</template>
</dom-repeat>
</dom-bind>
</html>
When Specifying a gid other than gid="0" for example: gid="1944964720" I get the following error in console and do not get back any data.
XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/list/1rVmJWbWUyr-xNWw-FJNDUHEGHL_UgNpIDcwxmNH0RR8/w5z7e2/public/values?alt=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:59816' is therefore not allowed access. The response had HTTP status code 400.
Works fine with the same spreadsheet and pulling from first tab which is gid="0".
Instead of importing iron-flex-layout/classes/iron-flex-layout.html
, this component should use iron-flex-layout/iron-flex-layout-classes.html
and use that module with a custom-style
.
Seems the first release is a little buggy. I have downloaded the .zip and ran bower install but everything has gone into the bower_components
folder.
In the demo.html
everything is pointing to a parent directory ../platform/platform.js
google-sheets.html:401 Uncaught TypeError: Cannot read property 'feed' of undefined
at HTMLElement._onCellRows (google-sheets.html:401)
at HTMLElement.handler (template-stamp.html:92)
at HTMLElement.fire (legacy-element-mixin.html:338)
at HTMLElement._handleResponse (iron-ajax.html:479)
at
Can able to convert excel into web app with EASA software , Spreadsheetconvert and Appizy ..But cannot able convert google sheets into web app .......
Pleases How to help me for Google sheets convert to web app .....
From the doc "If gid
is updated at a later time, the underlying data is also updated".
So I did try that on the map-sheet demo:
document.getElementById('sheet').setAttribute('gid', 1)
But nothing happens. I assumed at least left section would be updated...
So I also tried changing the other one:
document.getElementsByTagName('google-sheets')[1].setAttribute('gid', 1)
Also no update.
BTW. Changing key
also don't do much (this is my test sheet key):
document.getElementsByTagName('google-sheets')[0].setAttribute('key', '0AhyCpLnoU3uidGxBRjNSVkk0ZnJUTTR0WFZUdTFad3c')
I assumed this would all work pretty much the same as changing src
attribute on images.
Tested in Chrome 35 (current latest), Windows 7.
bower install GoogleWebComponents/google-sheets
doesn't install google-map
google-map is listed in devDependencies
. I thought this was clever, but it's a.) not ideal (users get extra stuff) and b.) plain doesn't work.
Hi,
This is probably more of a browser cache issue but I would like to find a way to ensure that changes made to my sheet are reflected in the web page (web component).
Google Sheet:
I find that the published version of my sheet (or doc for that matter) are not reflecting the edit version of my sheet (when refreshing the published version of the sheet; works properly upon creation of a sheet).
Web Component:
I am seeing a similar thing happen in the web component and wonder if we can add some javascript (inside the web component) to force a refetch of content from the published version of the sheet.
Thanks a bunch you guys,
Chat soon
Tim
The html attribute lowercases, but the actual property is camelcase.
The LICENSE file claims google-sheets is Apache 2.0, but a number of files have the following header:
<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
These are the files:
/tests/google-sheet.html
/tests/index.html
/tests/private.html
/tests/published.html
/tests/tests.html
/demo-private.html
/demo.html
/index.html
This suggests that the only copyright-able files in this repository that are Apache 2.0 licensed are README.md
and google-sheets.html
. Is this intended?
It seems like there are a few items in GoogleWebComponents which need to be versioned up so you can install without needing resolutions. Just noticed it here with google-sheets.
google-sheets is a useful component and fits nicely with Polymer data-binding model. Unfortunately it seems that it hasn't been updated in awhile - are you planning to migrate it to Polymer 2.0 and the latest Google Sheets API?
We had to pull this from google-web-components as it was breaking the catalog. The culprit is a bad merge from 55ef6e0 which includes some merge conflicts.
I stepped back through history trying to get the port working but was unable to. Filing for us to look at post I/O.
Upon loading, no data is loaded until one clicks on "View tab 2 data"
Using the demo how would I be able to load and display rows for lets say tab 1? Thank You.
CurrentlykeyChanged
doesn't account for private feeds.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.