Content Field Extensions

The schema snippets on this page show you how to make use of some of our example content field extensions to add new features to the content editing form.

See using the schema examples for details of how to select and install the schema examples from Dynamic Content.

Pre-requisites

To use the example schemas on this page, you will first need to register the extension included. We've included a quick overview in the registering an extension to use the schema examples section, but for more details see the registering extensions page.

How to use

As with the other schema examples, the examples on this page should be created and registered as content types on your hub. We recommend registering an extension before using the schema that includes it. We've also included some examples that allow you to use an extension without registering it.

Registering an extension to use the schema examples

To register an extension, go the development home page and click the extensions icon, or choose "Extensions" from the Development menu. Click the "Register extension" button.

In the registration window, choose "Content field" as the category.

Add a label and name. The name will be used as the value of the "name" field in the ui:extension section of a property that uses the extension. Add the name as specified in each of the schema examples below.

Setting permissions

Click the "Permissions" tab to set the extension permissions. For the extensions used in the schema examples on this page, set the "Allow same origin" sandbox permission (1 in the image below).

Adding installation parameters

You can specify additional parameters from the "Installation parameters" tab. For extensions that use third party services, such as the maps and localization extensions, you will need to include an API key. For the rich text extension you will need to choose whether to use markdown or JSON format, while additional parameters are also available for the image transformation extension.

An example of adding parameters for the maps extension is shown in the image below.

When you've finished setting up the extension, click "Save" and the extension will be registered and available to include in your schemas.

Maps extension

The maps extension makes it easy to search for and add a location to your content using Google Maps. In order to use this schema you will need to register the extension using the following details:

• Category: Content field extension
• Name: map-extension (if you use a different name you will need to change the name in the example schema)
• URL: https://map-ui.extensions.content.amplience.net/
• Initial height: 500

Permissions

In the permissions section set the "allowSameOrigin" sandbox permission.

Installation Parameters

To use the maps API you need an API key with the Geocoding, JavaScript Maps and Places APIs enabled.

Set the apiKey in the installation parameters as follows. You will need to replace "your_Key" with your Google Maps API key. You can also specify a theme as "Light" or "Dark", together with the search text.

{
  "apiKey": "your_key",
  "theme": "Dark",
  "searchPlaceholderText": "Search for places ..."
}

You can find more information about the extension configuration on GitHub.

Maps extension example schema

An example schema showing how to use the maps extension is shown below. The extension will write the location chosen by the user to the "lat" and "lng" properties. You can find a schema showing how to make use of advanced features on GitHub.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/map-extension",
  "title": "Maps extension",
  "description": "An example schema showing how to use the maps extension",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "location": {
      "title": "Location",
      "description": "Place location latitude and longitude",
      "type": "object",
      "properties": {
        "lat": {
          "title": "Latitude",
          "type": "number"
        },
        "lng": {
          "title": "Longitude",
          "type": "number"
        }
      },
      "ui:extension": {
        "name": "map-extension"
      }
    }
  },
  "propertyOrder": []
}

Content form preview

An example of creating a content item using the map extension is shown in the image below.

Image transformation extension

The image transformation extension lets you apply Dynamic Media parameters to an image. The selected parameters are saved with the content item and can be used by your rendering code to transform the image.

In order to use this schema you will need to register the extension using the following details:

• Category: Content field extension
• Name: di-image-transformation (if you use a different name you will need to change the name in the example schema)
• URL: https://di-transform.extensions.content.amplience.net
• Initial height: 500

Permissions

In the permissions section set the "allowSameOrigin" sandbox permission.

You can choose to supply some optional installation parameters. You can find more information on GitHub.

Image transformation example schema

The following schema includes properties to store the transformation options chosen by the user.

