How to Create Repeatable Button Components, Fetching from a Database

Note: This page only applies to the Old Rendering Engine - for the New Rendering engine ask a Savvy Expert for help
Repeatable components take data from an array of objects and turn it into the same amount of components.
Step 1: Create and Prepare your Button
Create a button where you want the list of buttons to appear.
Select the component and scroll to the bottom of the Options tab, open the Advanced dropdown.
Select the REPEATER KEY. This will be the key of the Computed field that is fetching the data and returning the array of objects. Here are some docs for reference:
🛩
How to Bring Data from Airtable
🗃
How to Bring Data from Google Sheet
🏓
How to Ping an API
You can also do this on an Option Selector, but you should select from the BUTTON REPEATER KEY dropdown instead of the REPEATER KEY dropdown.
Step 2: Transform the Data
You can do this in the same Computed Field as the fetch, but it's a good practice to do it on a different one. 
Map it into an object with a 'key' key, and a 'text' key. Something like this:
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: data.text
        })
}
Try giving it an HTML structure. For example:
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: `<div>
            <h1>Name: ${data.name}</h1>
            <h3>Email: ${data.email}</h3>
            <img src=${data.img}>
            </div>`data.text
        })
}
Step 3: Style it
Add some classes so you can style it with custom selectors
function result( {
  full_list_key
} ) {
    return full_list_key.map(data =>{
        key: data.id,
        text: `<div class="repeated_container">
            <h1 class="repeated_name">Name: ${data.name}</h1>
            <h3 class="repeated_email">Email: ${data.email}</h3>
            <img class="repeated_img" src="${data.img}">
            </div>`
        })
}
Here's how to style components with custom selectors:
🩺
How to Use Custom Selectors
What if there's more data that I want to show when a user selects one of the options?
Another computed field can easily solve that. The code would look something like this:
function result( {
  full_list_key,
  options_key
} ) {
  return (full_list_key || []).find(option => option.id === options_key)
}
This would return the full selected object!

How to Create a Global Column

Next - How Tos

Design How-tos

Last modified 3mo ago

Copy link

Outline

Step 1: Create and Prepare your Button

Step 2: Transform the Data

Step 3: Style it

What if there's more data that I want to show when a user selects one of the options?