Skip to main content

Schema examples: new features

These schemas demonstrate the new features of Next Generation Authoring. The schemas are included in our schema examples.

Using the schema examples
Link copied!

To use the schemas:

  • You must have Next Generation Authoring switched on.
  • Choose "Content type schemas" from the "Development" menu and click the "Create schema" button.
  • Choose "Start with an example".
  • Select a schema from the "Next gen authoring" section and click "Use this schema".

Choose a schema from the Next gen authoring section

  • Click "Create Schema" to add the schema to your hub and open it in the schema editor.

Click Create schema to add the schema to your hub

Once the schema has been created, you will need to register the schema as a content type from which you can create content.

Strings
Link copied!

This example demonstrates the use of the components that can be used with properties of type string, including multiple line text and read only fields. Use of the component parameters is also demonstrated. See the input field component reference for more details.

We've included the date time fields and the color picker in separate examples.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-strings",
"title": "Next generation authoring: strings",
"description": "Single and multiple line text, read only fields. Requires next generation authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#strings",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"singleLineString": {
"type": "string",
"title": "Single Line",
"description": "Default component. Single line text",
"ui:component": {
"params": {
"placeholder": "Some useful text"
}
}
},
"multiLineText": {
"type": "string",
"title": "Multi-line",
"description": "Text area component",
"ui:component": {
"name": "text-area",
"params": {
"minRows": 2,
"maxRows": 5,
"placeholder": "Maximum of 5 lines will show before scroll",
"autosize": "true"
}
}
},
"uriString": {
"type": "string",
"title": "Web Address",
"examples": [
"https://amplience.com/developers/docs/",
"https://amplience.com/developers/docs/schema-reference/validation/#text-format"
],
"format": "uri",
"ui:component": {
"params": {
"placeholder": "https://..."
}
}
},
"country": {
"title": "Country",
"description": "Example of a read only field",
"type": "string",
"minLength": 0,
"maxLength": 255,
"readOnly": true
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows content created from the strings example schema.

The content form showing content created from the strings schema

Date and time
Link copied!

This example demonstrates the use of user selectable date time, time input, date and time input components. It also shows how to set parameters. See the date time input fields component reference for more details.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-date-time",
"title": "Date time example",
"description": "How to customize date time components. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#date-and-time",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"dateTime": {
"type": "string",
"title": "Date and Time field",
"description": "User selectable date and time",
"format": "date-time",
"ui:component": {
"params": {
"placeholder": "Choose a date and time"
}
}
},
"inputDateTime": {
"type": "string",
"title": "Date and time input field",
"description": "User editable date and time",
"format": "date-time",
"ui:component": {
"name": "date-time-input"
}
},
"date": {
"type": "string",
"title": "Date field",
"description": "User selectable date",
"format": "date",
"ui:component": {
"params": {
"placeholder": "Choose a date"
}
}
},
"time": {
"type": "string",
"title": "Time field",
"description": "User selectable time component",
"examples": ["00:00:01", "23:59:59"],
"format": "time",
"ui:component": {
"params": {
"placeholder": "00:00:00",
"pointer": false
}
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows content created from the dates example schema.

The content form showing content created from the dates schema

Numbers
Link copied!

This example demonstrates the use of components that can be used with properties of type integer or number, includes some component parameters, and shows the list of a slider and a dropdown list with labels.

See the input field component reference for more details.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-numbers",
"title": "Next gen content authoring: numbers",
"description": "Numbers, integers and sliders and component parameters. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#numbers",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"percentValue": {
"type": "integer",
"title": "Percentage",
"description": "Shows use of the suffix parameter",
"examples": ["20%", "40%", "65%"],
"minimum": 0,
"maximum": 100,
"ui:component": {
"params": {
"placeholder": "50%",
"variant": "filled",
"suffix": "%",
"allowNegative": false
}
}
},
"temperature": {
"type": "number",
"title": "Number Temperature",
"examples": ["2.5", "3.7"],
"minimum": -10,
"maximum": 10,
"ui:component": {
"params": {
"suffix": "°",
"allowNegative": true,
"step": 0.1,
"precision": 1
}
}
},
"sliderInteger": {
"type": "integer",
"description": "A slider with labels",
"ui:component": {
"name": "slider",
"params": {
"placeholder": "Some useful initial text",
"inverted": false,
"color": "",
"marks": [
{
"value": 0,
"label": "Transparent"
},
{
"value": 25,
"label": "Faint"
},
{
"value": 50,
"label": "Light"
},
{
"value": 75,
"label": "Dark"
},
{
"value": 100,
"label": "Solid"
}
],
"step": 25
}
}
},
"labelledListWithDecimals": {
"title": "Decimal dropdown with labels",
"description": "A dropdown with user friendly labels",
"type": "number",
"oneOf": [
{
"title": "Low",
"const": 0.45
},
{
"title": "Medium",
"const": 0.75
},
{
"title": "High",
"const": 0.85
}
]
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the numbers example schema.

The content form showing content created from the numbers schema

Color picker
Link copied!

This example demonstrates how to customize the color picker using the available parameters.

  • colorpick1 is configured to allow the user to choose colors in RGB format using the picker, but with the eye dropper turned off
  • colorpick2 shows how to configure the picker for RGBA format and allow colors to be chosen using the picker, the eye dropper or from a list of swatches
  • colorpick3 is configured to only allow colors to be chosen from a list of swatches

See color picker component reference for more details.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-color-picker",
"title": "Color picker example",
"description": "How to customize the color picker. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#color-picker",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"colorpick1": {
"type": "string",
"title": "Basic Example",
"format": "color",
"description": "Set color in RGB format using the picker",
"ui:component": {
"params": {
"format": "rgb",
"eyeDropper": false,
"withPicker": true
}
}
},
"colorpick2": {
"type": "string",
"title": "Freedom Picker Example",
"format": "color",
"description": "Set color in RGBA format using eyedropper, picker or swatches",
"ui:component": {
"params": {
"format": "rgba",
"eyeDropper": true,
"swatches": [
"rgba(145, 23, 145, 1)",
"rgba(46, 25, 25, 1)",
"rgba(227, 160, 127, 1)",
"rgba(140, 35, 100, 1)"
]
}
}
},
"colorpick3": {
"type": "string",
"title": "Corporate Color Example",
"format": "color",
"description": "Set color from corporate color HEX swatches",
"ui:component": {
"params": {
"format": "hex",
"eyeDropper": false,
"disallowInput": true,
"withPicker": false,
"swatches": ["#d46161", "#825151", "#61d4a8", "#1f1791"]
}
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the color picker example schema.

The content form showing content created from the color picker schema

Conditionals: example one
Link copied!

This example demonstrates the use of conditionals.

  • A conditional is used to set the validation of the addressCode property based on the value selected for the value property.

  • A conditional is used to determine whether the date property is shown or hidden based on the value of the hasDate property.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-simple-conditionals",
"title": "Next generation authoring: conditionals example 1",
"description": "Examples of using if/then/else. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#conditionals-example-one",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"addresssValidation": {
"type": "object",
"title": "Address validation",
"properties": {
"country": {
"type": "string",
"title": "Choose Country",
"default": "uk",
"oneOf": [
{
"const": "uk",
"title": "United Kingdom"
},
{
"const": "us",
"title": "United States"
}
]
}
},
"if": {
"properties": {
"country": {
"const": "uk"
}
}
},
"then": {
"properties": {
"addressCode": {
"type": "string",
"title": "Post Code",
"pattern": "^[A-Z]{1,2}[0-9][0-9A-Z]? [0-9][A-Z]{2}$"
}
}
},
"else": {
"properties": {
"addressCode": {
"type": "string",
"title": "Zip code",
"pattern": "^[0-9]{5}(?:-[0-9]{4})?$"
}
}
}
},
"event": {
"title": "Event",
"description": "Our client meetings",
"type": "object",
"properties": {
"title": {
"title": "Event Name",
"type": "string"
},
"hasDate": {
"type": "boolean"
}
},
"if": {
"properties": {
"hasDate": {
"const": false
}
}
},
"then": {},
"else": {
"properties": {
"date": {
"type": "string",
"format": "date"
}
}
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the schema demonstrating conditionals.

The "hasDate" checkbox is selected so the "date" field is shown.

The content form showing content created from the conditionals schema

Conditionals: example two
Link copied!

This example shows the use of multiple conditional fields.

  • condition1 will hide the altText property until an image has been added.
  • condition2 enables the author name field if a publication date is chosen. It sets the authorName to be readOnly if date is null.
  • condition3 uses the value of the switch boolean property to show additional properties for an image or video.
  • condition4 will add additional fields for custom width and height if the value of the dropList property indicates that a custom aspect ratio is selected.
  • condition5 adds additional fields for width, height and margin if any text is entered in the libraryIcon text field.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-conditionals",
"title": "Conditionals example",
"description": "Using conditionals. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#conditionals-example-two",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"condition1": {
"title": "Alt Text when image is added",
"type": "object",
"default": {},
"properties": {
"image": {
"title": "Image",
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
},
"if": {
"properties": {
"image": {
"properties": {
"id": {
"minLength": 1
}
}
}
},
"required": [
"image"
]
},
"then": {
"properties": {
"altText": {
"type": "string",
"title": "Alt Text"
}
}
}
},
"condition2": {
"title": "Author when publish date",
"type": "object",
"properties": {
"date": {
"title": "Publish Date",
"type": "string",
"format": "date"
}
},
"if": {
"properties": {
"date": {
"const": null
}
}
},
"then": {
"properties": {
"authorName": {
"type": "string",
"title": "Author Name",
"readOnly": true
}
}
},
"else": {
"properties": {
"authorName": {
"type": "string",
"title": "Author Name"
}
}
}
},
"condition3": {
"title": "Image or Video Choice",
"type": "object",
"properties": {
"switch": {
"title": "Is a Video?",
"type": "boolean"
}
},
"if": {
"properties": {
"switch": {
"const": false
}
}
},
"then": {
"properties": {
"desktopimage": {
"title": "Desktop Image",
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"mobileimage": {
"title": "Mobile Image",
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"alttext": {
"type": "string",
"title": "Image Alt Text"
},
"seotext": {
"type": "string",
"title": "Image SEO Keywords"
}
}
},
"else": {
"properties": {
"video": {
"title": "Video",
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
},
"autoplay": {
"type": "boolean",
"title": "Video Autoplay"
},
"alttext": {
"type": "string",
"title": "Video Alt Text"
},
"seotext": {
"type": "string",
"title": "Video SEO Keywords"
}
}
}
},
"condition4": {
"title": "Aspect ratio where custom options can be enabled",
"type": "object",
"properties": {
"droplist": {
"title": "Image/ Video aspect ratio",
"type": "integer",
"default": 1,
"oneOf": [
{
"title": "1:1",
"const": 1
},
{
"title": "2:1",
"const": 2
},
{
"title": "2:3",
"const": 3
},
{
"title": "3:2",
"const": 4
},
{
"title": "3:4",
"const": 5
},
{
"title": "4:3",
"const": 6
},
{
"title": "4:5",
"const": 7
},
{
"title": "5:4",
"const": 8
},
{
"title": "6:7",
"const": 9
},
{
"title": "8:11",
"const": 10
},
{
"title": "9:16",
"const": 11
},
{
"title": "16:7",
"const": 12
},
{
"title": "16:9",
"const": 13
},
{
"title": "Custom",
"const": 14
}
]
}
},
"if": {
"properties": {
"droplist": {
"const": 14
}
}
},
"then": {
"properties": {
"customWidth": {
"type": "number",
"title": "Custom Width"
},
"customHeight": {
"type": "number",
"title": "Custom Height"
}
}
},
"else": {
"properties": {
"customWidth": {
"type": "number",
"title": "Custom Width",
"readOnly": true
},
"customHeight": {
"type": "number",
"title": "Custom Height",
"readOnly": true
}
}
}
},
"condition5": {
"type": "object",
"title": "SVG",
"properties": {
"libraryIcon": {
"type": "string",
"title": "SVG Icon from Library",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "example: svg-icon-return"
}
}
}
},
"if": {
"properties": {
"libraryIcon": {
"const": ""
}
},
"required": [
"libraryIcon"
]
},
"then": {},
"else": {
"properties": {
"iconStyles": {
"type": "object",
"title": "Library Icon Styles",
"properties": {
"svgStyling": {
"type": "object",
"ui:component": {
"name": "grid",
"params": {
"numColumns": 12,
"columns": [
{
"span": 4,
"pointers": [
"/width"
]
},
{
"span": 4,
"pointers": [
"/height"
]
},
{
"span": 4,
"pointers": [
"/margin"
]
}
]
}
},
"properties": {
"width": {
"type": "string",
"title": "Width",
"description": "width, in 'em'. ex: 3.5em"
},
"height": {
"type": "string",
"title": "Height",
"description": "height, in 'em'. ex: 3.5em"
},
"margin": {
"type": "string",
"title": "Margin",
"description": "margins, in 'em'. ex: 3em 0 0 2em",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "top, right, bottom, left"
}
}
}
}
}
},
"ui:component": {
"params": {
"withHeader": false
}
}
}
}
}
}
}
}

Example content form
Link copied!

The following shows each of the conditional fields in action.

Multiple examples of conditional fields

Validation
Link copied!

This example demonstrates one of the improved validation features: the contains keyword.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-validation",
"title": "Next generation authoring: validation",
"description": "Examples of enhanced validation features. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#validation",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"numberArray": {
"title": "Number array",
"description": "An array of numbers that must contain at least one number with a minimum value of 10 or more",
"type": "array",
"minItems": 0,
"maxItems": 10,
"items": {
"type": "number"
},
"contains": {
"type": "number",
"minimum": 10
}
},
"stringArray": {
"title": "String array",
"description": "An array of strings that must contain an item with a minimum of 10 characters",
"type": "array",
"minItems": 0,
"maxItems": 10,
"items": {
"type": "string"
},
"contains": {
"type": "string",
"minLength": 10
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the schema demonstrating validation. The numbers array must contain an integer with a value of at least 10, while the strings array must contain a string with a length of 10 or more characters.

The content form showing content created from the validation schema

Grids
Link copied!

This example demonstrates how to arrange related fields into a grid.

The image properties in this example schema are grouped together in a grid divided into 12 columns, with each field laid out using 6 columns, or half the available space.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-grids",
"title": "Next generation schema examples: grids",
"description": "An example of fields arranged in a grid",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"imageLinkGrid": {
"type": "object",
"properties": {
"imageLink": {
"title": "Image Link",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"imageAltText": {
"type": "string",
"title": "Image alt text",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "Description of image for alt tag"
}
}
},
"isSVG": {
"type": "boolean",
"title": "Image SVG",
"description": "Check if image is an SVG"
},
"imageLinkHref": {
"type": "string",
"title": "Image Link",
"format": "uri",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "https://..."
}
}
},
"imageTarget": {
"title": "Image Link Target",
"type": "string",
"oneOf": [
{
"title": "New Tab",
"const": "_blank"
},
{
"title": "Same Tab",
"const": "_self"
}
]
}
},
"ui:component": {
"name": "grid",
"params": {
"numColumns": 12,
"columns": [
{
"span": 6,
"pointers": ["/imageLink", "/isSVG"]
},
{
"span": 6,
"pointers": ["/imageAltText", "/imageLinkHref", "/imageTarget"]
}
]
}
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the grid example. Notice how the items are arranged horizontally, with each field taking up half the available space in the form.

The content form showing content created from the grids schema

Tabs
Link copied!

This example schema shows how to group related fields together into tabs.

Fields relating to image and video are organized into separate tabs.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-tabs",
"title": "Image and video tabs",
"description": "Example showing the use of tabs. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#tabs",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"altimagetext": {
"title": "Alt image text",
"description": "The text to be displayed if the image cannot be displayed",
"type": "string",
"minLength": 0,
"maxLength": 100
},
"video": {
"title": "video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"videotitle": {
"title": "Video title",
"description": "Enter the title for the video",
"type": "string",
"minLength": 0,
"maxLength": 50
}
},
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "Image",
"items": [
{
"label": "Image",
"pointers": ["/image", "/altimagetext"]
},
{
"label": "Video",
"pointers": ["/video", "/videotitle"]
}
]
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the schema showing how to organize fields into tabs.

The content form showing content created from the tabs schema

Tabs: more params
Link copied!

This is a more advanced example showing options for a banner, with the fields for an optional banner overlay shown in a separate tab.

This example shows how to use more tabs parameters, including setting the tab orientation to "vertical" (the default is "horizontal"). You can also set grow to true so that the tabs fill the space on the form (depending on the tabs orientation). Set variant to "outline" to show an outline around each selected tab.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-vertical-tabs",
"title": "Vertical tabs example",
"description": "A tabs example demonstrating vertical tabs for a banner. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#tabs-more-params",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"bannerdesktopimage": {
"title": "Desktop Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"bannermobileimage": {
"title": "Mobile Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"bannerappimage": {
"title": "App Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"banneralttext": {
"type": "string",
"title": "Alt Text",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "Add image alt tag"
}
}
},
"bannerlink": {
"type": "string",
"title": "Banner Link",
"format": "uri",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "/..."
}
}
},
"banneroverlay": {
"type": "object",
"title": "Banner Overlay",
"description": "Add if required",
"properties": {
"overlayshadow": {
"title": "Set shadow",
"type": "boolean"
},
"overlaytheme": {
"title": "Dark mode",
"type": "boolean"
},
"overlayalign": {
"title": "Overlay align",
"type": "string",
"oneOf": [
{
"title": "Left",
"const": "l"
},
{
"title": "Center",
"const": "c"
},
{
"title": "Right",
"const": "r"
}
]
},
"overlayfontsize": {
"title": "Overlay Font Size",
"type": "number",
"ui:component": {
"name": "slider",
"params": {
"px": "xl",
"min": 10,
"max": 18,
"marks": [
{
"value": 10,
"label": "Small"
},
{
"value": 14,
"label": "Medium"
},
{
"value": 18,
"label": "Large"
}
],
"step": 4
}
}
},
"overlaylines": {
"type": "array",
"title": "Overlay Text Line",
"items": {
"type": "string"
},
"maxItems": 2
}
},
"ui:component": {
"params": {
"withHeader": false
}
}
}
},
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "Banner",
"orientation": "vertical",
"variant": "default",
"grow": false,
"items": [
{
"label": "Banner",
"pointers": [
"/bannerdesktopimage",
"/bannermobileimage",
"/bannerappimage",
"/banneralttext",
"/bannerlink"
]
},
{
"label": "Overlay (optional)",
"pointers": ["/banneroverlay"]
}
]
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form for content created from the schema showing tabs organized vertically.

