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.
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.
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.
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.
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.