WebReinvent Internal Docs
Builderio Nuxt 3

Data Model

Data models are pure data, which means there is no drag-and-drop aspect to using Data models in the Builder Visual Editor. However, as with all Builder models, you can use targeting, scheduling, queries and custom roles.

Examples of use cases for Data models include:

The following image shows an example of data as a navigation link. There is no drag-and-drop feature associated with a Data model. Rather, you pull the data in and use it in your project and control the rendering entirely. Data model

Finding your Data models

To find and view your Data models, do the following:

  1. Go to the Models section of the Builder UI.
  2. Scroll to the CMS Data Models section.
  3. Select a Data model.

The following video demonstrates the above steps to locate and open a real, internal Builder URL Redirect Data model.

Creating Data models

To create and use a Data model follow the below steps:

  1. Go to the Models section of the Builder UI.
  2. Click the + Create Model button.
  3. Choose Data.
  4. In the Model Display name field, enter the name you'd like this model to have when listed in the Models section of Builder. You can edit this later if you change your mind.
  5. Name the model and fill out the Model Description field.
  6. Click Create.
  7. Add any needed custom fields.
  8. Click Save.

To use the new Data model, integrate with your codebase and then your teammates can use the data in the Visual Editor.

The following video shows how to create an example Blog Author Data model then shows how to use the new model in a content entry:

Using an example Data model

To use a Data model, make sure you've already integrated CMS Data. The following video demonstrates using this same Blog Author Data Model from the previous section:

  1. In the Content section of Builder, click the + New button and choose the data model. Here, the example data model is Blog author.
  2. Fill out the fields you created in the previous section. Note that the required fields are red with an asterisk and note that indicates they are required.
  3. Name the Data Model entry. In this case, the name is the same as the author name.
  4. Click Publish.

Because this Data model is integrated with the codebase and associated with a real internal Builder Blog article section, the Options tab in the Visual Editor displays a place for users to choose the entry.

This example shows making a Data Entry for a blog author named Almosta Shakespeare and choosing Almosta as the author in a blog article.

Querying data using JS

To get your custom fields, use builder.get() with two arguments:

  • Your model name
  • An object, which contains a nested object, query.

The following example is an example snippet of using query with builder.get().

builder
.get(YOUR_MODEL_NAME, {
  // limit the number of entries fetched
  limit: 2,
  // Optional mongo DB query (example)
  query: {
    'data.customField.$gt': 100,
  },
})
.promise()
.then(({data}) => {
  // Do something with the data
});

To use query:

  1. Pass in an object, {}, as the second argument to builder.get() that contains the nested query object.
  2. For the key-value pairs for query{}, structure the query as data.customField.$operator, where data is the word data, and customField is the name of the field you want to query, followed by the operator.
  3. Find the name of your custom field by expanding the field in the Data model.

Querying data using REST API

To query your data, you can use the Content API using the syntax in the following GET example, where customField is the name of your custom field, followed by the operator that meets your needs:

GET https://cdn.builder.io/api/v2/content/page?apiKey=...&query.data.customField.$gt=100

Examining this example, the parts are:

  • The method: GET
  • The endpoint: https://cdn.builder.io/api/v2/content/page?
  • Your API Key: apiKey=YOUR_API_KEY
  • Query: &query.data.customField.$operator

For example, to query a custom field named price, use the following syntax:

// To query the custom field name
&query.id=price

// To query the field when it is not equal to 20  
&query.data.myCustomField=someValue&query.data.someNumber.$ne=20

Finding the model name

To find the model name:

  1. Open the model in the Models section of Builder.
  2. Click the Show More button and copy the Unique identifier.

To find the name of a custom field, expand the custom field. Name is the first entry.

The following video shows finding the model name and a custom field name.

For more detail on query, refer to the query section of the Builder GitHub readme Interface: GetContentOptions and MongoDB's Query and Projection Operators.

To get more familiar with query parameters, refer to Builder Content API and the interactive Builder REST API Explorer.

Section Model

Private Models

Copyright © 2024