Work in Progress: 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:

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:

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!