HTML API call to Builder content pages with queries- Help

Builder content link

Builder public api key
869cdfafcf774c72803307f3946c15b0

In our own software system we have a few workshops and next to each workshop, I’m creating a link that when clicked, will direct the user to the builder page associated with that workshop to edit the page.

I’m trying to use the url path to filter out by workshopId to get this accomplished. Below is the code i’m using and the project is just JavaScript/TypeScript, no special framework.

Here is the code containing the event action ‘launch-builder-page’ connected to the button that will be clicked to direct the user to the page associated with that workshop Id. I’m able to direct the user to the url containing the workshop Id, but having trouble with the query. I want it to only show the workshop Id for page containing “registration” in the name.

Would it make more sense to use HTML API to do this? Ideally i would like the button to open up directly to the visual editor page of that workshop instead of just the content page for builder.

Welcome, @dalia, to the forum community!

It sounds like you’re trying to create links that, when clicked, direct users to specific Builder.io pages associated with workshops, and you want to filter those pages based on certain criteria like the workshop ID and the presence of “registration” in the page name.

The URL with query params might looks something as below

https://cdn.builder.io/api/v3/content/my-model?query.data.myCustomPropertyName.$eq=registration

You can find more information about the Builder Querying Cheatsheet.

Using HTML APIs might not be necessary if you’re comfortable with manipulating URLs and handling events using JavaScript/TypeScript. However, if you find that this approach becomes complex or you’re dealing with more dynamic data, you might consider using JavaScript frameworks like React or Vue.js to help manage the complexity of your application.

Could you provide some insights into the challenges you’re encountering while using the query?

We’re happy to help!

Additional reference:
https://builder.io/api-explorer

Thanks for the help @OmPrakash! That’s what I had done before based off another forum i found, but I kept getting an empty array with a status of 200. I’m not sure if maybe the query is wrong, but this is what I put into Postman:

https://cdn.builder.io/api/v3/content/page?&apiKey=869cdfafcf774c72803307f3946c15b0&query.data.name.$eq=registration

The Json printed is:
{ "results": [] }

For reference this is my content page. I want to filter out the names of pages that include the word “registration” in it. This seems correct, but not sure why it won’t work: &query.data.name.$eq=registration

Hi @dalia,

I would recommend you try something like below

https://cdn.builder.io/api/v3/content/page?apiKey=869cdfafcf774c72803307f3946c15b0&query.name.$regex=registration&query.name.$options=i&fields=name
  • query.name.$regex=registration indicates that you’re searching for content where the name field matches the word “registration”.
  • query.name.$options=i specifies that the search should be case-insensitive, meaning it will match “registration” regardless of its case (uppercase or lowercase).

It will give you the expected results, it wouldn’t work with the $eq query since it looks for an exact match of the string.

Please feel free to try it out and let me know if you have any questions!

1 Like

Ahhh ok that makes sense. Thank you so much! Also, is this something we can also do with the target url path? I wasn’t sure if that was even possible. Basically, my goal is to get the page to just show the registration page associated with a specific workshop using the workshop id found in the url path. Would that be query.target?

@dalia
Got it, I think you could do something like this

https://cdn.builder.io/api/v3/content/page?apiKey=869cdfafcf774c72803307f3946c15b0&query.query.value.$regex=64da758ef5d8a93810560ef7&query.query.value.$options=i

You could basically query on specific fields, in the above case I am trying to query for this specific field, as shown below:

Let me know if that helps.

Got it, thank you so much for your help. I really appreciate it!

1 Like