For a registered component- is there a way to define a 'list' input type as an array of strings (or another primitive data type)?

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
Don’t have access to this

What are you trying to accomplish
Given a reusable “Frame” component, I’d like to pass an array of strings to it. For context, these string values are image URLs, used for multiple media elements.

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
NextJS

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Hi there,

Thanks for reaching out!

Would you be able to provide further context/use case of what you are looking to accomplish?

You could try using the enum input, you would be able to pass an array of strings into your input, like this: Loom | Free Screen & Video Recording Software | Loom

3

So, the string values are not known ahead of time since they are image URLs. Here’s an example of how it’s used.

  <Frame
    title="Title"
    textContent={[
      'Some text',
      'Some more text',
    ]}
    imageProps={{
      altText: 'Some alt text,
      sourceSets: [
        'https://static.imagedomain.com/some-image-1.jpg',
        'https://static.imagedomain.com/some-image-2.jpg',                
        'https://static.imagedomain.com/some-image-3.jpg,
        'https://static.imagedomain.com/some-image-1.jpg',
      ]
    }}
  />

The part that needs to be dynamic is the imageProps.sourceSets array. It takes an array of strings which define the different images to be used for the source set. Similarly, the text content is an array of strings as well.

4

Hi there,

You should be able to fetch which ever array at the top of your file, save it in a variable, and then call that variable in the enum. I have a screenshot of what this looks like, I just created my array, but you can fetch your array from any data source using JS.
Screen Shot 2023-06-08 at 10.18.38 AM