🖇️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!