Was this page helpful?

Data structures

Table of contents

Experience type

Experience type is a annotated content type, which defines the data structure for Experiences.

It consists of (but 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 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 the entity (Entry or Asset). A storage of entities, which become sources of data for the components on canvas.
unboundValues Object A JSON object, where a key is a string identifier and the value is the one-off value of a primitive type (string, number, boolean).

In case additional fields are needed, such experience type can be extended with them and Experiences will render controls for data input.

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:

{
  "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

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