Components

This article explains how to create a component in Prepr. A component is a predefined set of fields that can be used in models.

Create a component

To create a component, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. Then, click the + Create component button.
  3. Name the component as follows Or import a component:
General fields
Description
Display nameChoose a unique name for the component.
Type nameThe value of this field is automatically generated. This field is important for the GraphQL API to connect your front-end to Prepr. When you create a new component, this name is generated as follows: PascalCase version of the Display name, stripped of all non-alphanumeric characters. For example, the component name "SEO tags" generates SEOTags.
IconChoose an icon image that visually represents your component. This is used for the dynamic content editor and other parts of the content item editor interface.

create-component

After creating a component, you can include a component in a model. The following model fields allow you to use your component in a model:

Tip

Create empty components to serve as placeholders. This way you can trigger the front-end to insert static front-end components, such as banners, marketing widgets, or forms. An empty component is a component without any fields. All empty components in a dynamic content field are shown as a label so you can easily recognize them.

See an example empty component used as a placeholder, below:

using empty components

Note

When someone else is working on the same schema, for example, they add a new component or delete an existing component, you'll see those changes in real-time within the schema editor.

Add fields to a component

To add fields to your component, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. Click on the component from the list of models on the left.
  3. Drag and drop the desired field type, for example, Text,

For a complete list and all the specs, check out all Prepr field types.

Let's look at some basic settings that are common across all field types.

  1. Using Text as an example, name it as follows:
General fields
Description
Display nameThe field label shown in the content editing interface.
IDThe value of this field is automatically generated. The technical ID of this field that is used, for example, to retrieve content through the API.

For more details on the other Text settings, check out the text field type.

  1. Click the Appearance tab to set the appearance options for the field.
Appearance fields
Description
Help textAn instruction to help content editors. Make instructions clearer by making text bold, italic, or bolditalic. Use the following standard Markdown syntax:
*. and _ (italic)
** and __ (bold)
*** and ___ (bolditalic).
Show in preview (deprecated)Enable this option to make the field visible in the preview , which can be accessed using the Preview button in the sidebar of the content item editing interface.

Note: From April 24th, 2023, the Preview button is no longer available for new Prepr accounts created after this date. To review your content before publishing, please set up a review URL on a model. Learn more
Disable editingActivate this option if you don't want a content editor to edit this field. For example, when this field is only supposed to be edited through an API or content automation.
  1. Click the Validation tab to set up validation rules for the field.

Enable This field is required if this is a mandatory field. The validation only triggers when a content item is set to the Done stage. For more details, check out the Workflow stages doc.

For more details on the other Text validation options, check out the text field type.

add-fields-component

Note

When someone else is editing the same component that you are working on, for example, they change the order of the fields, you will be notified about those changes. In this case, you need to click to apply those changes to your component.

Warning

Making changes to fields for a component that is already filled with content could lead to unexpected query results. For example, when you change or delete fields, then the existing content doesn't show up in the query results. Also, when you change existing field names, update your API queries accordingly.

Add columns

You can also use columns to determine the display of the fields in your content item. Columns are used to divide fixed content item fields into a maximum of three columns.

To add columns, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. Click on the component from the list of components on the left.
  3. Click the + Columns button.
  4. Drag the column element above the fields that you want divided into columns.
  5. Choose the number of columns that you want those fields to be grouped into.

add-columns-component

Create a nested component

Note

Nested components can be added to models directly or to a Stack field. When adding a nested component to a Dynamic content field, only the parent component will be visible. Child components will be hidden.

This feature allows you to add an individual (child) component into another (parent) component, creating nested levels of content. You can reuse individual components as many times as needed, even if they're already used within nested components. For example, you can use a call-to-action component in both a page header component and a product collection component.

To create a nested component, follow these steps:

  1. Create individual components which represent different elements in your page layout, such as header, image and text, call-to-action, product or article collections, etc.

  2. Determine a parent component – the one you’ll be using as a container for other components (child components). Click to open its configuration.

  3. From the parent component page, add a new component field and select the needed child component. Save your choice.

Nested component

Now that you have created the nested component, you can add it to a model directly or place it within a Stack field.

Export and import a component

To export a component, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. Click on a component from the list of components on the left.
  3. Click on the button at the top of the component.
  4. Click Export component to download a JSON file of the component.

export-component

To import a component, follow these steps:

  1. Click the Schema tab to open the Schema Editor.
  2. Then, click the + Create component button.
  3. Click Or import a component.
  4. Choose the JSON file of the component that you want to import.

import-component

Export and import components when you want to use a component from one environment in another environment, for example, export a component from your staging environment and import the component into your production environment.

Note

If the component you are importing has reference fields, then you should import/create the referenced models first before you import the component with the references. Otherwise, you'll get an error. For example, if you have a Blog collections component with a reference to a Blog model, you must import the Blog model first.