Google Sheet Component
Aroa Gil Bo
This Google Sheets Component allows you to connect any of your Google Spreadsheets with any design component in your canvas, without any code!
How does it work?
It’s super easy! You just need to follow three simple steps:
Create a design component in the canvas and enable the layers to be overriden. Make sure you name the design overrides the same as the columns you want to retrieve from your data base.
- Names are case sensitive.
- Spaces are not accepted. Column names that contain spaces cannot be retrieved, so in order to retrieve it you can change the space for a _ or use Camel casing.
Enter your Google Sheets “Published to Web” Link (csv or tsv) on the component’s properties section.
Your url should look like something similar to this: e.g. https://docs.google.com/spreadsheets/d/e/2PACX-1vQNKAoyUfYv7DBfnn51jpCfl2K-bkNU0rM6Sshx5/pub?gid=0&single=true&output=tsv
Note: If you don’t know how to get this link, follow this steps:
- Go to the file you want to publish, At the top, click File and then Publish to the web.
- If you have multiple sheets, instead of entire select the sheet you are interested in.
- Choose csv or tsv as a publishing format instead of the default “Web Page”
- Click Publish and you got the link!
See here for more information.
If you entered a valid link, a ✅ sign will appear on step 2.
Connect the Google Sheets component to your design component.
MAGIC HAPPENS! ✨
What does it do?
It will populate the design component you created with the data coming from your Google Spreadsheet and duplicate it as many times as the number of rows in your data.
All the cards are going to be inside a scrollable area, which can be horizontal or vertical, so it can be fully adapted to your designs. It also offers all the Stack’s options so you can customize it even further.
Note: After you have made changes to the document, google’s API takes a bit (about 5 min) to push the update - Be patient!
If you come up with more functionality or you find any bugs, please contact me!
Twitter: @aroagilbo Email: firstname.lastname@example.org
Changelog & Roadmap
- OnTap support for single rows
Opening Package in Framer X...
Don’t have Framer X yet?Start your Free Trial