Pre-bind content in Experiences

Overview

Pre-binding enables you to pre-associate structured content to a visually assembled pattern in Studio. That way, every time a pattern is used in an experience, it can be easily populated with content. 

Important: To use the pre-binding feature make sure you have at least SDK version 3.8.0 installed.

How content pre-binding works

You can pre-bind content to a pattern to simplify your editors’ experience by:

1. Assigning a content type to a pattern

2. Mapping content type fields to component properties: That way, in an experience, an editor can select an entry of the bound content type(s), and its field content will automatically populate the pattern’s components based on the defined mappings.

   1. Default entry – Optionally, you can assign a default entry to a pattern. This entry is automatically assigned to each pattern instance, and your editors will have the option to replace the entry.

Example use case

You can pre-bind a “Case study” content type and its fields to a pattern and its components like “Heading”, “Image”, and “Button”. Your editor can then drag this pattern onto the Experiences canvas and select an existing entry or create a new entry. The pattern instance’s components get automatically pre-filled with entry content, all in one selection.

Pre-binding functionality 

• Pre-binding a pattern is optional. Alternatively, customers can map content entry fields to components in the experience canvas. 

• Customers can assign a content type to a pattern and then map components to fields for that content type. 

• Customers can assign a default entry to a pattern. If a default entry is assigned, the entry content will automatically appear whenever a pattern is utilized. Editors can remove or replace the default entry with another entry of the same content type.

• In nested patterns, when a pattern is placed inside another, you can define which content type pre-binding should be applied. If the nested pattern has multiple content type pre-bindings, you can choose which ones to keep by unchecking the others.

• When mapping the components of a pattern to content type fields, you can map to one, many, or all fields. You can also leave a property of any component unmapped, so it can be manually mapped later in the experience canvas. 

Pre-bind a pattern

To bind a pattern to a content type and map fields to component properties:

1. Log in to the Contentful web app.

2. Navigate to the “Experiences” tab.

3. Either edit an existing pattern or create a new one. You can do this either in the experience canvas or from the “All patterns” list view.

4. Switch to the “Content” tab in the right sidebar and select the content type(s) that you want to associate with the pattern. The “Manage binding” sidebar is displayed.
   

   

5. Select a component and a component property, and choose one of the fields supported by the content type.
   The fields displayed for the selected content type are a preview to help you easily choose the correct field. When you click on a field, it will be highlighted to indicate that it is now mapped to the component’s property. At the top, you can also see that the property is checked, confirming it is mapped to a field.

6. Click Done.

7. Optional: Click the three dots menu and select Add default entry to set the default entry for the content type. 
   

   

   NOTE: Each pattern can have only one default entry.

   
   The “Select entry” sidebar is displayed where you can select the entry you want to be as default for your pattern.
   

   NOTE: You can also create a new one by clicking +New entry.

8. Click Done to close the sidebar.

9. Click Save to apply changes to the pattern.
   

Populate a pre-bound pattern with content

To populate a pre-bound pattern with content:

1. Log in to the Contentful web app.

2. Navigate to the “Experiences” tab.

3. Either edit an existing experience or create a new one.

4. Select an existing pattern in the experience canvas or add a new one.

5. Switch to the “Content” tab in the right sidebar.

6. Click Add Entry.

7. Select an entry from the entry selection window. The content of this entry automatically populates your pattern instance for components that have been mapped in pre-binding.

8. Optional: To remove the bound entry, click the bin icon.
   

   NOTE: You can get a full view of all the pre-binding patterns used in the experience by switching to the “Content” tab and clicking All pre-bindings, regardless of whether the selected item is a component within a pattern or the pattern itself. From there, you can easily select an entry for each pattern with pre-binding to populate content, without needing to locate each pattern separately.

How to apply pre-binding 

Once pre-binding exists on a pattern, any new pattern that is dragged and dropped in a canvas will use pre-binding. If a previously created pattern uses manual binding, you can reset it to use the pre-binding feature. 

To reset your binding:

1. Log in to the Contentful web app.

2. Navigate to the “Experiences” tab.

3. In the left sidebar, click All patterns to display the All Patterns view.

4. Either create a new pattern by clicking + Add pattern, or open an existing one.

5. In the left sidebar, under “Patterns”, search for the required pattern with pre-binding.

6. Drag and drop the pattern onto the canvas.

7. Switch to the “Content” tab in the sidebar. When a pattern includes multiple content type pre-bindings, you can choose which to enable or disable, so only the needed ones are applied in the parent pattern.