Skip to main content

Layout components

The next generation content form includes two ways of specifying the layout of a form: tabs and grids. These features allow you to specify how properties in the form are laid out and to make the form easier to use by grouping related properties together.

Grids
Link copied!

The grid component allows you to group related properties in columns and specify how these columns should be displayed.

Parameters
Link copied!

ParamTypeDescription
namestringgrid
numColumnsintegerThe number of columns in each row.
columnsarrayThe span of each group of columns and the properties it contains

The span parameter specifies how many columns each column group takes up. Each item in the columns arrays includes span and a pointers array containing the properties contained within it.

Grid example
Link copied!

In the example schema shown below, the image properties are grouped together in a grid divided into 12 columns, with each property laid out using 6 columns, or half the available space.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.com/grid-test",
"title": "Title",
"description": "Description",
"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 URL",
"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": []
}

Grid example content form
Link copied!

The content form for the example grid schema is shown below. The Image Link and Image SVG are aligned in one section of the grid, while Image Alt Text, Image URL and Image Link target are grouped on the other.

The image properties are grouped together in a grid

Tabs
Link copied!

The tabs component allows you to organise your form so it can be navigated using tabs. You may choose to add advanced options in a separate tab and keep the most commonly used properties in the main tab, for example.

Specify the tab labels, the default tab and the properties that will be included in each tab.

You can find a more advanced tabs example, with vertical tabs, in the schema examples.

Parameters
Link copied!

ParameterDescription
nametabs
defaultTabThe name of the tab that will be selected initially
orientationHow the tabs are displayed. horizontal (default) or vertical
variantdefault or outline. Should an outline be displayed around the selected tab.
growtrue or false (default). Should the tabs expand to fit the size of the form.
itemsAn array of tabs.
For each entry in the items array there is a label and a pointers array that contains the property names in JSON pointer format. See example.

Tabs example
Link copied!

In the simple schema shown below, there are two tabs: image and video, each containing a property for the media itself and a string field.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.com/tabbed-media",
"title": "Image and video tabs",
"description": "Example showing the use of tabs",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"altimagetext": {
"title": "Alt image text",
"description": "The text to be displayed if the image cannot be displayed",
"type": "string",
"minLength": 0,
"maxLength": 100
},
"video": {
"title": "video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"videotitle": {
"title": "Video title",
"description": "Enter the title for the video",
"type": "string",
"minLength": 0,
"maxLength": 50
}
},
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "Image",
"items": [
{
"label": "Image",
"pointers": ["/image", "/altimagetext"]
},
{
"label": "Video",
"pointers": ["/video", "/videotitle"]
}
]
}
}
},
"propertyOrder": []
}

Tabs example content form
Link copied!

The content form for the example schema is shown below, including the "image" and "video" tabs.

The content form showing the image and video tabs

Divider
Link copied!

A divider is a line of variable width, with an optional label. It’s particularly useful for labelling groups of properties to create notional sections that don’t impact output.

Parameters
Link copied!

ParamDescription
namedivider
labelThe label shown on the divider
labelPositionThe divider label alignment. left, right or center (default).
sizeThe divider line size. xs (default), sm, md, lg, xl or xxl.
Note that the size of the label will not be changed
variantThe divider line style. dotted or dashed. A solid line will be used by default if variant is not specified

Divider example
Link copied!

In the example below, the numberDivider property includes a label and has a line size set to medium. The divider will not be included in the JSON output for the content item.

In this example the divider acts as a heading for a group of number properties (taken from the number schema example).

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-divider",
"title": "Title",
"description": "Description",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"numberDivider": {
"type": "string",
"ui:component": {
"name": "divider",
"params": {
"label": "Number examples",
"size": "md"
}
}
},
"percentValue": {
"type": "integer",
"title": "Percentage",
"description": "Shows use of the suffix parameter",
"examples": ["20%", "40%", "65%"],
"minimum": 0,
"maximum": 100,
"ui:component": {
"params": {
"placeholder": "50%",
"variant": "filled",
"suffix": "%",
"allowNegative": false
}
}
},
"temperature": {
"type": "number",
"title": "Number Temperature",
"examples": ["2.5", "3.7"],
"minimum": -10,
"maximum": 10,
"ui:component": {
"params": {
"suffix": "°",
"allowNegative": true,
"step": 0.1,
"precision": 1
}
}
},
"sliderInteger": {
"type": "integer",
"description": "A slider with labels",
"ui:component": {
"name": "slider",
"params": {
"placeholder": "Some useful initial text",
"marks": [
{
"value": 0,
"label": "Transparent"
},
{
"value": 25,
"label": "Faint"
},
{
"value": 50,
"label": "Light"
},
{
"value": 75,
"label": "Dark"
},
{
"value": 100,
"label": "Solid"
}
],
"step": 25
}
}
},
"labelledListWithDecimals": {
"title": "Decimal dropdown with labels",
"description": "A dropdown with user friendly labels",
"type": "number",
"oneOf": [
{
"title": "Low",
"const": 0.45
},
{
"title": "Medium",
"const": 0.75
},
{
"title": "High",
"const": 0.85
}
]
}
},
"propertyOrder": []
}