The content form showing fields grouped into tabs displayed vertically

Content palette- example one
Link copied!

This example demonstrates how to create a content palette of multiple types of objects from which users can choose to add content.

In the schema shown below, the flexibleList property is an array that uses the oneOf keyword to define the objects that the user can choose from: rich text, an image link with alt text and a string that represents a link.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-content-palettes",
"title": "Content palette example",
"description": "A simple example of a content palette. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#content-palettes-example-one",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"flexibleList": {
"type": "array",
"title": "Flexible list",
"items": {
"oneOf": [
{
"type": "object",
"title": "Rich Text",
"properties": {
"type": {
"const": "paragraph",
"ui:component": "none"
},
"body": {
"type": "string",
"format": "markdown",
"title": "For headings or paragraphs"
}
}
},
{
"type": "object",
"title": "Image",
"properties": {
"type": {
"const": "image",
"ui:component": "none"
},
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"alttext": {
"type": "string",
"title": "Image Alt text"
}
}
},
{
"type": "object",
"title": "Link",
"properties": {
"type": {
"const": "link",
"ui:component": "none"
},
"linkitem": {
"type": "object",
"title": "Link Details",
"properties": {
"linklabel": {
"title": "Link Label",
"type": "string"
},
"linkaddress": {
"type": "string",
"title": "Link Address",
"ui:component": {
"params": {
"placeholder": "http://"
}
}
}
},
"propertyOrder": []
}
}
}
]
}
}
}
}

