Querying Pages for Data Binding

General
1

I have created a custom component to display a CTA for a page. I want to be able to bind some of the fields in the component to fields in the page however when I go into the data element and try and pick a Page content type that doesn’t appear only sections and structured data types.

Here is a link to a video showing what I am trying to achieve:
Recording-20240909_143500.webm

Is it possible to do what I am asking?

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
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

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

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 @jhs129!

Unfortunately, it’s not possible to directly query page model entries using the “Connect Data” option in the Builder.io editor. However, a recommended approach is to fetch all the Builder pages using a fetch call or builder.getAll method. You can specify which fields to retrieve and then pass them as data props to the <BuilderComponent />.

Example Implementation

Here’s a sample code to achieve this:

import { builder, BuilderComponent } from '@builder.io/react';

// Initialize the Builder.io API with your API key
builder.init('YOUR_API_KEY');

export async function getStaticProps() {
  // Fetch all the required data from Builder.io
  const pages = await builder.getAll('page', {
    // Optionally, specify fields to omit for optimization
    omit: 'blocks',
  });

  return {
    props: {
      builderPages: pages,
    },
  };
}

export default function Page({ builderPages }) {
  // Example: Using the first page entry
  const page = builderPages[0];
  const dataProps = {
    title: page.data.pageTitle,
    link: page.data.pageLink,
  };

  return (
    <BuilderComponent
      model="page"
      content={page}
      data={dataProps}
    />
  );
}

This method allows you to fetch all your page data efficiently and pass it to the <BuilderComponent /> for rendering.

For more details, you can check out the Builder.io React documentation on passing data and functions down.

I hope this helps! Let me know if you have any further questions.

Best regards,

3

Manish-
Thanks for the reply and the sample code. Can you explain how a content author would then use the dataProps you are passing over in the BuilderComponent? My goal here is to create a way for a content author to create a call to action to link to another page on the site. The code wouldn’t know in advance what page the user might want to point to so I am looking for an easy way in the page builder UI to allow a user to select a specific page or define a query for a set of pages that they want to create call to actions to and then be able to map in data from those pages into a custom component that say renders a share image, headline and a link to the page.

4

Hello @jhs129,

A better approach would be is to create a custom component with reference field of model page which then will allow you to select and link any page url to CTA buttons.

Here is an example:

// components/CTAComponent.tsx
import { Builder } from '@builder.io/react';

// Define the CTA component
const CTAComponent = (props) => {
  const linkUrl =  props.pageLink?.value.data.url;
  return (<div>
    	<a href={props.pageLink?.value.data.url}>{props.label}</a>
  	</div>
	);
};

export default CTAComponent;

Builder.registerComponent(CTAComponent, {
  name: "CTAComponent",
  inputs: [
    { name: 'label', type: 'string' },
    {
      name: 'pageLink', 
      type: 'reference', 
      model: 'page', 
      required: true
    },
  ],
});

Hope this helps!

Thanks,