Content Schemas

Location: "Settings" -> "Content Schemas"

A content schema defines what properties are available for editing in the edition view for product types 'frontpage' and 'magazine'. Content schema is also the basis for what data you will receive when fetching editions from the DrEdition API.

While we recommend we setup the first Content Schema(s) for you as part of initial setup of DrEdition, this guide can be useful if you intend to change those Content Schemas, or to roll your own.

Content Schemas must align with with mappings from Content Queries to be useful.

A content schema is written according to the JSON Schema standard and is used for presenting the user with editing options. Content Schemas are presented in the GUI's third column as seen in Illustration 1 on the Overview page, se also zoomed version in the illustration below.

Illustration: Content Schema between Edition List (left) and Preview (right).

Content Schemas also provide data validation on items and groups of items. Our frontend is using Angular Schema Form so much documentation can be found there.

The Content Schema from the Illustration above which is used for "product type: front page", looks like this (warning: long and complex, scroll beyond for simpler examples):

{
"type": "object",
"x-dredition": {
"titleTemplate": "{{pretitle ? pretitle + ' ' : ''}}{{title}}"
},
"required": [
"id",
"type",
"title"
],
"properties": {
"type": {
"type": "string"
},
"id": {
"type": "string"
},
"pretitle": {
"type": "string"
},
"title": {
"type": "string",
"x-schema-form": {
"type": "html",
"quillOptions": {
"modules": {
"toolbar": [
[
"bold",
"italic",
"clean"
]
]
},
"formats": [
"bold",
"italic"
]
}
}
},
"textFit": {
"title": "Text fit strategy",
"format": "enumTitle",
"type": "string",
"oneOf": [
{
"title": "Auto",
"enum": [
"auto"
]
},
{
"title": "Max all lines",
"enum": [
"max-all"
]
},
{
"title": "None",
"enum": [
"none"
]
}
]
},
"lastLineFit": {
"title": "Last line handling",
"type": "string",
"default": "match",
"description": "Only relevant for 'Max all lines', 'match' will prevent overly large last lines",
"x-schema-form": {
"type": "radios"
},
"enum": [
"fill",
"match"
]
},
"summary": {
"type": "string",
"x-schema-form": {
"type": "html",
"quillOptions": {
"modules": {
"toolbar": [
[
"bold",
"italic",
"clean"
]
]
},
"formats": [
"bold",
"italic"
]
}
}
},
"priority": {
"title": "Priority",
"type": "string",
"x-schema-form": {
"type": "radios"
},
"default": "B",
"enum": [
"A+",
"A",
"B",
"C"
]
},
"features": {
"type": "object",
"properties": {
"premium": {
"title": "premium",
"type": "boolean",
"default": false
},
"sponsored": {
"title": "sponsored",
"type": "boolean",
"default": false
}
}
},
"imagePosition": {
"title": "Image position",
"type": "string",
"x-schema-form": {
"type": "radios",
"condition": "model.image.url",
"destroyStrategy": "retain"
},
"default": "top",
"enum": [
"top",
"left"
]
},
"tag": {
"type": "string"
},
"section": {
"type": "string"
},
"image": {
"properties": {
"url": {
"format": "imageUrl",
"title": "URL",
"type": "string"
},
"thumbnailUrl": {
"format": "imageThumbnailUrl",
"title": "Thumbnail URL",
"type": "string"
},
"width": {
"title": "Width",
"type": "number",
"format": "imageWidth"
},
"height": {
"title": "Height",
"type": "number",
"format": "imageHeight"
},
"id": {
"title": "Image ID",
"type": "string",
"format": "imageId"
},
"aoi": {
"title": "Area of Interest",
"format": "areaOfInterest",
"type": "object",
"properties": {
"x": {
"type": "number"
},
"y": {
"type": "number"
},
"width": {
"type": "number"
},
"height": {
"type": "number"
},
"focus": {
"type": "object",
"properties": {
"x": {
"type": "number"
},
"y": {
"type": "number"
}
}
},
"origin": {
"type": "string"
}
}
}
},
"title": "Image",
"type": "object",
"format": "image"
},
"url": {
"type": "string",
"title": "Public article url"
}
}
}

A basic schema for an edition item with all required looks like this.

