Content palettes schema examples
These schema examples demonstrate the use of content palettes in Dynamic Content forms.
See using the schema examples for details of how to select and install the schema examples from Dynamic Content.
Pre-requisitesLink copied!
None.
How to useLink copied!
As with the other schema examples, the examples on this page should be created and registered as content types on your hub.
Example oneLink 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.
This example is best viewed on a desktop browser where the schema editor is fully interactive.
Schema source
{
"$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": []
}
}
}
]
}
}
}
}
Tip
In the example, there are only 3 types of content to choose from, so on the form, buttons are provided for choosing the type of content to add.
Example twoLink 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.
This example is best viewed on a desktop browser where the schema editor is fully interactive.
Schema source
{
"$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": []
}
}
}
]
}
}
}
}
Tip
In the example, there are 5 types of content to choose from, so on the form the content palette selection is displayed in a dropdown menu with icons for each type of content.
Color picker exampleLink copied!
In this content palette example, there are 4 color picker objects defined in the flexibleList array property. Each color picker has a different configuration of colors, as could be used to define a corporate color scheme.
This example is best viewed on a desktop browser where the schema editor is fully interactive.
Schema source
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/content-palette-color-picker",
"title": "Content palette color picker example",
"description": "Using a content palette to choose a color picker for a corporate color scheme",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#content-palette--example-one",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"flexibleList": {
"type": "array",
"ui:component": {
"params": {
"withChildHeaders": false,
"icons": {
"Theme1": "color-swatch",
"Theme2": "color-swatch",
"Theme3": "color-swatch",
"Theme4": "color-swatch"
}
}
},
"title": "Coporate color scheme",
"maxItems": 1,
"items": {
"oneOf": [
{
"type": "object",
"title": "Primary Theme",
"properties": {
"type": {
"const": "Theme1",
"ui:component": "none"
},
"colorblock1": {
"type": "string",
"title": "Primary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Primary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#162c49",
"#5799a6",
"#613d10",
"#bd9546",
"#f5e09e"
]
}
}
}
}
},
{
"type": "object",
"title": "Secondary Theme",
"properties": {
"type": {
"const": "Theme2",
"ui:component": "none"
},
"colorblock2": {
"type": "string",
"title": "Secondary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Secondary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#5a6a75",
"#c7afa3",
"#d9c8ba",
"#c2b3b3",
"#3b1f2b"
]
}
}
}
}
},
{
"type": "object",
"title": "Tertiary Theme",
"properties": {
"type": {
"const": "Theme3",
"ui:component": "none"
},
"colorblock3": {
"type": "string",
"title": "Tertiary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Tertiary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#2a212d",
"#24213b",
"#260823",
"#216083",
"#331b3b"
]
}
}
}
}
},
{
"type": "object",
"title": "Custom Theme",
"properties": {
"type": {
"const": "Theme4",
"ui:component": "none"
},
"colorblock3": {
"type": "string",
"title": "Custom theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Custom",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#333333",
"#808080",
"#b2b2b2",
"#c4c4c4",
"#e5e5e5"
]
}
}
}
}
}
]
}
}
}
}
As an object- choosing between 2 optionsLink copied!
This example demonstrates the use of content palettes to allow the user to choose one of two options, in this case either an internal or external link. The internal link must conform to the defined pattern while the external link must be a valid URI.
This example is best viewed on a desktop browser where the schema editor is fully interactive.
Schema source
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/content-palette-internal-external-link",
"title": "Content palette- internal external link example",
"description": "How to use a content palette to allow a choice between an internal and external link",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#content-palette-object--choosing-between-2-options",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"withLinks": {
"title": "Internal/ External Links Example",
"type": "object",
"required": [
"itemType"
],
"oneOf": [
{
"type": "object",
"title": "Internal Link",
"properties": {
"itemType": {
"const": "internalLink",
"ui:component": "none"
},
"internalLink": {
"title": "Internal Link",
"type": "string",
"format": "uri-reference",
"pattern": "^[0-9a-zA-Z-_?=&#][0-9a-zA-Z-_\\?=&#/.%+]*$"
}
}
},
{
"type": "object",
"title": "External Link",
"properties": {
"itemType": {
"const": "externalLink",
"ui:component": "none"
},
"externalLink": {
"title": "External Link",
"type": "string",
"format": "uri"
}
}
}
]
}
},
"propertyOrder": []
}
As an object- choosing between multiple optionsLink copied!
This example shows how to use a content palette to allow the selection between a basic configuration of the rich text editor and one with more options, and a choice of 1 from 4 different color schemes.
This example is best viewed on a desktop browser where the schema editor is fully interactive.
Schema source
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/content-palette-object-advanced-examples",
"title": "Content palette object advanced example",
"description": "Choose one of multiple options",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#content-palette-object--choosing-between-multiple-options",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"withextensions": {
"title": "Different Extension Params",
"type": "object",
"required": [
"itemType"
],
"oneOf": [
{
"type": "object",
"title": "Full Rich Text Extension",
"properties": {
"itemType": {
"const": "basicRTE",
"ui:component": "none"
},
"basicRTE": {
"type": "string",
"title": "Full Menu Rich Text Extension",
"ui:extension": {
"url": "https://rich-text.extensions.content.amplience.net",
"params": {
"tools": {
"ai": {
"disabled": false
}
}
}
}
}
}
},
{
"type": "object",
"title": "Restricted Rich Text Extension",
"properties": {
"itemType": {
"const": "advRTE",
"ui:component": "none"
},
"advRTE": {
"type": "string",
"title": "Restricted Menu Rich Text Extension",
"ui:extension": {
"url": "https://rich-text.extensions.content.amplience.net",
"params": {
"tools": {
"ai": {
"disabled": true
}
},
"toolbar": {
"layout": [
{
"type": "button",
"toolName": "undo"
},
{
"type": "button",
"toolName": "redo"
},
{
"type": "group",
"children": [
{
"type": "button",
"toolName": "strong"
},
{
"type": "button",
"toolName": "em"
}
]
},
{
"type": "dropdown",
"toolNames": [
"heading_1",
"heading_2",
"heading_3",
"heading_4",
"heading_5",
"heading_6"
]
},
{
"type": "button",
"toolName": "ai"
}
]
}
}
}
}
}
}
]
},
"withcolorthemes": {
"title": "Corporate color theme picker",
"type": "object",
"required": [
"itemType"
],
"oneOf": [
{
"type": "object",
"title": "Primary Theme",
"properties": {
"itemType": {
"const": "Theme1",
"ui:component": "none"
},
"colorblock1": {
"type": "string",
"title": "Primary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Primary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#162c49",
"#5799a6",
"#613d10",
"#bd9546",
"#f5e09e"
]
}
}
}
}
},
{
"type": "object",
"title": "Secondary Theme",
"properties": {
"itemType": {
"const": "Theme2",
"ui:component": "none"
},
"colorblock2": {
"type": "string",
"title": "Secondary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Secondary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#5a6a75",
"#c7afa3",
"#d9c8ba",
"#c2b3b3",
"#3b1f2b"
]
}
}
}
}
},
{
"type": "object",
"title": "Tertiary Theme",
"properties": {
"itemType": {
"const": "Theme3",
"ui:component": "none"
},
"colorblock3": {
"type": "string",
"title": "Tertiary theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Tertiary",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#2a212d",
"#24213b",
"#260823",
"#216083",
"#331b3b"
]
}
}
}
}
},
{
"type": "object",
"title": "Custom Theme",
"properties": {
"itemType": {
"const": "Theme4",
"ui:component": "none"
},
"colorblock3": {
"type": "string",
"title": "Custom theme color picker",
"description": "Format is set to hex",
"ui:component": {
"name": "color",
"params": {
"placeholder": "Custom",
"withPicker": false,
"withEyeDropper": false,
"disallowInput": true,
"format": "hex",
"colors": [
"#333333",
"#808080",
"#b2b2b2",
"#c4c4c4",
"#e5e5e5"
]
}
}
}
}
}
]
}
},
"propertyOrder": []
}