Data structures
Table of contents
Experience type
Experience type is an annotated content type, which defines the data structure for Experiences.
It consists of (but is not limited to) the following mandatory fields:
Field ID | Field Type | Description |
---|---|---|
title | Symbol | Holds the title of the experience. |
slug | Symbol | A slug is the part of a URL that identifies a particular page on a website in an easy-to-read form. |
componentTree | Object | A JSON object which defines the hierarchy of components on the canvas together with data subjective to each of such components. |
dataSource | Object | A JSON object, where a key is a string identifier and the value is the Link to an entity (Entry or Asset). Serves as a lookup for entities, which are sources of component variables on the canvas. |
unboundValues | Object | A JSON object, where a key is a string identifier and the value is a one-off component variable value. |
In case additional fields are needed, such experience type can be extended with them and Experiences will render controls for data input.
The experience type is annotated as shown below:
{
"metadata": {
"annotations": {
"ContentType": [
{
"sys": {
"id": "Contentful:ExperienceType",
"type": "Link",
"linkType": "Annotation"
}
}
]
}
}
}
Below you can see the full JSON example of the experience type:
Experience object JSON
{
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "kvosm7xpiri7"
}
},
"id": "experienceType",
"type": "ContentType",
"createdAt": "2023-11-09T14:08:03.895Z",
"updatedAt": "2023-11-09T14:08:04.323Z",
"environment": {
"sys": {
"id": "experience-builder-map",
"type": "Link",
"linkType": "Environment"
}
},
"publishedVersion": 1,
"publishedAt": "2023-11-09T14:08:04.323Z",
"firstPublishedAt": "2023-11-09T14:08:04.323Z",
"createdBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "1Y6Gnntz7WGKHwYuP97eko"
}
},
"updatedBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "1Y6Gnntz7WGKHwYuP97eko"
}
},
"publishedCounter": 1,
"version": 2,
"publishedBy": {
"sys": {
"type": "Link",
"linkType": "User",
"id": "1Y6Gnntz7WGKHwYuP97eko"
}
}
},
"displayField": "title",
"name": "Experience Type",
"description": "",
"fields": [
{
"id": "title",
"apiName": "title",
"name": "Title",
"type": "Symbol",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false
},
{
"id": "slug",
"apiName": "slug",
"name": "Slug",
"type": "Symbol",
"localized": false,
"required": true,
"validations": [
{
"unique": true
}
],
"disabled": false,
"omitted": false
},
{
"id": "componentTree",
"apiName": "componentTree",
"name": "Component Tree",
"type": "Object",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false
},
{
"id": "dataSource",
"apiName": "dataSource",
"name": "Data Source",
"type": "Object",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false
},
{
"id": "unboundValues",
"apiName": "unboundValues",
"name": "Unbound Values",
"type": "Object",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false
}
],
"metadata": {
"annotations": {
"ContentType": [
{
"sys": {
"id": "Contentful:ExperienceType",
"type": "Link",
"linkType": "Annotation"
}
}
]
}
}
}
Preview configuration
Experiences has to know a URL of the server, which hosts the web app, in order to render it on canvas in the iframe
.
Such URL must be configured via the Preview Configuration
and must apply to the Experience Type
.
To see existing preview configurations, refer to the "Content preview" menu of the "Settings" in our web app or make a CMA request.
Below is an example of the preview configuration for experience type with id experienceType
:
Preview configuration
{
"name": "[20231109T150803+01:00] Preview for experience 'Experience Type'",
"description": "This preview is required for the Experiences to work.",
"sys": {
"type": "PreviewEnvironment",
"id": "2vbebyUO11HofzzXC0JHyS",
"version": 0,
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "kvosm7xpiri7"
}
},
"createdAt": "2023-11-09T14:08:03Z",
"updatedAt": "2023-11-09T14:08:03Z"
},
"configurations": [
{
"url": "http://localhost:8080/{locale}/{entry.fields.slug}",
"contentType": "experienceType",
"enabled": true,
"example": false
}
]
}