Example content form
Link copied!

The image below shows an example content form for content created from the simple content palette schema. There are only 3 types of content to choose from so you use buttons to choose the type of content to add.

The content form showing content with a simple content palette. You can choose the items to add using the buttons

Content palette- example two
Link copied!

In this more advanced content palette example, there are 5 objects defined in the flexibleList array property from which the user can choose to add content.

In the schema shown below, the icons field of the array params is used to specify the icons displayed in the content palette menu. The value defined in the const for each object is used to map the object to its icon.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-content-palettes-advanced",
"title": "Content palette advanced",
"description": "A content palette with items chosen from a list. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#content-palettes-example-two",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"flexibleList": {
"type": "array",
"title": "Flexi Field",
"ui:component": {
"params": {
"icons": {
"paragraph": "typography",
"image": "photo-plus",
"imagelink": "photo-plus",
"link": "link",
"video": "video-plus"
}
}
},
"items": {
"oneOf": [
{
"type": "object",
"title": "Rich Text",
"description": "Rich text for headings or paragraphs",
"properties": {
"type": {
"const": "paragraph",
"ui:component": "none"
},
"body": {
"type": "string",
"format": "markdown",
"title": "For headings or paragraphs"
}
}
},
{
"type": "object",
"title": "Simple Image",
"description": "Image with alt text",
"properties": {
"type": {
"const": "image",
"ui:component": "none"
},
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"alttext": {
"type": "string",
"title": "Image Alt text"
}
}
},
{
"type": "object",
"title": "Image with link",
"description": "Image with alt text and hyperlink",
"properties": {
"type": {
"const": "imagelink",
"ui:component": "none"
},
"linkimageitem": {
"type": "object",
"title": "Image Link Details",
"properties": {
"linkimage": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"alttext": {
"type": "string",
"title": "Image Alt text"
},
"linkimagelabel": {
"title": "Link Label",
"type": "string"
},
"linkimageaddress": {
"type": "string",
"title": "Link Address",
"ui:component": {
"params": {
"placeholder": "http://"
}
}
}
}
}
}
},
{
"type": "object",
"title": "Link",
"description": "Link and label",
"properties": {
"type": {
"const": "link",
"ui:component": "none"
},
"linkitem": {
"type": "object",
"title": "Link Details",
"properties": {
"linklabel": {
"title": "Link Label",
"type": "string"
},
"linkaddress": {
"type": "string",
"title": "Link Address",
"ui:component": {
"params": {
"placeholder": "http://"
}
}
}
},
"propertyOrder": []
}
}
},
{
"type": "object",
"title": "Simple Video",
"description": "Video and alt text",
"properties": {
"type": {
"const": "video",
"ui:component": "none"
},
"video": {
"type": "object",
"title": "Link Details",
"properties": {
"image": {
"title": "Video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"alttext": {
"type": "string",
"title": "Video Alt text"
}
},
"propertyOrder": []
}
}
}
]
}
}
}
}

