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

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

Parameters

Param	Type	Description
numColumns	integer	The number of columns in each row.
columns	array	The 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

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

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.

Tabs

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

Parameter	Description
name	tabs
defaultTab	The name of the tab that will be selected initially
orientation	How the tabs are displayed. horizontal (default) or vertical
variant	default or outline. Should an outline be displayed around the selected tab.
grow	true or false (default). Should the tabs expand to fit the size of the form.
items	An 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

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

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