Use Googledocs as database for prototyping using Sheetsu API

Community resources Show & Tell
1

I just wanted to share really quick a pretty cool way to use google docs as a database.

Using sheetsu.com you can create an API from a google sheet that allows you to post to and manipulate data in a google doc thru an API: http://sheetsu.com

In their Beta API https://sheetsu.com/docs/beta there is support for different methods other than just creating new rows.

I tested it in a prototype:
http://shairpin.webflow.io/sign-up

The form data here gets sent to a google sheet and then on another page the data is displayed by pulling the data from the google sheet:
http://shairpin.webflow.io/pins/hair

I tested the PATCH feature of the sheetsu api for implementing a like button as an example.

Just thought I’d share as I think this is really useful for prototyping and could help others.

4 Likes
2

wow this is super cool :slight_smile: I will have a digg into it.
Was it easy to integrate?
Thanks for sharing

1 Like
3

Here is some sample code to get you started submitting to google docs via a webflow form:

  var Webflow = Webflow || [];
  Webflow.push(function () {
    // DOMready has fired
    // May now use jQuery and Webflow api
    
    // jQuery snippet for changing HTML form into JSON
    (function ($) {
        $.fn.serializeFormJSON = function () {

            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    })(jQuery);

    //Put the ID of your form here, this will override your form settings in webflow
    $('#wf-form-Sign-Up').submit(function(e) {
    
    	var isValidForm=$("#wf-form-Sign-Up").valid();
              if(!isValidForm)
              {
                  e.preventDefault();
                  alert("Please fill out the required fields");
              }else{
       e.preventDefault();

      // Serialize data to JSON
     // Put the ID of your form here
      var data = $('#wf-form-Sign-Up').serializeFormJSON();

        $.ajax({
            //Put the url to your sheetsu api here
            url: 'https://sheetsu.com/yourapinumber',
            data: data,
            dataType: 'JSON',
            type: 'POST',

            // Redirect on Success Response
            success: function(data) {
              // Put where you want the form to redirect to after you submit here
              $(location).attr('href', 'http://domain-name.webflow.io/thank-you')
            },

            // Handle Errors
            error: function(data) {
              console.log(data);
              alert("error");
            }
        });

        return false;
        
        }
    });
});

Make sure that your google sheet has the same column headers as the form field names…

In the beta version of the API you can also enable authentication.

2 Likes