Content palettes

A content palette allows you to select from a list of objects of different types, defined with the oneOf keyword.

There are two types of content palette: a content palette array and a content palette object.

• If you define a content palette as an array, you allow users to select one or more items from a list of different types of properties.

• If you define a content palette as an object containing different types of properties, only one item can be selected.

Go to content palette, schema examples for more examples of content palettes in use.

Oneof validation

oneOf validation dictates that a value needs to match against one and only one schema in its array, so a const is needed to differentiate each item. "ui:component":"none" is used so that the const value is not shown in the form.

Each const must be unique

The const defined for each property in a content palette must be unique. If you are combining content palettes with partials, you should ensure that all of the consts in each content palette property in the combined schema have a unique value.

Content palette- array

In a content palette array,each property should contain a unique const, as highlighted below.

In this example, the image property contains an image link and a string for alt text. image defines one of the items that can be selected from an array of options.

   "type":"object",
   "title":"Simple 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"
      }
   }

The full exampleList array property shown below defines three types of item: markdown text, an image link with alt text and a string used to represent a link address.

If there are 3 or fewer items defined in the array then the user selects content using buttons, while more than 3 items are shown in a menu with optional icons. See supported icons for a list of the icons that are available to use in the selection menu of content palettes.

{
   "$schema":"http://json-schema.org/draft-07/schema#",
   "$id":"https://example.com/flexible-list",
   "title":"Flexible list",
   "description":"A flexible list implemented as a content palette",
   "allOf":[
      {
         "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content"
      }
   ],
   "type":"object",
   "properties":{
      "exampleList":{
         "type":"array",
         "title":"Flexible list",
         "items":{
            "oneOf":[
               {
                  "type":"object",
                  "title":"Rich Text block",
                  "properties":{
                     "type":{
                        "const":"paragraph",
                        "ui:component":"none"
                     },
                     "body":{
                        "type":"string",
                        "format":"markdown",
                        "title":"For headings or paragraphs"
                     }
                  }
               },
               {
                  "type":"object",
                  "title":"Simple 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":[
                           
                        ]
                     }
                  }
               }
            ]
         }
      }
   },
   "propertyOrder":[
      
   ]
}

Content palette- object

You can define the content palette as an object property, as shown by the withLinks property in the schema snippet below. As with the array example, oneOf validation is used to specify a list of objects to choose from, but only one option can be selected- in this case either an internal or external link.

The ability to choose one from multiple options makes this variation of a content palette an alternative to using conditionals.

 {
   "$schema":"http://json-schema.org/draft-07/schema#",
   "$id":"https://example.com/content-palette-object",
   "title":"Internal/ external link selection",
   "description":"Use a content palette object to choose between an internal and external link",
   "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":[
      
   ]
}