Conditionals schema examples
These schema examples demonstrate the use of conditionals.
Conditionals: example oneLink copied!
This example demonstrates the use of conditionals to:
-
Set the validation of the
addressCodeproperty based on the value selected for thevalueproperty. -
Determine whether the
dateproperty is shown or hidden based on the value of thehasDateproperty.
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-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": []
}
Conditionals: example twoLink copied!
This example shows the use of multiple conditional fields.
- condition1 will hide the
altTextproperty until an image has been added. - condition2 enables the author name field if a publication date is chosen. It sets the
authorNameto be readOnly ifdateis null. - condition3 uses the value of the
switchboolean 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
dropListproperty 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.
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-conditionals",
"title": "Conditionals example",
"description": "Using conditionals.",
"$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
}
}
}
}
}
}
}
}