--- canonical: https://amplience.com/developers/docs/start/model/ title: 'Step 1: Model' description: The 1st step in our Amplience developer getting started is to create a content type for an example banner, that can be used to create content in the next step. how_to: name: "Model a banner content type in Dynamic Content" description: "Create a content type schema for a banner using the schema editor, add properties for headline, strapline, image and call to action, then register it as a content type." total_time: "PT20M" steps: - name: "Create a new schema" text: "Open the schema editor, click Create schema, enter a schema ID and choose Content Type as the validation type." anchor: "create-a-new-schema" image: "https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-2?w=1200&h=630" - name: "Add the headline and subheading" text: "Add headline and strapline as string properties using the Add property menu in the schema editor." anchor: "add-the-headline-and-subheading" image: "https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-3?w=1200&h=630" - name: "Add the image" text: "Add a background property of type object, containing an alt text string property and an image property using the image-link reference." anchor: "add-the-image" image: "https://cdn.media.amplience.net/i/ampproduct/get-started-model-7?w=1200&h=630" - name: "Add the call to action" text: "Add a link property of type object containing url and title string properties, then save the completed schema." anchor: "add-the-call-to-action" image: "https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-6?w=1200&h=630" - name: "Register the content type" text: "Choose Register as content type from the schema editor save menu, give it a label, choose which repositories to enable it on, and click Save." anchor: "register-the-content-type" image: "https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-2?w=1200&h=630" audience: Developer image: https://cdn.media.amplience.net/i/ampproduct/content-model-wire-lm-v3?w=1200&h=630 image_width: 1200 image_height: 630 date_published: 2022-06-23 date_modified: 2023-12-06 --- # Step 1: Model The first step when creating your website or app is content modeling- where the wireframes and requirements that make up your user experience are converted into a content model. This model is then used to create a content type. The content type is the blueprint for the banners, carousels, blog posts and other elements from which your users create the content that is published and then consumed from the CMS. > **Info:** If you're in a hurry and just want to see the code, or you [don't have an Amplience account](https://amplience.com/developers/docs/dev-tools/developer-trial) yet, you can go straight to [Step 4: consuming the content](https://amplience.com/developers/docs/start/consume). Or continue reading to learn about creating and registering a content type using the schema editor ## What we're building In this tutorial we use the example of a simple banner shown in the wireframe below. ![A simple banner wireframe](https://cdn.media.amplience.net/i/ampproduct/content-model-wire-lm-v3?w=1200&fmt=png&) From the wireframe you can break down the banner into the elements from which the content type is created. 1. The heading. This is a text item. 2. The sub-heading. This is also a text item. 3. The call to action text. 4. The call to action URL that will be launched when the user clicks. 5. The background. This is an image item. In the rest of this step we'll take you step by step through creating the content type to represent the banner. Then you'll register the content type so you can use it to create some content. ## Creating the content type The data model for a content type is defined by its schema. With the schema editor, creating a schema is easy. To create the banner schema, open the schema window by choosing "Content type schema" from the development menu and clicking the "Create schema" button. You now have two choices: create your own schema or use one of the schema examples. ![You can choose to create a schema from scratch or use one of our examples](https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-1?w=1880&fmt=png 'You can choose to create a schema from scratch or use one of our examples') > **Tip:** If you're short on time and don't want to build the schema from scratch, you can choose the banner from our schema examples. > > - Choose the "Tutorial banner" from the tutorials section on the left of the "Choose example schema" window and click "Use this schema". > > - From the "Name your schema" window, keep the default values and choose "Create schema". > > The banner schema will be added to your hub and opened in the schema editor. > > You can now skip to the [register the schema as a content type](#register-the-content-type) section on this page. ### Create a new schema - Click "Code from scratch" from the "Create content type schema" window. - Enter the schema ID. This should be URL that is unique within the hub. In this example we'll use `https://schema-examples.com/tutorial-banner` 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 "Create schema" button to open the schema editor window. ![Creating the banner content type schema](https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-2?w=1880&fmt=png 'Creating the banner content type schema') ### Add the headline and subheading In the schema editor choose each property to add from the "Add property" menu. - Add `headline` and `strapline` properties as strings. To add these properties choose "Text" as the property type and add each one in turn. ![Adding text properties](https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-3?w=1880&fmt=png '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, if you choose, the minimum and maximum length. The `title` is shown as the title for the property on the content form, while the `description` provides additional information to the user about what the property is used for. When you've added the two properties, the properties section of your schema should look like: ```json "properties":{ "headline":{ "title":"Headline", "description":"The main title of this banner", "type":"string" }, "strapline":{ "title":"Strapline", "description":"The subtitle of this banner", "type":"string" } } ``` Click the preview icon (immediately to the right of the "Add property" menu to see how these properties will look in the content form. ![Previewing the content form](https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-4?w=1880&fmt=png 'Previewing the content form') ### Add the image In the banner, the background image consists of the image itself and some alt text. This is represented by a property of type `object`. - To add the background property, choose "Object" from the "Add property" menu. Edit the default values, changing the property name to `background` and the title to something like "Background image". - To add the alt text, click to the right of `"properties": {` and choose "Text" from the "Add property" menu. Change the property name to `alt` and the title to "Alternative text" or whatever you choose. You can remove `minLength` and `maxLength`. Set the description to something that explains what the alt text is. - Finally you need to add the image itself. Click to the right of the closing "}" of the alt property and choose "Image" from the "Add property" menu. An image chooser property will be added to the schema window. When this is displayed in the content form the user will be able to choose an image from the media library. - Change the property name to `image`. With the `background` property added, the properties section of your schema should now look like: ```json "properties":{ "headline":{ "title":"Headline", "description":"The main title of this banner", "type":"string" }, "strapline":{ "title":"Strapline", "description":"The subtitle of this banner", "type":"string" }, "background":{ "title":"Background image", "type":"object", "properties":{ "alt":{ "title":"Alternative text", "description":"The image alt text", "type":"string" }, "image":{ "title":"Background image", "allOf":[ { "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" } ] } } } } ``` 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 image chooser is now shown in the content form preview](https://cdn.media.amplience.net/i/ampproduct/get-started-model-7?w=1880&fmt=png 'The image chooser is now shown in the content form preview') ### Add the call to action As with the `background` property that you just added, the call to action is represented as a property of type `object`. Within the object will be the call to action URL and title. - Choose "Object" from the "Add property" menu and add a property called `link`. - Add two string properties within `link`: `url` and `title`. You don't need `minLength` or `maxLength`. - When all the properties have been added and the schema is valid, click "Save". With the `link` added, your full schema should now look like: ```json { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "https://schema-examples.com/tutorial-banner", "title": "Example Banner", "description": "Banner used for code examples in developer portal", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content" } ], "type": "object", "properties": { "headline": { "title": "Headline", "description": "The main title of this banner", "type": "string" }, "strapline": { "title": "Strapline", "description": "The subtitle of this banner", "type": "string" }, "background": { "type": "object", "title": "Background image", "properties": { "alt": { "title": "Alternative text", "description": "Alternative text for the background image", "type": "string" }, "image": { "title": "Image", "description": "The image for the background of this banner", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" } ] } } }, "link": { "type": "object", "title": "Link", "properties": { "url": { "title": "URL", "description": "The url that will be opened when link is clicked", "type": "string" }, "title": { "title": "Title", "description": "Text displayed for the link", "type": "string" } } } }, "propertyOrder": [] } ``` Here's how the completed banner schema looks in the form preview. ![The full banner schema is now shown in the content form preview](https://cdn.media.amplience.net/i/ampproduct/get-started-model-step-6?w=1880&fmt=png 'The full banner schema') Congratulations. The banner schema is now complete. Now you're ready to register the content type so that you can use it to create content. ## Register the content type Before you can create banner content, you first need to register the content type. When you register a content type you can also enrich it with an icon, a card and one or more visualizations. These features make it easier for users to work with content created from this content type. - Choose "Register as content type" from the schema editor's save menu. ![Choose Register as a content type from the schema editor save menu](https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-1?w=1880&fmt=png 'Choose Register as a content type from the schema editor save menu') The content type registration window opens. - Give the content type a label. This will help identify the content type when you are creating content. - You also need to choose the repositories on which the content type is enabled. Once a content type is enabled on a repository it can be used to created content in that repository. ![The content type registration window](https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-2?w=1880&fmt=png 'The content type registration window') - Click "Save" to register the content type. > **Info:** The following steps are optional. You can move on to the next step: [creating the content](https://amplience.com/developers/docs/start/create). ## Optional steps ### Add an icon The content type icon helps to identify a content type when you're choosing what content to create. Typically you'll have many different types of content: pages, blogs, sliders, for example and using an icon makes it faster to find what you need. You can choose not to add an icon, but it makes it easier for your users. - In the box labelled "Content type icon" click the "+" button. Choose an icon from one of our collections. The banner icon from the "Potter" collection is a good choice. You can also add your own icon by specifying an image URL. - Click "Save" when you've chosen an icon. ### Choose a content card A content card is a visual representation of a piece of content and makes it easy to identify in the content library. For the banner you don't need to include the headline, subheading and call to action on the card, the best way to identify a piece of content is using the background image. - In the box labelled "content type card" click the "+" icon. - The "Choose content type card" window is displayed. From here you can choose from our built in cards. Choose the "Photo" card. ![Setting up a content card](https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-4?w=1880&fmt=png 'Setting up a content card') - In the "card parameters" section you need to enter the properties that will provide the data to be displayed on the card. - For the image enter `/background/image`. This property will be used to display the image on the card. - For the alt text enter `/background/alt`. If the image cannot be displayed, the alt text will be shown on the card instead. When you've configured the card click "Save". The icon and card are now configured. ![The icon and card are now configured](https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-5?w=1880&fmt=png 'The icon and card are now configured') ### Configure a visualization The final thing you need to configure is a visualization. This allows users to preview content while they work on it and before it's live on a website or app. For the banner content type we've created a realtime visualization that will reflect changes as the user makes them, without the content having to be saved each time. - Click the "Visualizations" tab at the top of the content type registration window. Choose the "Add new" button. ![Adding a visualization](https://cdn.media.amplience.net/i/ampproduct/get-started-model-register-7?w=1880&fmt=png 'Adding a visualization') - Give the visualization a name. The example below uses "Realtime viz" but you can call it anything you want. You can have multiple visualizations, so the label helps identify each one. - For the visualization URL enter the URL of the visualization we've created for the banner content type. ``` https://amp-product.s3.eu-west-1.amazonaws.com/doc-examples/visualization/realtimetutorialbannerviz.html?api={{vse.domain}}&content={{content.sys.id}}&realtime=true ``` A visualization is a web app which renders a single piece of content within the content editing interface. The parameters at the end of the URL provide additional information used to preview the content. You can find out much more in our [visualization guide](https://amplience.com/developers/docs/dev-tools/guides-tutorials/visualizations). Once the visualization is configured, click "Save". The content type is now assigned an icon, card and visualization. Now that the banner content type is registered, you're ready to use it to move to the next step and [create some content](https://amplience.com/developers/docs/start/create).