{
"type": "object",
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string"
},
"title": {
"type": "string"
}
},
"required": ["id", "type", "title"]
}

Print content schema

For product type 'print' content schemas are predefined and non-editable.

You may use an additional content schema for any additional specific data you have which can be placed under the data attribute.

Custom schema formats/types

image

Use this format to enable image upload and editing capabilities of images for a field. It consists of 6 formats but only image and imageUrl are required.

{
"properties": {
"image": {
"title": "Image",
"type": "object",
"format": "image",
"properties": {
"url": {
"type": "string",
"format": "imageUrl"
},
"thumbnailUrl": {
"type": "string",
"format": "imageThumbnailUrl"
},
"width": {
"type": "number",
"format": "imageWidth"
},
"height": {
"type": "number",
"format": "imageHeight"
},
"id": {
"type": "string",
"format": "imageId"
}
}
}
}
}

enumTitle

Use this format to edit a field using a select dropdown with custom titles.

{
"properties": {
"backgroundColor": {
"type": "string",
"title": "Background Color",
"oneOf": [
{
"title": "Blue",
"enum": ["#4e46f3"]
},
{
"title": "Red",
"enum": ["#fa3232"]
}
],
"format": "enumTitle",
"x-schema-form": {
// By default, "-- None --: undefined" will be added as the first option
// Set allowEmpty to false to not show this option
"allowEmpty": false
}
}
}
}

html

Use this type for editing a field with a rich text editor (Quill). The property quillOptions is optional.

{
"properties": {
"htmlCustom": {
"type": "string",
"title": "HTML",
"x-schema-form": {
"type": "html",
"quillOptions": {
"modules": {
"toolbar": [["bold", "italic", "clean", "softhyphen"]]
},
"formats": ["bold", "italic"],
"placeholder": "HTML"
}
}
}
}
}

We've extended the Quill editor with an optional softhyphen button you can add to the toolbar, to easily give hints about hyphenation.

datetime

This format enables a date picker and time field. The returned value will be formatted as an ISO 8601 string.

{
"properties": {
"publishAt": {
"type": "string",
"x-schema-form": {
"type": "datetime"
}
}
}
}

relatedItem

Use this format to enable content import dialog. This is specifically useful for adding related content to an item. You need to also configure a "Related item source", and optionally select the relevant related item sources in the product config.

{
"chasers": {
"type": "array",
"items": {
"type": "object",
"format": "relatedItem",
"properties": {
"text": {
"type": "string"
},
"url": {
"type": "string"
}
}
}
}
}

Custom configuration properties

Every custom configuration must be placed in the x-dredition property that should be defined as a top level property.

{
"type": "object",
"x-dredition": {
"someCustomConfig": "someValue"
},
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string"
},
"title": {
"type": "string"
}
},
"required": ["id", "type", "title"]
}

Edition Item Type Color

Use this to enable a custom color to be displayed on the edition item for that type in the frontend.

"x-dredition": {
"itemTypeBackgroundColor": "#f00"
}

Edition Item/Group Title Template

Use this to override the title displayed on edition items/groups. This could be very useful when you want to show two fields as the title. Note that you could also access deep properties like {{image.id}}and arrays {{images[0].id}}.

"x-dredition": {
"titleTemplate": "{{type}} : {{title}}"
}

Edition Item Placeholder

Use this to enable an item to be rendered as a placeholder in the frontend. A placeholder will have a different layout than regular items and only the item title will be displayed on it.

"x-dredition": {
"isPlaceholder": true
}

Product Import Type

Use this to enable A/B flow in the import feeds for this product when manually importing items. In flow-mode "A" items will be inserted as normal items into the item list, and they only modify the position of other "A" items. "B" items are inserted as groups, and when inserted they will only modify the position of other "B" items.

"x-dredition": {
"flowImport": true,
"flowField": "priority"
}

flowImport must be set to true to enable this feature. flowField specifies which field will toggle the item's A/B status, this must be a boolean field.

Delete Protection

Use this to prevent accidentally deleting an item from the edition. This is especially relevant for placeholders, but may be enabled for any item type.

"x-dredition": {
"deleteProtectionField": "protected"
},
"properties": {
"protected": {
"type": "boolean",
"title": "Prevent deleting this item?"
}
}