List data binding

[radikris]

Hello, I have my custom component, which has Title, SubTitle and a GridList
And I have the same Custom Model with these properties: title, subTitle, gridList

and I would like to bind dynamic data to it, which is easy for title and subtitle, but why is it not available for GridList?
I don’t want to click on each item of my list and bind to the x. index of my List, is it supported that I can bind my Model’s list to my custom component’s list parameters?

Let me know!

[clay]

Hello. I don’t know why do this. But I have an idea. Do you think making custom code? Maybe this solves your problem.

[radikris]

I think this is something, which would Builder support out of the box.
I would expect if we can bind title and image etc why can we not bind list?

This is available, but this will not work with custom components which has a list input, I want to bind that list to my content models list.

[TimG]

@radikris You are correct, currently there is no way to bind a list object to a custom component, but rather having a list input that is made up of individually authored list items directly within Builder.

(Side Note: If you think this would be a good feature request, I recommend checking out our feature request and customer feedback platform, ideas.builder.io, where you can submit requests and vote on submissions of other users! Check it out! )

Now, for your specific use case, you mentioned that your lists are a data model within Builder. I think in this instance, the best way to achieve your goal would be to have 2 custom components, one the CustomGrid, and one the CustomGridElement

Your CustomGrid would have the various inputs (title, subtitle, etc) as well as a Dynamic Editing Region.

You would then be able to pull your[ list data model onto your page(Connecting dynamic data in Builder's Visual Editor), add the CustomGridElement in the dynamic editing region, and use the Repeat for Each UI you mentioned above to map over the list elements and display each element in your list.

I created a Fiddle showing the basic of how this would look (without using a CustomGridElement), which you can find here: Builder.io: Drag and drop page builder and CMS

If your CustomGridElement is purely visual, I might even recommend just creating a template within Builder, and not worrying about registering a custom component, as that would require less code and would be easier to edit on the fly within our Visual Editor.

My custom element code looks something like this:

export const CustomGrid: React.FC<CustomGrid> = (props) => {
  return (
    <>
        <p>{props.title}</p>
        <p>{props.subtitle}</p>
        
        <BuilderBlocks 
            blocks={[...props.builderBlock.children]} 
            parentElementId={props.builderBlock.id} 
            dataPath="this.children" />
    </>
  );
};

Builder.registerComponent(TextAndImage, {
  name: "CustomGrid",
  canHaveChildren: true,
  inputs: [
    {
      name: "title",
      type: "text",
      defaultValue: "A short title",
    },
    {
      name: "subtitle",
      type: "text",
      defaultValue: "A short subtitle",
    },
  ]
});

Do you think that would achieve the use case you have outlined? Let me know if you have further questions or follow ups, always happy to help!