Simple banner example

On this page we'll walk through using the schema editor to create the content type schema for a banner: the tutorial banner used in many of the examples. We'll also show how to register a content type from this schema from which the user can create content.

The banner contains the following properties:

  • A headline and strapline. These are text properties with a maximum length of 255 characters
  • A background image
  • Call to action text
  • A call to action URI

Expand the section below to see the complete content type schema shown in this example.

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "id": "http://example.com/tutorialbanner.json",

    "title": "Title",
    "description": "Description",

    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],

    "type": "object",
    "properties": {
        "headline": {
            "title": "Headline",
            "description": "The banner headline",
            "type": "string",
            "minLength": 0,
            "maxLength": 255
        },
        "strapline": {
            "title": "Strapline",
            "description": "The banner subheading",
            "type": "string",
            "minLength": 0,
            "maxLength": 255
        },
        "background":{
            "title": "Background",
            "description": "Background image",
            "allOf": [
                { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" }
            ]
        },
        "calltoactiontext": {
            "title": "Calltoactiontext",
            "description": "Text for the call to action",
            "type": "string",
            "minLength": 0,
            "maxLength": 255
        },
        "calltoactionurl": {
            "title": "Calltoactionurl",
            "description": "The URL that will open when the user clicks",
            "type": "string",
            "format":"uri",
            "minLength": 0,
            "maxLength": 255
        }

    },
    "propertyOrder": ["headline", "strapline", "background", "calltoactiontext", "calltoactionurl"]
}

Creating the banner content type schema

To create the banner schema, open the content type schema window by choosing "Content type schema" from the development menu and clicking the "Create schema" button.

Enter the schema ID. This should be URL that is unique within the hub. In this example we'll use http://example.com/tutorialbanner.json but we don't enforce any standard for the schema ID, it just needs to be a URL so that the schema is a valid JSON Schema document. To create the banner schema on your own hub, you can use whatever URL you choose.

From the validation type menu choose "Content Type" to ensure that the validation is applied for a content type schema and click the "Save and open schema" button to open the schema editing window.

Creating the banner content type schema
Creating the banner content type schema

Adding properties

In the schema editor choose each property to add from the "Add property" menu. In the banner example the headline and strapline properties are strings with a maximum length of 255 characters. To add these properties choose "Text" as the property type and add each one in turn.

Adding text properties
Adding text properties

When you add a property to the schema from the "Add property" menu, it will add the property with some default values. For the headline and strapline properties you'll need to change the property name, title, description and the maximum length.

Click the preview icon to see how these properties will look in the content editing form.

Using the content form preview
Using the content form preview

Adding an image

To add the banner's background image property, choose "Image" from the "Add property" menu. An image chooser property will be added to the schema window.

Adding an image property
Adding an image property

Edit the default values, changing the property name to "background".

The background property is an image chooser
The background property is an image chooser

When you preview the content form now, the background image property is shown. This is only a preview, so you can't choose an image from the media library.

The background image property is shown in the content form preview
The background image property is shown in the content form preview

Adding text with a URI format

As with the headline and strapline properties, the call to action property can be added to the schema as a text string. For the call to action URL, we want to ensure that a valid URL is entered and so this needs to be a string with the format of "uri".

To add the call to action URL, choose "Text" from the "Add property" menu and edit the property name, text and description. To specify that the property should be validated as a URI, add a line after "type:string" and type "format":. A menu will be displayed with the available formatting options for the string. Choose "uri" from the list.

Choosing the uri format for the call to action URL
Choosing the uri format for the call to action URL

In the content form preview, you can check that validation for the calltoactionurl property. In the image below you can see that an error is shown when an invalid URL is entered.

The content form preview allows you to check the property validation
The content form preview allows you to check the property validation

When all the properties have been added and the schema is valid, click "Save".

Registering a content type

In order for the banner content type schema to be used, you first have to register a content type. A content type consists of the schema URL, together with a label and optionally an icon, card and one or more visualizations. Content types are what are what the users will use to create content in the production view of the Dynamic Content app.

To register a content type, choose "Content types" from the development menu and click the "Register content type" button.

Choosing to register a content type
Choosing to register a content type

In the register content type window, choose "internal" and click in the "Pick a schema" section. A list of the available schemas will be displayed. Choose the banner that was just created. Give the content type a label that will be displayed to users when they choose a content type to use to create content. In this example we'll use "Simple banner".

Choosing the banner schema URL
Choosing the banner schema URL

Choose the repositories that you want the content type to be associated with. In this case the content type is enabled on the "content" repository. For more details about configuring icons, cards and visualizations, see the registering content types page.

Click "Save" to register the content type.

Saving the content type to register it on the hub
Saving the content type to register it on the hub

In the production view, choose "Create content". The simple banner is now available for users to use to create content.

Choosing the banner content type
Choosing the banner content type

Here's the banner in the content editing window in the production view.

Creating banner content
Creating banner content

For more details about consuming content created using this content type, see consuming content.

results matching ""

    No results matching ""