{
  "$schema":"http://json-schema.org/draft-07/schema#",
  "$id":"https://schema-examples.com/dynamic-imaging-transform-extension",
  "title":"DI Image Transform extension Example",
  "description":"A schema to make use of the Dynamic Imaging transform extension",
  "allOf":[
    {
      "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type":"object",
  "properties":{
    "diImage":{
      "title":"Transformed Image",
      "description":"An image with DI transformations included.",
      "type":"object",
      "properties":{
        "image":{
          "title":"Base Image",
          "description":"The base image to apply DI transformations to.",
          "allOf":[
            {
              "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
            }
          ]
        },
        "crop":{
          "title":"Crop",
          "description":"The crop rectangle to apply, in % scale.",
          "type":"array",
          "minItems":4,
          "maxItems":4,
          "items":{
            "type":"number",
            "default":0
          }
        },
        "poi":{
          "title":"Point of Interest",
          "description":"The point of interest, in % scale.",
          "type":"object",
          "properties":{
            "x":{
              "title":"X",
              "description":"The x coordinate",
              "type":"number"
            },
            "y":{
              "title":"Y",
              "description":"The y coordinate",
              "type":"number"
            }
          }
        },
        "rot":{
          "title":"Rotate",
          "description":"The rotation modifier (in degrees)",
          "type":"number"
        },
        "hue":{
          "title":"Hue",
          "description":"The hue modifier",
          "type":"number"
        },
        "sat":{
          "title":"Saturation",
          "description":"The saturation modifier",
          "type":"number"
        },
        "bri":{
          "title":"Brightness",
          "description":"The brightness modifier",
          "type":"number"
        },
        "fliph":{
          "title":"Horizontal Flip",
          "description":"Whether the image should be horizontally flipped",
          "type":"boolean"
        },
        "flipv":{
          "title":"Vertical Flip",
          "description":"Whether the image should be vertically flipped",
          "type":"boolean"
        },
        "aspectLock":{
          "title":"Crop Aspect Ratio",
          "description":"The aspect ratio to use when resizing the crop rectangle, eg: 4:3. Use 'none' to unlock aspect.",
          "type":"string"
        },
        "query":{
          "title":"DI Query String",
          "description":"A query string baked with all the above parameters.",
          "type":"string"
        }
      },
      "ui:extension":{
        "name":"di-image-transformation",
        "height":500
      }
    }
  },
  "propertyOrder":[

  ]
}

Content form preview

An example of creating a content item using the image transformation extension is shown in the image below.

Localization extension

The translate extension shows you how you can connect a translation service (in this case Yandex) to provide automatic translation of strings into multiple languages. The extension is designed for use with a content item that uses field level localized strings.

In order to use this schema you will need to register the extension using the following details:

• Category: Content field extension
• Name: localization-extension (if you use a different name you will need to change the name in the example schema)
• URL: https://localization.extensions.content.amplience.net/
• Initial height: 500

Permissions

In the permissions section set the "allowSameOrigin" sandbox permission.

Installation parameters

In order to use this extension you will need a Yandex API key. Add your key in the installation parameters as follows, replacing <YOUR_KEY with the Yandex API key:

{
    "TRANSLATION_API_KEY": "<YOUR KEY>"
}

You can find more information on GitHub.

Localization example schema

The following schema shows how to use the localization extension. Localized strings are provided for each locale on your hub.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/translation-extension",

  "title": "Localization extension",
  "description": "An example schema showing how to use the localization extension",

  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],

  "type": "object",
  "properties": {
    "localise": {
      "title": "title",
      "description": "description",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-string"
        }
      ],
      "ui:extension": {
        "name": "localization-extension"
      }
    }
  },
  "propertyOrder": []
}

Content form preview

An example of creating a content item using the localization extension is shown in the image below.

Date time picker extension

The date time picker allows users to choose a date and time to be output as a string or a number. In the schema the string or number format is used to specify whether a property represents just the date, just the time, or both the date and time.

In order to use this schema you will need to register the extension using the following details:

• Category: Content field extension
• Name: date-time-picker (if you use a different name you will need to change the name in the example schema)
• URL: https://date-time-picker.extensions.content.amplience.net
• Initial height: 500

Permissions

None required.

Installation parameters

You can choose to use UNIX format dates so that the timestamp will use seconds and not milliseconds.

{
  "unix": true
}

You can find more information on GitHub.

Date time picker example schema

The following schema shows how to use the date time picker extension. String and number properties are included in date, time and date-time formats.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/date-time-picker",
  "title": "Title",
  "description": "Description",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "date": {
      "title": "Just date",
      "type": "string",
      "format": "date",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "time": {
      "title": "Just time",
      "type": "string",
      "format": "time",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "both": {
      "title": "Date and time",
      "type": "string",
      "format": "date-time",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "date-timestamp": {
      "title": "Just date (timestamp)",
      "type": "number",
      "format": "date",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "time-timestamp": {
      "title": "Just time (timestamp)",
      "type": "number",
      "format": "time",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "both-timestamp": {
      "title": "Date and time (timestamp)",
      "type": "number",
      "format": "date-time",
      "ui:extension": {
        "name": "date-time-picker"
      }
    },
    "unix": {
      "title": "Unix",
      "type": "number",
      "format": "date-time",
      "ui:extension": {
        "url": "https://date-time-picker.extensions.content.amplience.net",
        "params": {
          "unix": true
        }
      }
    }
  },
  "propertyOrder": []
}

Content form preview

An example of creating a content item using the date time picker extension is shown in the image below.

Related pages

Extensions overview

Registering extensions