Data Binding with localization for section models

Technical Questions
,
1

Hello guys !
i hope you are doing well.
I have a scenario where :

  1. i have a model Events ( data model ) with fields ( title… )
  2. another section model (Use cases) with fields ( title , Event reference )

so one event will have many use-cases… as every-use cases have their own detail page which will be implemented by handle. Now i have events page where i want all events with their use-cases. i made a custom grid component events grid where i tried following things to bind use-cases data with their events.

  1. bind use-cases dynamic data to grid. and its not giving me the option of locale. as it gives with data model. so how would i get sections data with localization. im using nextjs App router.

2)added Input field with list of useCases but when i add data to the list it doesnt provide the reference data of Event. just ( id , modelname ). as its giving me the whole section model of usecase.

i hope you got my point.

2

Hello @mohsin,

  1. When using the section model (Use cases), add locale targeting to each entry and localization will work at the page level

  2. You can use enrich: true in the builder.get call to include reference data

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

const pages = await builder.getAll('page', {
  fields: 'data.url, name',
  // to fetch references and Symbols
  options: { enrich: true }
});
3

@manish-sharma can you please see the video how im trying to do… its the same scnario like products/categegories…
should i move my use-cases as data model too ???
loom video:

4

Hello @mohsin,

To implement this we recommend checking out our forum post on Dynamic Blog Article using Next.JS. It contains valuable insights that can help you with your project.

5

@manish-sharma i already have explored this example. this example have index page where all blogs are being fetched by api request on server and then hardcoded all the stuff so there is no builder.io interactivity… what i want is drag and drop other components like header and footer and some others. then a section which show grid with all events and their use-cases … thats why i created a custom component and trying to attach data to it…
if i use async await in the custom component i loose interactivity on page as no javascript work on client side like i cant open my dropdowns/no animation …
so i though i would attach my data somehow to the custom component and still use drag&drop functionality…

6

Hello @mohsin,

When dealing with data in Builder.io, you have a couple of options. You can either pass the data via a <BuilderComponent> or create a data model and bind it directly to the component.

For a more detailed guide and reference, I recommend checking out the following forum post: The localhost:3000 server stops upon refreshing a new page in Builder or localhost:3000 - #6 by manish-sharma

Feel free to explore these options and if you have any further questions or need additional assistance, don’t hesitate to reach out.

Best regards,

1 Like