Prerequisites

Element AttributesPagesBlocksSheetsCSS

Intro

Sheetfeed Elements are a special type of Element that can pull data from the rows of a Sheet. You can set up the starting row, how many rows the Sheetfeed will iterate over, and which way (up or down) the rows will be displayed.

Sheetfeeds can be added to the Body and Head of a Page or used inside a Block. Elements and Blocks can be nested in Sheetfeeds. For each non-empty row of a Sheet, the Sheetfeed will generate one instance of all its children.

For example, if there is a Sheet with three rows and a Sheetfeed has one nested image and one nested paragraph, the result will be three sets of image-paragraph pairs.

Using Sheetfeeds

Attributes

The Sheetfeed is not like other Elements. It has some attributes that help control how it is used.

Sheet Name

Specify the Sheet you want to reference. You can also edit this without opening the Element's attributes.

Starting Row

Specify a number correlating to the row number you want the Sheetfeed to begin pulling data from.

If you want to start at the last row, type =last.

Number of Rows

Specify a number for how many rows will be iterated over. Leaving this blank means it will include all rows subsequent to the starting row (ie. to the bottom of the Sheet).

Sort By

Click to toggle between "Ascending" and "Descending."

Ascending - The feed will render rows from bottom to top.
Descending - The feed will render rows from top to bottom.

Sheetfeed Children

Elements and Blocks can be nested in Sheetfeeds. For each non-empty row of a Sheet, the Sheetfeed will generate one instance of all its children.

To access the data from a cell in your Sheet, type in "=" + the column letter. You can do this for an Element's text, attribute, and style cells as well as for a Block's attributes cells (variables).

Here is an example of using the equals notation to connect a Block's attributes to a Sheet's values using a Sheetfeed.

Sheetfeed and Layout

Let's say that you want to use a Sheetfeed to pull in blog post data from a Sheet. Each row will be a link card. You want the links to be in a 3 across grid. This would be your Element structure:

In order to layout a Sheetfeed's children, you need to wrap the Sheetfeed in a parent container and then set up layout rules such as grid or flexbox on that containing element.

Check out our articles on flex and grid to get a refresher on how they work.

Sheetfeed Demo

We have a sheet containing information related to blog posts include titles, links, images, etc. We want to display each one with a Block that we've created called "Blog Card" but we only want to show the four most recent posts.

We won't be looking deep into the Blocks or Sheets used in this demo, so if you want to learn more about those, you can read articles about Blocks and Sheets separately.

Sheet and Block Setup

Sheet

The sheet containing our blog info has columns for an image, title, internal URL (used as the href for links), blurb, and more, but these three are what will be displayed on each Blog Card Block.

Block

The Block is a little complex, but at its core, it is a link with an image and some text wrapped inside. Also note that there are variables set up for the link URL, title text, blurb text, and image. You must set up and attach variables to elements in order for the data from the Sheet to be passed through to your Blocks!

Adding a Sheetfeed

Create the structure

Go to the page where you want to add this content
Create a new div
Nest a Sheetfeed in that div
Nest a Blog Card Block in the Sheetfeed

You'll see that for each item in our Sheet, we see a Blog Card, but they all look the same. They are not pulling the data from the sheet yet because we haven't linked up the columns to the Block's variables.

Connect the Data

Edit the Block's attributes and type in "=" + the column letter for the appropriate variables. After doing so, you'll see the images and text from the Sheet be rendered.

Configuring the Sheetfeed

You might notice that the first thing that is being rendered doesn't look right. In our case, it looks like this:

This is because the Sheetfeed is pulling in the first row, which we have reserved for the column header titles in the Sheet.

Additionally, we only want to show the four most recent posts. We can do both these things by editing the Sheetfeed's attributes.

Click to open the Sheetfeed's attributes
For Staring Row, type in =last. this will make sure the last row is always the first row being pulled in.
For Number of Rows, type in "4" so that it will only pull in 4 rows.

You'll now see only four instances of the Blog Card Block, which correspond to the last four rows in the Sheet.

Layout

Now we can layout the Blocks by styling the Sheetfeed's container element. In this demo, we add the following properties to this div.

Set Display to grid
Set Grid Template Columns to 1fr 1fr
Set Grid Gap to 1rem

That's it!

What's Next

Want to learn more about layouts? Read about Flexboxes and CSS Grids.