How to use builder.getAll() with web component

Technical Questions
1

When viewing a model, there are many examples to use the model in code (React, JS, Angular, Web Component, etc.), but I have a model for which I am fetching the content using builder.getAll(model) and it’s not clear how to use the array results in a web component, which appears to be able to handle only displaying one instance of a model.

Any help?

2

Hi @Canuckaholic, thanks for reaching out!

builder.getAll will return all results for your model, with a default limit of 20, but max limit of up to 100. It is great for pulling data models into your app, or if you have multiple section models that you want to display on a page.

<BuilderComponent /> on the other hand, like you mentioned, only takes one piece of Builder content. If each result needs to be passed into a <BuilderComponent/> , you will need to iterate over the results and pass each in individually to the component to be rendered on the page. At this time, there isn’t a way to pass multiple content blocks into a single Builder component.

You can see more information in our Builder core read me and here is an example snippet:

const data = builder.getAll(model, options);

data.forEach(item => {
   <builder-component content={item.data} />  //or whatever the results are
})
3

Thanks @maddy, but I can’t get this to work when my model is of type “Section”. The getAll() is working, and I can console.log my array of model instances to see them, but I notice that my “content” is in an object property called “blocks”, and passing this to the <builder-component> web component doesn’t seem to work. Passing the entire “data” object doesn’t seem to work either.

<builder-component content=${item.data.blocks}></builder-component>

To summarize, how can I use the Section model type, the getAll() method, and the <builder-component> to render the HTML… all together?

4

I wanted to add that I’m passing in { prerender: true } as an option in my builder.getAll() and the first object in my array has an html property, but the second has a blocks property. Neither the html nor the blocks content gets rendered when passed in to a <builder-component> content property.

5

Hi @Canuckaholic,

Apologies for any confusion, my original response was for adding content in the React SDK. If you are only using web components, you would instead use entry={entry.id}. Here is an example of what works on my end for both page and section models:

<builder-component api-key="your-api-key" model="model-name" entry={item.id}></builder-component>

Let me know if this works for you!

6

Thanks @maddy. On first tests I believe this is working. Did I miss this “entry” property in the documentation? Is there some documentation around the web component that maybe I haven’t seen?

7

@Canuckaholic I’m glad this worked! We do have this web components doc that covers “entry”, as well as model and other attributes.

8

ok thanks. The only thing I might suggest then is to add an example of iterating over a model that is a collection, e.g.

const builderContent = await builder.getAll(modelName, options)
builderContent?.map((item, index) => {
            return html`
                <builder-component
                    model=${modelName}
                    api-key="${apiKey}"
                    entry=${item.id}
                ></builder-component>
            `
        })
9

Thanks for the feedback, I will share this with our team!