Example content form
Link copied!

The image below shows an example content form for content created from the advanced content palette schema. There are 5 types of content to choose from, so the content palette selection is displayed in a dropdown menu with icons for each type of content.

A more advanced example with the content palette selection shown in a menu

Localized value set
Link copied!

This example shows the use of the localized value set component. This component is used with field level localized properties and allows you to specify the locales that are shown by default for each property.

Using the component with a localized property helps improve the authoring experience if you have multiple locales on your hub and only want to view and add values for certain locales.

In this example there are localized string, image and list properties. We have used the pinnedLocales param to show the en-GB and fr-FR locales by default for each property. The user can choose to view additional locales.

If one of the pinned locales is hidden, using the locale filter at the top of the screen, then a message will be displayed.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/localized-value-set",
"title": "Title",
"description": "Description",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"localizedString": {
"title": "Localized String",
"description": "Enter localized text",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-string"
}
],
"ui:component": {
"name": "localized-value-set",
"params": {
"pinnedLocales": [
"en-GB",
"fr-FR"
]
}
}
},
"localizedImage": {
"title": "Localized image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-image"
}
],
"ui:component": {
"name": "localized-value-set",
"params": {
"pinnedLocales": [
"en-GB",
"fr-FR"
]
}
}
},
"localizedList": {
"$comment": "The user can enter up to 4 strings for each locale",
"title": "Localized list",
"description": "Enter uo to 4 strings for each locale",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
}
],
"ui:component": {
"name": "localized-value-set",
"params": {
"pinnedLocales": [
"en-GB",
"fr-FR"
],
"withHeader": false
}
},
"properties": {
"values": {
"items": {
"properties": {
"value": {
"type": "array",
"maxItems": 4,
"items": {
"description": "A string for this locale",
"type": "string",
"title": "List value"
}
}
}
}
}
}
}
},
"propertyOrder": []
}

Example content form
Link copied!

The image below shows an example content form created from the localized value set schema.

In the example there are 7 locales available on the hub, but only the pinned locales: en-GB and fr-FR, are shown by default.

A content form with properties that use the localized value set component and have the en-GB and fr-FR locales pinned

Input field component reference

Layout components

Conditionals

Content palettes

Validation