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.
The Sheetfeed is not like other Elements. It has some attributes that help control how it is used.
Specify the Sheet you want to reference. You can also edit this without opening the Element's attributes.
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
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).
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.
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.
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
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.
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.
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
- Set Grid Template Columns to
- Set Grid Gap to
Want to learn more about layouts? Read about Flexboxes and CSS Grids.
Please sign in to leave a comment.