Tutorials stack icon

Gsheet

Manipulate and Style Google Spreadsheet Data for RapidWeaver Like Magic!

Table of Contents

  • Getting Started
  • Setting up your Google Spreadsheet
  • Fetching Your Data
  • Gsheet Building Blocks
  • Gsheet Box
  • Gsheet Text
  • Gsheet Icon
  • Gsheet Image
  • Gsheet Button
  • Gsheet IF Stack (Powerful)
  • Gsheet Progress Stack


Getting Started

Get up in running with Gsheet in minutes!

1. Add the main G Sheet stack to your page.

2. Give your G Sheet a UNIQUE_ID

If you are going to have multiple Gsheet stacks on one page, they must have unique IDs.

3. Create a Google Spreadsheet with titled columns and data like so:

4. Grab the public .csv URL to your Google Spreadsheet and paste it into the Sheet URL field in the settings panel.

Grab your Spreadsheet URL by following the short tutorial below:

Step #1
Step #2
Step #3
Step #4
Step #5
Step #6
Step #7
Step #8

5. Finally access your data.

Thats it!

Read more below to learn about how to fetch data and display it on your page.



Setting up your Google Spreadsheet

There are only 2 rules when it comes to setting up your google spreadsheet.

1. The first row must be for column titles.

The first row must be for the titles for each column. E.g (Name, Age, Occupation, etc...)

You will use these titles to access data from your spreadsheet

2. Titles must begin with a letter

Unfortunately due the way that Javascript works, column titles must begin with a letter. If you really must use a number for your column title, you will have to use a special format to access information, which will be described below.

We recommend starting all column titles with letters, as this keeps things simple.



Fetching Data

Gsheet is a magical stack that will automatically repeat whatever content you place inside, for each row in your spreadsheet.

Think of it as a template for each row.

Then, inside of the template, you can access a particular rows data with double curly braces: {{ }}

Inside of the curly braces, you can grab the particular by it's name like so:

{{row.value}}

Values with spaces in them can be accessed like so:

{{row.valuewithspace}}

Note: Even if your column titles have capital letters in them, you will ALWAYS use lowercase letters when accessing data values.

It's just like a database!

WARNING

Column Titles must NOT start with a number. If you absolutely MUST use a column title starting with a number, like 2018, then you can access it like so:

{{row["2018"]}}

Here is a short visual tutorial to describe fetching attribute values better:

Gsheet Repeating Data Tutorial

Suppose we have the following spreadsheet:

We can access the data for each row like so:

Gsheet Repeating Data Tutorial

Step #1
Step #2
Step #3
Step #4
Step #5
Step #5


Gsheet Building Blocks

  • Gsheet Box
  • Gsheet Text
  • Gsheet Icon
  • Gsheet Image
  • Gsheet Button
  • Gsheet Progress (Bars/Circles)

Gsheet comes with so much more than the ability to access data.

We have included a ton of useful stacks (building blocks) to help you display your data in many different ways. We will describe each of these building blocks simply here:



Gsheet Box

Gsheet Box is your best friend when it comes to creating layouts for your data. It comes equipped with some very powerful alignment options, make it quick and easy to create almost any layout.

Don't be afraid to nest boxes inside of each other, we recommend using a box whenever possible!

Here is a quick look at the layout options:

Fill Mode

The first option you will see for the Gsheet Box, is the fill mode.

There are only 2 Fill modes:

– Shrink

The size (width) of the box will fit to match the content

– Grow

The size (width) of the box will Stretch to fill the remaining space of its parent box.

We recommended adding a parent box to surround all other boxes for the best alignment

Content Alignment

The content flow and alignment options are the most important, and most useful options in the Gsheet Box Stack.

There are 2 choices for content flow:

  • Rows (Stacked)

  • Columns (Side by Side)

You can choose to have your content stack one-on-top of the other, or to have the inner content placed side-by-side like columns.

Content Alignmnent

You will then find options for setting the specific horizontal alignment for the inner content of the box.

The alignment options are as follows:

Rows (stacks)
  • Left (Items are pushed to the left of the box)
  • Right (Items are pushed to the right of the box)
  • Center (Items are pushed to the center of the box)
Horizontal
  • Left (Items are pushed to the left of the box)
  • Right (Items are pushed to the right of the box)
  • Center (Items are pushed to the center of the box)
  • Justify/SPLIT (Columns only – Items are separated evenly to the outside of the box)

These alignment options allow you to create almost any layout you can think of. There is a bit of a learning curve, so get to practicing and nesting boxes around. Also take a look at all of the examples we've included for reference. : ) It's actually quite simple.

Sizes & Styles

You will also find sizing and styling options for the Gsheet Box such as:

  • Min Width
  • Min Height
  • Max Width
  • Radius
  • Margin
  • Padding
  • Text Colors
  • Background
  • Border
  • Shadow
  • Font

The Gsheet box will be your main starting point for many layouts in your Gsheet setup.


Gsheet Text

The Gsheet Text stack is a handy stack for adding text/html inside of Gsheet. This is the best place to type any attribute values like: {{row.attribute}} for your setup.

