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.
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":[] }
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.
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
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.
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":[] }
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.
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":[] }
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.
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.
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.
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.
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":[] } } } ] } } } }
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.
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":[] }
