I found out last night that Wix apps and Google Sheets doesn’t seem to have a way to connect to a data set. So basically every dynamic page that people visit on my site, loads the same spreadsheet. What I want is for each dynamic page to load a different spreadsheet.
Is there a way, or something like a table, spreadsheet, or app that will allow me to display a different spreadsheet on each dynamic page? I will also need the members/owner of that particular spreadsheet to be able to update it themselves.
I did something quite similar a while back. Look at this: https://girizano.wixsite.com/codecorner/post/html-component-not-running-in-publish-mode-google-sheets-example
You basically get the iframe code for every spreadsheet from Google Sheets (see the Pulishing option in Sheets), you put that code into a text fiield and on every Dynamic Page you send that piece of code to the html-component.
Hope this helps.
Why don’t you integrate google sheet with a wix database through http post functions? https://www.wix.com/corvid/reference/wix-http-functions.html#post
https://www.wix.com/corvid/reference/wix-http-functions.html#put
This way you would ideally just need to connect a wix database for your dynamic page then.
Appreciate the info. I’m not a coding Wiz, but your reply makes sense, and the article you sent I can follow along with. My only confusion is where does this html-component exist? Is this the embed HTML feature you’re talking about, or is this something I create on the backend in Dev mode on Wix?
Hi @giri-zano , would you be able to expand a little on the html-component. I have the iframe code, pasted into a text box on my dynamic pages, I just don’t know where the html-compenent is to send it to. Is this on Google’s end or Wix’s?
@ariantsarraf Yes, the html-component is thr embed html thing. It has 2 modes: you can paste a URL or you can paste code. It´s the latter you want. Do not use a text box for html, it´s no use.
Thank you very much for your reply and explanation @giri-zano .
Looking at your code I’m assuming below is the code you’re talking about. If so, what do I substitute for my code here? Do I put the URL of my GoogleSheet where you list “GoogleSheetsDocs”? Or how does it know it’s my google sheet?
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("GoogleSheetsDocs").innerHTML = event.data;
}
};
function sendLoadMessage () {
window.parent.postMessage("LoadOk", "*");
}
</script>
</head>
<body onload="sendLoadMessage ();" style="background-color:white;">
<div id="GoogleSheetsDocs"></div>
</body>
</html>
Then, as I understand it your write up, I need to put this into the main code…
let urlMessage = $w('#dataset1').getCurrentItem().fieldname;
$w("#ifrGoogleSheets").onMessage( (event) => {
$w("#ifrGoogleSheets").postMessage(urlMessage);
});
Like so…
Lastly, I’ve added the iframe code to my data set in a text field, which I’m assuming will be called from somewhere in the code.
Does this look right? Please advise. Thank you again for your help!
@ariantsarraf Yes, looks about right. Remember that in the part
$w('#dataset1').getCurrentItem().fieldname
you have to replace “fieldname” with the fieldname from your own collection which holds the html. I cannot read the image that well, but the LABEL starts with Google… Remember to put the FIELDNAME (also called Field Key) and NOT this label (unless they are the same).
Then with every other dynamic page, this field (holding the html) is messaged to the html-component and displayed.
ALso remember that Google Sheets has 2 options: showing a sheet which you cannot edit (called Publish) and one you can (called Share). Depending on what you want to offer, you need to put into your collection the html Google Sheets offers you from one of the 2.
Thank you again for the reply @giri-zano . So if I understand you correctly…
My data set shows ‘url’ as the “Field Key”:
So I replaced ‘.fieldname’ in the code you gave me to ‘url’:
let urlMessage = $w('#dataset1').getCurrentItem().url;
But when I preview, I’m receiving “TypeError: Cannot read property ‘url’ of null”:
Here is the code in full context in case you need:
Thank you again for your help. Is there something I’m missing here? Or how do I find the individual cell Field Key?
@ariantsarraf ONly thing I can think of right now is that you do not wait for the (dyn)dataset to load , as in something like (
$w("#dynamicDataset").onReady(()
and all subsequent code should be within that onReady).
Please check. If not, then it is time to show all the code, so I can get a better understanding.
