https://github.com/jadeallencook/gdoc-js

google spreadsheet cms
https://github.com/jadeallencook/gdoc-js

google-sheets javascript library

Last synced: about 1 month ago
JSON representation

google spreadsheet cms

• Host: GitHub
• URL: https://github.com/jadeallencook/gdoc-js
• Owner: jadeallencook
• License: mit
• Created: 2016-05-28T19:56:28.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-10-19T18:02:27.000Z (about 3 years ago)
• Last Synced: 2024-08-20T13:02:31.090Z (4 months ago)
• Topics: google-sheets, javascript, library
• Language: JavaScript
• Homepage: http://jadeallencook.github.io/gDoc.js/
• Size: 92.8 KB
• Stars: 425
• Watchers: 22
• Forks: 20
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gDoc.js v2.0.1

Use Google Spreadsheets as your CMS & to save your inputs!

[Demo Page](http://jadeallencook.github.io/gDoc.js/)

# Getting Started

Create a Google Spreadsheet containing all the information you will need for your site. After, choose 'Publish to the web...' in the 'File' menu. Then grab the id in the link.

```

https://docs.google.com/spreadsheets/d/__yourPublicId__/pubhtml

```

Inside of your HTML document include these two files.

```html

```

__Or just this file__

```html

```

Now at the footer of your html page initiate the connection! 

__By default the sheetName is 'Sheet1'__

```html

    gDoc(yourPublicId, sheetName);

```

__Example connection__

```html

    // initiating connection

    gDoc('1cfW7dwJkwJq7rqTsftNy3wjCJR3-yDylc5MRmsc0Yw8', 'layout');

```

All that's left now is to add gDoc attributes to your html!

__Example spreadsheet__

| title               | header              | subheader           |

| ------------------- |:-------------------:| -------------------:|

| My website          | Welcome,            | This is my website! |

__How to insert from example spreadsheet above.__

```html 

    

        

        

        

    

    

        


        


    

    

        

            gDoc(yourPublicId, sheetName);

                       

    


```

And it's that easy!

# Setting Parameters

You might want to use gDoc to set link hrefs, img srcs, and set styles. 

__Here's a quick example of how you would make a red link__

| my-link             | my-link:href        | my-link:style       |

| ------------------- |:-------------------:| -------------------:|

| Example             | www.mylink.com      | color: red          |

```html 



```

# Advanced Blocks (Store & Blog)

To iterate over a block of html simply just pass gDoc an object {}.

__Let's say you want to export your 4 most recent blog posts__

```javascript 

gDoc({

    public: yourPublicId,

    sheet: 'blog',

    gDoc: 'blog-section',

    columns: ['title', 'body', 'link'],

    loop: 4,

    html: function() {

        var html = '';

        html += '
{{title}}
';

        html += '
{{body}}
';

        html += '';

        return html;

    }

});

```


The loop key can be set to __false__ to iterate over all items in the document. _Make sure you instantiate all your variables in the 'columns' array, otherwise they won't show up in the mustache syntax._ 

# Sending Data To Spreadsheet

__The "connect" functionality uses AJAX, make sure jQuery is installed!__

Create a Google Form by visiting _forms.google.com_ and then press share to get the id.

```

https://docs.google.com/forms/d/e/__yourFormId__/viewform

```

Create a blank form that will hold your inputs.

```html

```

In the footer, pass gDoc.js an object with these parameters.

```javascript 

gDoc({

    connect: true,

    id: yourFormId,

    appendTo: 'example-form'

});

```

That's it, all of your inputs are automatically inserted!

When submitted, the responses will be sent to the form, and your can export to spreadsheet from there.

Additionally you can add some optional parameters - 

```javascript 

gDoc({

    connect: true,

    id: yourFormId,

    appendTo: 'example-form',

    submitValue: 'Submit Form', // submit button text

    successMsg: 'It worked!', // success message after submit

    preloader: 'loading.gif' // img to show while form is loading

});

```

__As of right now, gDoc will only insert "text" inputs.__

# Custom Form CSS

Here is an example of how we would modify the above form's CSS.

```css

    form#my-form input {

        display: block;

        margin: 5px auto;

        padding: 5px;

        border-radius: 3px;

        border: #ddd solid thin;

    }

    form#my-form input[type="submit"] {

        background-color: dodgerblue;

        color: #fff;

        border: none;

        border-radius: 3px;

    }

```

Enjoy!