Savvy Docs
  • Welcome
  • Guides
    • Intro to the builder
    • Designer Card
    • Options Card
    • Working with Logic
  • How-To's
    • General How-To's
      • βœ”οΈHow to select a container when I can’t click over it on the screen
      • πŸ‘οΈHow to hide a global component on a specific page
      • πŸ“ŠHow to calculate statistical significance from split test
      • πŸ…°οΈHow to install a Google font.
      • πŸ—’οΈHow to use "Logs" for debugging
      • ↩️How to change pages order
      • πŸŒ’How to select components that are behind the Embeddables card
      • πŸ“„How to clone a page
      • βž•How to add new components to a page
      • πŸ“„How to select the whole page
      • πŸ’»How to view your flow on different screen sizes
      • β›΅How to move between pages while editing your flow
    • Design How-To's
      • πŸ–‹οΈHow to style a specific component element (E.g. buttons image)
      • β­•How to style individual buttons (by button key) in Options Selectors
      • 🧿How to style a rounded bullet-like checkbox for options buttons
      • πŸ”²How to get rid of the default input outline
      • πŸ–ΌοΈHow to style a background image
      • 🦚How to style components (basics)
      • β†ͺ️How to change a component's location
      • ⬆️How to upload and apply images to your design
      • πŸ”˜How to style hover, selected, disabled button states
      • πŸͺΆHow to style CSS properties that are not there in the designer card (custom properties)
      • πŸ“±How to make my flow responsive
    • Logic How-To's
      • πŸ‘οΈHow to set show/hide conditions
      • πŸ“ΊHow to display a value previously entered by the user
      • βœ–οΈHow to add a β€œDeselect All” button in a Multi-Select
      • πŸ”¨How to use a computed field in a condition
      • πŸ‘οΈHow to hide a global component on a specific page
  • Other useful docs
    • Useful Docs
      • 🚦Conditions
      • πŸ‘©β€πŸ’»Computed Fields
      • πŸ”–Tags
    • WORK IN PROGRESS
      • ◻️Pending
        • Work in Progress: How the New Rendering Engine Works
        • Work in Progress: How to create a new Split test
        • Work in Progress: Preloading images
        • Work in Progress: How to show β€œloading…” while fetching or processing data
        • Work in Progress: How to send data to Tiktok
        • Work in Progress: How to send data to Postcript
        • Work in Progress: How to send data to Klaviyo
        • Work in Progress: How to send data to Google Tag
        • Work in Progress: How to send data to Google Analytics
        • Work in Progress: How to Fetch User Location Data to use in your Flow
        • Work in Progress: How to fetch job offers from Lever’s API
        • Work in Progress: How to fetch data and display the results as options in a dropdown
        • Work in Progress: How to create a new split test with 3 variants
        • Work in Progress: How to Duplicate a Container with All its Content
        • Work in Progress: How to add Chart.js to your flow
        • Work in Progress: How to Create Repeatable Button Components, Fetching from a Database
        • Work in Progress: How to Create a Global Column
        • Work in Progress: How to Clone a Flow
        • Work in Progress: How to Create and Style a Carousel
        • Work in Progress: How to Add Default User Data
        • Work in Progress: How to Show Validation Messages on Required Fields
        • Work in Progress: How to create an Option Selector Results Page
        • Work in Progress: How to create a combined Option Selector + Input component
        • Work in Progress: How to Add an Info Box Popup
        • Work in Progress: How to set up a Micro-Product as a Popup on your Site
        • Work in Progress: How to make a Full-Page Flow
        • Work in Progress: How to Use Custom Selectors
        • Work in Progress: How to Add a Video/GIF Placeholder to a Video Component
        • Work in Progress: How to Style Buttons
        • Work in Progress: How to Center Components
        • Work in Progress: How to Bring Data from Airtable
        • Work in Progress: How to add a custom font from a website:
        • Work in Progress: How to Create Computed Fields
        • Work in Progress: How to Ping an API
        • Work in Progress: How to Store a Password
        • Work in Progress: How to Bring Data from Google Sheet
        • Work in Progress: How to Fetch Safely from Savvy
        • Work in Progress: How To Fetch Data from a specific row in Airtable in a Computed Field
Powered by GitBook
On this page
  • Step 1: Get your Airtable URL
  • Step 2: Create a Computed Field
  • Step 3: Fetch!
  • Security warning
  1. Other useful docs
  2. WORK IN PROGRESS
  3. Pending

Work in Progress: How to Bring Data from Airtable

The best way for us to make use of big chunks of information on the flow is in the form of a JSON Object. Airtable has its own API for that!

Step 1: Get your Airtable URL

  • Go to "API documentation" on the Help menu of your base

  • Select your table on the left side Menu

  • Click on "List Records"

  • On the "curl" window to the right, you'll see an example request

  • Copy the URL and the authorization with your API key, you'll need that for later!

To get your API key below the URL, you'll have to check the "Show API key" box on the top right corner of the curl window!

Step 2: Create a Computed Field

  • Go to the "All" Tab of the Left Sidebar

  • Scroll down to the Computed Fields section and create a new one

  • Give it a cool, original name. Something like "airtable_data"

  • Scroll to the bottom of the Options Tab on the Right Sidebar

  • Click on "Generate Sample Code", it will generate an empty function:

Step 3: Fetch!

  • Copy this code inside the function:

function result() {
  let url = "YOUR_URL";
  
  return fetch(url, {
    headers: {'Authorization': 'Bearer YOUR_API_KEY',
    }
  })
    .then((response) => response.json())
    .then(json => {
      // Do something with the data
      return json.records
    }); 
    
}
  • Paste the URL you copied from Airtable where it says YOUR_URL , and your API key where it says YOUR_API_KEY

  • Click on "Update" to save the code changes and you should be ready to go!

Your Airtable URL from the example request has its maxRecords set to 3 by default. You can change that to a max of 100. This is what it looks like, you can change the number 3 on the URL: "https://api.airtable.com/v0/apps1073vcOXbLbso/example_base?maxRecords=3&view=Grid%20view"

Security warning

Your Airtable API key is the same for every base on your account, so:

  • We recommend creating an account that only has access to that base.

  • Anyone with the account API key could have read/write access to that account bases.

  • Even if write permission isn't an issue, they still get access to all the data.

In most cases this isn't an issue, but if it is an issue for you, don't worry! We're working on it to make it safer.

PreviousWork in Progress: How to Center ComponentsNextWork in Progress: How to add a custom font from a website:

Last updated 1 year ago

◻️