Skip to main content

Text schema examples

These schema examples show how to add text (string, date and color) properties to content type schemas.

Pre-requisites
Link copied!

None. The examples here are self contained schemas.

How to use
Link copied!

These examples demonstrate most of the available string formats and validations. You should be able to modify any of these properties for use in your own schemas.

String schema example
Link copied!

This schema example shows how to add text properties and includes some of the different types of validation available to you, including patterns and enums.

  • The dateWithPattern and urlslug properties demonstrate how to constrain the value entered using a regular expression defined by the pattern keyword. You can find out more about regular expressions in JSON Schema in the JSON Schema documentation.

  • The color property shows how to define a property that allows the user to choose a color using the color picker. This is a Dynamic Content specific addition to JSON Schema. The color is returned in RGB format, for example: rgb(64, 100, 127).

  • The dateFormat property defines a date using the "date" format introduced in JSON Schema draft 7. We use the examples keyword to give the user some example dates in the correct format.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

    String with ui components example
    Link copied!

    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.

    Interactive

    This example is best viewed on a desktop browser where the schema editor is fully interactive.

      Date and time schema example
      Link copied!

      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.

      Interactive

      This example is best viewed on a desktop browser where the schema editor is fully interactive.

        Color picker schema example
        Link copied!

        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
        Interactive

        This example is best viewed on a desktop browser where the schema editor is fully interactive.

          See color picker component reference for more details.

          Strings

          JSON Schema regular expressions

          Input field component reference