Google Sheet Preview: is there any way?

[stephtara (Stephanie Booth)]

I found a couple of old (nearly 10 years?) topics about Google Sheets previews, or lack thereof. Is there any way to have that work today?

Here’s why I’m asking.

In our community, we track important information in a Google Sheet. On Facebook, the preview of the linked spreadsheet in the post is actually a snapshot of the current state of the spreadsheet. It’s super practical because we don’t even necessarily have to open it if the colour-coding in the spreadsheet gives us enough information (it is often the case).

Here’s a screenshot of a typical post, to show you what I mean:

The multi-coloured cells give us an overview of the situation at a glance, without having to go and click on the Google Sheet (unless we want to view more detail).

Would there be any way to achieve this kind of “embedding” without Discourse topics?

[Canapin (Coin-coin le Canapin)]

On Google docs desktop, go to file → share, then publish → embed.

You can then paste the generated iframe into Discourse.

You must add the Google docs domain to the allowed iframe URLs in Discourse admin.

The result looks like this:

The window remains small so it’s not very practical…

[stephtara (Stephanie Booth)]

@Canapin

On Google docs desktop, go to file → share, then publish → embed.

Thanks! Definitely looks like it would do the trick. Do you know if there is any way of doing this on mobile too? I’d guess at least half of our members are « mobile only »

[stephtara (Stephanie Booth)]

Note: the following was merged (thanks @merefield and @darkpixlz) from another topic I just created… with the exact same question as in December. It fell through the cracks in my brain (ski accident was nearly a year ago folks, but I’m still not back in good working order for some things, clearly – thanks for your indulgence).

In my community each member has a tracking spreadsheet that they normally share when they post for help. The way it works now on Facebook, there is a “preview” that shows a snapshot of the latest part of the spreadsheet:

This is super useful (at least one thing Facebook is useful for/at!) because it gives us a view of the relevant data we need without even clicking on the spreadsheet. We often click, of course, but it gives us a general understanding of what kind of situation we’re dealing with.

I read here that for the onebox to work on Discourse the google doc had to be published. I tried that with mine but it doesn’t seem to work:

Oscar de Steph Lantus FSL 🇨🇭VD (Lausanne)

It even says the sheet is private, when it’s not! Here is the result when I share the “share with link” link, same thing:

Oscar de Steph Lantus FSL 🇨🇭VD (Lausanne)

Is there any way to get something better than that? It’s a fundamental aspect of how we function: the key point of our work is to help people track and interpret blood glucose that they monitor at home, and this spreadsheet model is our “magic” tool to do this.

I’m guessing that if Facebook can manage to display a meaningful snapshot of a google spreadsheet, there should be a way to manage that on Discourse too?

[merefield (Robert)]

(oooh, nasty, good luck with recovery!!! )

did @Canapin’s suggestion help any?

[stephtara (Stephanie Booth)]

@merefield

did @Canapin’s suggestion help any?

Let’s see, it “kinda works” but the iframe is really tiny :-/ – not really useable as such I’m afraid:

Would there be a way to fix the iframe size?

[darkpixlz (Pyx)]

@stephtara

Would there be a way to fix the iframe size?

Can you link to this post if possible? I can check CSS classes for you to see if that’s possible..

[stephtara (Stephanie Booth)]

https://entraide.diabete-felin.com/t/test-de-partage-de-tableau/189?u=stephtara

If there’s something to be done with a bit of CSS that’s good news!

[stephtara (Stephanie Booth)]

If this works, I’m trying to figure how to make it simple for my non-techy members. Would there be a way to define a kind of “user shortcode” where they paste the embed code to their spreadsheet once somewhere (in a custom user field?) and they can just type something like %my_spreadsheet% (or whatever) in their post for the iframe to display?

[darkpixlz (Pyx)]

I did shortly have a look, there is no specific class for docs iframe embeds but I did notice its max width was 100% but not the real width.. setting that to 100% made it wider and height is up to you

.post__regular .cooked {
    iframe {
      max-width: 100%;
      max-height: min(1000px, 200vh);
      width: 100%;
      height: 500px;
    }
}

[darkpixlz (Pyx)]

I would personally add it as a component to the site so that it globally applies to all users

[stephtara (Stephanie Booth)]

@darkpixlz

I would personally add it as a component to the site so that it globally applies to all users

yeah just added the CSS to the component I created for these little “community tweaks”, thanks!

And now is the question of making it easy for people to insert that iframe in their posts (because if they have to go over to Google Sheets, publish, embed, copy code, come back, paste, it won’t happen)

[stephtara (Stephanie Booth)]

The iframe solution is really quite nice now that it’s the right size, because we can scroll around in the spreadsheet to see the rest of the values without having to open it. And it even works well on mobile! Thanks, that’s really a good part of the problem dealt with.

[darkpixlz (Pyx)]

@stephtara

And now is the question of making it easy for people to insert that iframe in their posts (because if they have to go over to Google Sheets, publish, embed, copy code, come back, paste, it won’t happen)

Unfortunately unless you get into more advanced JavaScript I don’t really see that happening.. I’m not too familiar with the Discourse JS API but it seems to be as easy as taking the URL, putting wrapping it in <iframe src="..."></> and replacing /edit with /pubhtml?widget=true&headers=false

I would recommend making a tutorial post of sorts informing your community members on how to properly export it if this is a big concern, that or you can always request official onebox support in Contribute > Feature

[stephtara (Stephanie Booth)]

@darkpixlz

Unfortunately unless you get into more advanced JavaScript I don’t really see that happening.. I’m not too familiar with the Discourse JS API but it seems to be as easy as taking the URL, putting wrapping it in <iframe src="..."></> and replacing /edit with /pubhtml?widget=true&headers=false

I don’t have much JS knowledge but if you perceive a possible solution in that direction I can dig into it.
Drifting a bit from the original topic, but I’m thinking that my “dream solution” would be to be able to add a button to the toolbar which “adds the user’s spreadsheet”

Will definitely post instructions and a tutorial, but my community population is very much “the general public”, and even with a tutorial this kind of thing is challenging.

[darkpixlz (Pyx)]

@stephtara

but I’m thinking that my “dream solution” would be to be able to add a button to the toolbar which “adds the user’s spreadsheet”

Yeah this is definitely possible, just not something I’d envision somebody making for free in a support thread. I’m sure if you have some money to spare somebody can help you in Marketplace or another channel!

[stephtara (Stephanie Booth)]

Hence the dream!

Thanks a lot for your help, I’m really happy to have something that is at least viable for these spreadsheets!

[stephtara (Stephanie Booth)]

dang, wanted to mark both your and Canapin’s posts as solution, but I can only mark one :-/

[NateDhaliwal]

What about a button in the composer that adds the iframe when clicked? It’s certainly doable in a Theme Component.

javascripts/discourse/api-initializers/init.js

You can then change applySurround to addText and add the iframe content directly.

[stephtara (Stephanie Booth)]

Would that be personalisable per user?