1 (edited by davidg1982 2015-07-09 21:46:09)

Topic: Adding sheetrock to page (querying google sheets data onto the page)

I am an amateur when it comes to code and especially websites.

On one of my pages, I am trying to use a javascript (Sheetrock) to take data from a Google Sheets spreadsheet and dump it out into a table/list. (This is the sheet, https://docs.google.com/spreadsheets/u/ … ingle=true)

The issue is, I am not sure how to get these scripts into my page. I was planning on using this script (http://chriszarate.github.io/sheetrock/) to help me with this.

Any assistance would be greatly appreciated.

Re: Adding sheetrock to page (querying google sheets data onto the page)

u have problem with ur sheet url read more about googe spreadsheets pls
https://support.google.com/drive/answer/2494822?hl=en

u have to endup with something like this:
https://docs.google.com/spreadsheets/d/ … edit#gid=0
than if u did it right u can come here https://jsfiddle.net/chriszarate/p1kxjwgq/light/ and change in JS this:

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0';

into urs:

// Define spreadsheet URL.
var mySpreadsheet = 'YOUR CORRECT URL TO UR SPREADSHEET';

click run and see if it works, if not continue read how to correctly share the sheets on google

nothing to do with MonstraCMS or jquery just yet =P

(с) Roman Art
So far So good wink

3 (edited by davidg1982 2015-07-09 19:14:41)

Re: Adding sheetrock to page (querying google sheets data onto the page)

At this point, I am just trying to get the code to render period. So, I am using the spreadsheet that has been provided.

I am trying to figure out where do I put the code (this code

// Sheetrock.js 1.0 Example 1
// https://chriszarate.github.io/sheetrock/

// The most basic use case of Sheetrock simply fetches the an 
// entire worksheet and loads it into a <table>.

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0';

// Load an entire worksheet.
$('#statistics').sheetrock({
  url: mySpreadsheet
});

I am thinking about putting this code into it's own file and calling the script (named as "sheetlink.js") in the template like this :

<div class="row"><script type="text/javascript" src="sheetlink.js"></script></div>

Where does it go? That's the issue I am having. I don't know how to get the code itself to actually produce the table. Where does this code go?

<table id="statistics" class="table table-condensed table-striped"></table>

Re: Adding sheetrock to page (querying google sheets data onto the page)

Still no luck in getting this done. I have no idea what I am doing wrong.

Re: Adding sheetrock to page (querying google sheets data onto the page)

davidg1982 wrote:

Still no luck in getting this done. I have no idea what I am doing wrong.

Ill try to add this script to new monstra on localhost and see how it works tomorrow

(с) Roman Art
So far So good wink

Re: Adding sheetrock to page (querying google sheets data onto the page)

Thanks. I appreciate it. I think I just don't know exactly where the code is supposed to go.  I am going to try and use a plain HTML file and see if it works.

Re: Adding sheetrock to page (querying google sheets data onto the page)

I don't know what I am missing because it isn't rendering.

http://4x2h4.org/testscript.html

If I run it in JFiddle, it works.
https://jsfiddle.net/davidg1982/yfwjc21o/6/

Re: Adding sheetrock to page (querying google sheets data onto the page)

I had a friend help me out.

It appears that I need to have the javascripts src's load last instead of first. I guess that was a rookie mistake.

I'll see if I can get it working in Monstra and report back.

Re: Adding sheetrock to page (querying google sheets data onto the page)

Putting it in the content page did nothing. With my editor it kept stripping out the table. I dumped it into the template and it worked fine. Now to just work on the formatting, but this issue is resolved.

This is what I pasted into the template right above the div where the content gets loaded.

    <table id="statistics" class="table table-condensed table-striped"></table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.0/dist/sheetrock.min.js"></script>
    <script>
    // Sheetrock.js 1.0 Example 1
    // https://chriszarate.github.io/sheetrock/

    // The most basic use case of Sheetrock simply fetches the an 
    // entire worksheet and loads it into a <table>.

    // Define spreadsheet URL.
    var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/19oEPRQYlN8t8d8XKJ-3SSf3OKhhUtGerJfl8Ws-HQnI/edit#gid=1314822938';

    // Load an entire worksheet.
    $('#statistics').sheetrock({
        url: mySpreadsheet
    });
    </script>

Re: Adding sheetrock to page (querying google sheets data onto the page)

well its morning and i tested it =P
yours does not work with me at all smile but the original source works perfect with default theme of monstra.

1st) add this into footer.chunk.php between "<?php echo Snippet::get('google-analytics'); ?>" and </body></html>

<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<script>

    // Define spreadsheet URL.
    var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0';
        
    // Load an entire worksheet.
    $('#statistics').sheetrock({
        url: mySpreadsheet
    });
</script>

Than create new snippet "sheet-home-page" add past this in there:

<table id="statistics" class="table table-condensed table-striped"></table>

save and copy embed code (shortcode one)

{snippet get="sheet-home-page"}

than go to Home page and edit it than past ur shortcode

{snippet get="sheet-home-page"}

in there and click save.
u can also create new snippet and past your sheet link in there and use php code to call snippet inside footer wink

example: snippets - add new
call it: sheet-1-url
and insert your sheet ulr in there in this case its :

https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0

save and exit, get the PHP code one for this snippet which is:

<?php echo Snippet::get("sheet-1-url"); ?>

and past it inside footer.chunk.php instead of your link see on example the END footer-chunk.php of your theme with fully ready code:

    <footer class="container">        
            <div class="pull-left"><?php echo Chunk::get('footer-links'); ?></div>
            <div class="pull-right"><?php Action::run('theme_footer'); ?><?php echo Site::powered(); ?></div>
    </footer>
    <?php echo Snippet::get('google-analytics'); ?>    
<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<script>

    // Define spreadsheet URL.
    var mySpreadsheet = '<?php echo Snippet::get("sheet-1-url"); ?>';
        
    // Load an entire worksheet.
    $('#statistics').sheetrock({
        url: mySpreadsheet
    });
</script>

</body>
</html>
(с) Roman Art
So far So good wink

Re: Adding sheetrock to page (querying google sheets data onto the page)

screenshots:

http://s011.radikal.ru/i315/1507/cc/50a9e0744a26t.jpg

http://s017.radikal.ru/i436/1507/33/ad4a386897eft.jpg

(с) Roman Art
So far So good wink

Re: Adding sheetrock to page (querying google sheets data onto the page)

Just to throw out another idea... on occasion I've used http://gridspree.io for putting Google Sheets data into Monstra pages.  The nice thing is that you can also create forms to ADD data back into your sheet.

13 (edited by addisonadolf00 2016-04-08 12:34:38)

Re: Adding sheetrock to page (querying google sheets data onto the page)

Thanks for Sharing This Codding and Screen Shot..... smile smile smile

web api designl | qr codes development | rq code