Connecting data with page model to render dynamic content pages

[ozon]

Builder content link
localhost.3000

Builder public api key
1e701f3a1ab844f083ff530fee9b4a99

What are you trying to accomplish
I have a landingpage with a news section and a seperate news-list with dynamic news-content. Now I want to open a details page for every news entry in the data model.

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
React, Next.js (App router) Gen1

I’m more a designer than a developer and I test builder for with a friends onepager to hopefully find a solution for an easy website developing in the future. So I had to go through the process and surprisingly everything worked fine from the installation of server, app, sdk, to figma import and development of my static pages development.

Then I connected a pages model called “News” with my data model “News” to show a list of entries with the common fields (title, date, image, blurb, text and handle="to open the specific data entry on another prepared content page template called ‘Aktuelles’ ". And even the connection of the News-Template with the data model to show the dynamic list worked very well and quite easy, also for a dummy like me.
a screenshot of the list

But then I expected it should be easy to do the same with my article details page. So I connected my data model with another (page) layout template called “Aktuelles” in query mode, but “single view” to query a single entry with my field “handle”.

The dynamic preview url works, because the link to the details page was constructed correct and shows e.g. http://localhost:3000/newstest/vitamine (host/urlPath/data.handle). But I only see a 404 Error page.
screenshot of template and data binding:

So we created a directory in my app called “/newstest” (our target URL of the content page) with a file called [handle].tsx and copied the code from your “blog article” blueprint (only the contentpage) into this file, but same result - correct path but 404 page.

So I tried queries like…/[handle], but this is fishing in the dark. I don’t know…

I did stuff like this in the past and thought this is basic stuff and didn’t expect such problems. Even my friend who is a developer and works with js tried something, but in the end everything we did failed.

Is there way to combine data-models with a page-model based layout template, to develop dynamic generated pages with data content for a dummy like me? I read many articles with similar stuff and it seems I stumble over the integration of the code into my codebase - but I did everything as described…

[manish-sharma]

Hello @ozon,

Welcome to the builder.io forum post.

For setting up a dynamic news details page you may find help at the below link

Create a drag-and-drop editable blog with Next.js

Dynamic Pages with Data from my database API

i am using a postgres database and not builder’s cms or contentful to store/fetch data. Also you completely missed point 3. It’s nextjs’s dynamic nesting and targeting can’t do what that does from what I understand. Can you answer again keeping in mind that i am fetching data from my own db ?

[ozon]

Thanks for your answer and I tried what you suggested, but with the section I have a preview problems, but to keep it simple - I watched the demo on github and it looks nice, but this is a drag & drop solution with content integrated with the model. What I want is quiet simpler and I think somehow I must be almost there because:

• the list view on my news Indexpage works and
• i tried something with your code and a details page based on a page model
  • I made the same as on my overview - show all entries from the data model and manipulate the “query-filter” in the visual editor. There it works.

Two screenshots to show - the content is from my data-model and
handle is set to: “covid”

same content with handle=“vitamine”

So in the theory it works, but now I need a query which does the same, what this filter in the visual editor does - I am sure this must be just a small script, isn’t it?

[manish-sharma]

Hi @ozon,

The Edit query filter allows you to filter the connected data based on certain conditions you apply. If you are still experiencing issues with the section preview, please check the integration code and browser console errors, and share them with us so that we can provide further assistance.

[ozon]

Sorry I have to check that section problem by myself first, but my problem has been solved. We integrated the Page Template with a page script in a folder with a path like this one: “./aktuelles/[handle]/page.tsx” and fetch the news content data model to pass it to a builder component to return the “data.handle” and combine it with “urlPath”.

I would like to explain better for others with similar problems, but I confess, I am not even in the position to explain this better, because in the end I had some help from a friend. But the linked post above was the final impulse - they do the same with an external data source.

Thanx