Divider example content form
Link copied!

The content form for the example schema is shown below. The divider property provides a heading for the properties underneath.

A divider providing a heading for the a group of properties

Field set
Link copied!

The field set allows you to group items together, display them with a text label, and choose a style variant to differentiate these items from other fields in the form.

Parameters
Link copied!

ParamDescription
namefieldset
variantThe style of field set box.
default a round cornered bounding box with no fill. (Used if no variant is specified)
filled filled with the background color and no bounding box line.
unstyled just the title, no bounding box and no fill.
radiusThe radius of the bounding box (if shown) xs sm, md, lg, xl or xxl.

Field set example
Link copied!

The following schema example shows 3 field set objects with different style variants.

  • fieldset-Tabs is an object that contains tabs and uses the default style.
  • fieldset-validation shows the fill variant with the background of the object filled in.
  • dateTimeFields shows a field set object with no styling and just the title.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/field-set",
"title": "Field set example",
"description": "Schema example for the field set layout component",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"fieldset-Tabs": {
"title": "Media configuration",
"type": "object",
"properties": {
"Media": {
"type": "object",
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "tab1",
"items": [
{
"label": "Image",
"pointers": [
"/image",
"/altimagetext"
]
},
{
"label": "Video",
"pointers": [
"/video",
"/videotitle"
]
}
]
}
}
},
"properties": {
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"altimagetext": {
"title": "Alt image text",
"description": "The text to be displayed if the image cannot be displayed",
"type": "string",
"minLength": 0,
"maxLength": 100
},
"video": {
"title": "video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"videotitle": {
"title": "Video title",
"description": "Enter the title for the video",
"type": "string",
"minLength": 0,
"maxLength": 50
}
}
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "default"
}
}
},
"fieldset-validation": {
"title": "Fields with validation",
"type": "object",
"properties": {
"simplestringwithmaxandmin": {
"title": "Simple string with maximum length",
"description": "A string that can contain up to 255 characters",
"type": "string"
},
"datewithpatternvalidation": {
"title": "Date validated with a pattern",
"description": "Creation date (YYYY-MM-DD)",
"type": "string",
"maxLength": 10,
"minLength": 10,
"pattern": "^[0-9]{4}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3[0-1]))$"
},
"urlslugpatternvalidation": {
"title": "URL slug",
"description": "URL slug (a-z and 0-9)",
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-z0-9-]+$"
},
"numbervalidationexample": {
"title": "Number validation example",
"description": "Enter a rating between 10- 100. (must be a multiple of 10)",
"type": "integer",
"minimum": 10,
"maximum": 100,
"multipleOf": 10
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "filled"
}
}
},
"dateTimeFields": {
"title": "Choose the date and time",
"type": "object",
"properties": {
"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
}
}
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "unstyled"
}
}
}
}
}

Field set example content form
Link copied!

The content form for the field set example schema is shown below. The "Media configuration" group of fields uses the default style, while the "Fields with validation" field set uses the fill variant to make it stand out from the rest of the form.

Three field set example objects

Field set grid
Link copied!

The field set grid component combines the features of Grids and Field sets to group related fields in a grid with a title and customizable style. This helps differentiate the fields from the rest of the form and improves the content entry process for users.

Parameters
Link copied!

ParamDescription
namefieldset-grid
numColumnsThe number of columns in each row.
columnsThe span of each group of columns and the properties it contains
variantThe style of field set box.
default a round cornered bounding box with no fill. (Used if no variant is specified)
filled filled with the background color and no bounding box line.

The span parameter specifies how many columns each column group takes up. Each item in the columns arrays includes span and a pointers array containing the properties contained within it.

Field set grid example
Link copied!

An example field set grid schema example is shown below. This uses the same example as the Grid example with image properties grouped together in a grid divided into 12 columns and each property using half the available space. The field set grid object is configured to fill the background, as well as showing the object title.

{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/field-set-grid",
"title": "Next generation schema examples: field set grid",
"description": "An example of fields arranged in a field set grid",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"imageLinkGrid": {
"title": "Image configuration",
"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": "fieldset-grid",
"params": {
"variant": "filled",
"numColumns": 12,
"columns": [
{
"span": 6,
"pointers": [
"/imageLink",
"/isSVG"
]
},
{
"span": 6,
"pointers": [
"/imageAltText",
"/imageLinkHref",
"/imageTarget"
]
}
]
}
}
}
},
"propertyOrder": []

}

Field set grid example form
Link copied!

The content form for the field set grid example schema is shown below. The field set grid object uses the fill style.

Fields arranged in a field set grid