There is one important option when it comes to using Gsheet Text, and that is the Fill option.

There are 2 fill options:

  • Shrink

This means that the text will not stretch to fill the entire container, and will fit to the size of inner text. This is useful for smaller bits of text.

  • Grow

This means that the text will stretch to fill the empty space of the parent container. This is best used with paragraph text.
When text is set to Grow, you will also have specific text alignment options.

Gsheet Icon

The Gsheet Icon stack is a simple convenience for adding icons inside of your sheet. We've separated it so that you can add icons wherever you like. It also works great for displaying conditional icons using the Gsheet IF stack. Which you can read about below.

Gsheet Image

If you need to grab an image link from your spreadsheet. The Gsheet Image stack is perfect for you.

Suppose we have the following spreadsheet, with image thumbnails as one of the attributes like so:

Taking the link value from the thumbnail attribute and using it as an image is super easy with Gsheet Image. Simply add the Gsheet Image stack inside of your Gsheet main stack, and then type in the attribute value like so:

The image link from the row.thumbnail attribute will now be used as the source link for the image on your page!

Resulting in the following:

Gsheet Button

The Gsheet Button works in the same way as the Gsheet Image stack, allowing you to set the button link to an attribute value from your spreadsheet. : )



Gsheet IF (The power begins here!)

The Gsheet IF stack is what makes Gsheet so amazingly powerful!

It allows you to check the value of a row in your spreadsheet and do something special based on if that value returns TRUE/FALSE!

You can do things like:

  • Show/Hide content based on the value
  • Change colors (Text, Background, Icon, etc.)
  • Show Conditional Content (Display different contents based on TRUE/FALSE!)
  • Conditional CSS Classes (Add different CSS Classes based on TRUE/FALSE!)

Checking Values wit Gsheet IF

It's not only about checking TRUE/FALSE values in your sheet. You have many different ways to check a cell value:

  • Basic TRUE/FALSE
  • IS EMPTY (Cell has content or not)
  • IS A NUMBER (Cell contains a number or not)
  • IS EQUAL TO A NUMBER (Cell equals a specific number)
  • IS GREATER THAN (Cell is greater than a number)
  • IS LESS THAN (Cell is less than a number)
  • CONTAINS TEXT (Cell contains text that you specify)

How it works:

Let's say we have the following spreadsheet, and we want to display different content depending on the person age attribute:

Maybe we want to display a different Icon & Text if the person's age attribute is over 25.

How would we do that? Using Gsheet IF

So first we drag the Gsheet IF into our main Gsheet stack, and we set up the condition like so:

Next, we setup the conditional content our page like so:

This will result in the following:

That is the basics of the Gsheet IF stack!

There tons of different formulas that you can create. Play around with it to learn more : )



Gsheet Progress

As a convenience, We have added a stack that allows you to create Progress Bars/Circles based on spreadsheet values!

This is useful for creating basic charts and visual data.

It works like many of the other Gsheet building blocks.

Let's take a look.

Say we have the following spreadsheet, and we want to display each persons progress towards 10,000 followers using a progress circle.

First we want to place the Gsheet Progress stack on our page inside of Gsheet like so:

This will result in the following:

and that's about it!



Special Codes

Grabbing the row index

Type {{index}} inside of Gsheet, and it will grab the index for the current row

Congratulations!

You've made it through the Gsheet tutorial. I know it seems like a lot to master, but it is well worth the investment of time to learn.

Gsheet basically allows you to create your own CMS, or even a CMS for your clients, and then you can choose to display the content however you like on the page.

Using Gsheets repeating row functionality, and Gsheet IF, you can easily show/hide content based on updated sheet values.

This is a powerful feature and great for things like:

  • Data Lists
  • Data Tables
  • Event Lists
  • Pricing Tables
  • Charts
  • CMS
  • Quantity Trackers
  • News Boards
  • Product Lists
  • Status Updates

the list goes on . . .

We hope you enjoy Gsheet and the power that it brings to RapidWeaver.

Thank you all for your support. : )

Gsheet Changelog

Version 1.1.0

  • Fixed bug with new conditional option by adding a check-box to turn the feature on / off

Version 1.0.8

  • Added a brand new option for conditional row show/hide in the main Gsheet stack

Version 1.0.7

  • Fixed bug causing a small part of the script not to work in older browsers

Version 1.0.6

  • Fixed bug where "IF EMPTY" was returning false when empty and true when not empty

Version 1.0.5

  • Added ability to set Alt text in Gsheet Image stack

Version 1.0.4

  • Fixed bug causing Gsheet Search stack to not appear

Version 1.0.3

  • Better alignment labels for Gsheet Box Stack
  • Minor labeling changes to Gsheet Text stack

Version 1.0.2

  • Fixed bug causing Gsheet Button attribute value link not to work

Version 1.0.1

  • Added an option to access individual cells / repeating templates (your choice)
  • Added a BRAND NEW Gsheet SEARCH stack! 😲

Version 1.0.0

  • Initial Release!