Was this page helpful?

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
    }
  ]
}