The Components That Make Up An Entando Application - CMS Components
Tags: cms, entando, components
Published: 2021-08-12 09:55:49

Hey my fellow developers,

Here we are for the second episode of the Entando component sub-series. After having discovered components to manage backend services, micro frontends and code fragments, we will learn more about the content management components.

This blog post is the second of a series that dives into details about components including how they can be defined in a bundle, how they can be deployed to an Entando Application, how they are configured via Entando App Builder, and how they are rendered in your application.

## Content Management
### CMS Asset

CMS Assets allow you to reference static assets inside content.


``` yaml
correlationCode: '17'
type: image
name: 113f4437cac3b3f3d4db7229f12287a4_d3.png
description: 113f4437cac3b3f3d4db7229f12287a4_d3.png
group: free
categories: []
```




* **correlationCode** is the unique asset ID to use when you want to use the asset into a content component.
* **type** the asset type.
* **name** the filename used for this asset, should match the binary filename.
* **description** a description of this asset.
* **group** the owner group of this asset.
* **categories** the categories the asset belongs to.

An asset can be used in a content descriptor to link it to the content using the “correlationCode”.


``` yaml
- code: img
 value: null
 values:
   en:
     correlationCode: '29'
     name: dashboard.png
```

![Screenshot_20210601_at_17.32.47_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r19sejhoyin9h48awwv9.png)

_The assets are available under the menu Content > Assets in the app-builder_


### Content Type

A content type is the data structure for a type of content. All content must have a content type.


``` yaml
code: SDN
name: Standard Demo News
status: '0'
attributes:
 - code: title
   type: Text
   names:
     en: title
   roles: []
   disablingCodes: []
   mandatory: true
   listFilter: true
   indexable: true
   validationRules:
     minLength: null
     maxLength: null
[...]
```




* **code** the unique content type code, must be 3 characters in upper case.
* **name** the content type name.
* **attributes** a list of attributes the future content will have access to.

![Screenshot_20210601_at_18.46.37_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1dqm8pq4h8fak6coia0.png) 


_A content type can be edited in App Builder through Content > Types > Edit Content Type_


### Content Template

A content template defines a layout and styling for a given content type. One content type can have multiple content templates for different layouts of the same content. 


``` html
id: 5
contentType: SDB
description: Banner  dark green background
contentShape: |-
 <div class="main-banner-darkgreen ">
     <div class="row">
         <div class="col-lg-6 col-xs-12">
             <div class="text-wrapper">
                 <h1>$content.title.text</h1>
                 <p>$content.subtitle.text</p>
             </div>
         </div>
         <div class="col-lg-6 col-xs-12 image-center">
             <div class="centered-image">
                 <img src="$content.img.getImagePath('0')" alt="$content.img.text" />
             </div>
         </div>
     </div>
 </div>
```




* **id** the unique id of the content template.
* **contentType** the unique id of the content type type code this template uses.
* **description** a short description of this content type.
* **contentShape** the HTML code to use to render the content. The content object can be accessed by using the “$content” keyword.

 
![Screenshot_20210601_at_18.18.02_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4umekd4tjhuac7nxg5b.png)
 


_Templates can be edited in the Content > Templates > Edit content template in the app builder_


### Content

A content is a piece of information that can be rendered in your application. Content supports internationalization for the languages deployed in your application. 


``` yaml
id: SDB28
typeCode: SDB
description: Banner with dark green background
mainGroup: free
status: PUBLIC
attributes:
 - code: title
   value: null
   values:
     en: Financial Health Dashboard
   elements: []
   compositeelements: []
   listelements: {}
 - code: subtitle
   value: null
   values:
     en: 'Take charge of your finances. Stay informed of your cash and savings, and know where your money is going so you can invest your money where you want it to go. Seed automatically organizes the data from all of your Seed accounts so you can see how much and where your money is being spent.'
   elements: []
   compositeelements: []
   listelements: {}
 - code: descr
   value: null
   values: {}
   elements: []
   compositeelements: []
   listelements: {}
 - code: img
   value: null
   values:
     en:
       correlationCode: '29'
       name: dashboard.png
   elements: []
   compositeelements: []
   listelements: {}
 - code: link
   value: null
   values: {}
   elements: []
   compositeelements: []
   listelements: {}
 - code: accord
   value: null
   values: {}
   elements: []
   compositeelements: []
   listelements: {}
```




* **id** is the unique content ID.
* **typeCode** the content type code the content is from.
* **description** a quick description of this content.
* **mainGroup** the owner group of this asset.
* **status** unpublished if the component is not available in your application.
* **attributes** is an array of attributes inherited from the content type and for which the content needs to set the values.


![Screenshot_20210601_at_18.23.02_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k3l9iepqq3r8t4t2ca0.png)
 


_Content can be edited in the Content > Management > Edit Content menu in the app builder_


![Screenshot_20210601_at_18.38.15_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in4whs4nk1ex7z24y99g.png)
 


_The content in action in a page of the standard demo bundle_


### Categories

A category groups content into business categories.


``` yaml
- code: benefits
 parentCode: home
 titles:
   en: Benefits
   it: Benefits
- code: customer_service
 parentCode: home
 titles:
   en: Customer service
   it: Customer service
```




* **code** is the unique code of the category
* **parentCode** identifies the parent page in the page hierarchy.
* **titles** contains a value for each enabled language


![Screenshot_20210601_at_19.05.39_d0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsgftcu1qfaii115pjk2.png) 


_Categories can be displayed in the Content > Categories in the app builder_




## What’s next

Now we have discovered the bundle definitions for Entando components to deploy and install CMS content, the next blog post will be about the page management, i18n and user management you can manage in a bundle.