Hey my fellow developers,
Here’s the last blog post in the Standard Banking Demo series. After a deep dive into the microservices and micro frontends, we are now discovering the CMS components that make up this banking application and how we can manage our content to provide a great user experience.
Content Management: The Standard Demo Banner
Compose Components to Display a Banner
In the Standard Banking Demo, banners are defined to display pieces of content in pages rendered in a modern website style.
We will use this content type to explain how an Entando application leverages CMS components to build composable applications.
CMS component architecture
To manage content, we need to know how to define it (the Type), how to display it (the Model), and how to create a new instance (the Content).
Content Type
The ContentType defines the attributes available when adding a new instance of content. The type is defined by a name and a code and defines fields and rules to apply.
Each attribute has a code, a name, and a type. Attributes can be mandatory and be used to filter content.
Content Template
The Content Template defines how a ContentType is displayed. A ContentType can be displayed in different ways by creating additional Content Templates.
Content
The Content refers to a piece (or instance) of content and is based on a ContentType. The Content defines the values of the attributes for a ContentType.
Assets
A collection of assets you can use in a piece of content and share across multiple content entries, e.g. an image.
When a page is designed, the Content widget is configured to render a piece of content based on the Content Template.
Compose components in the App Builder
In the Page Designer, this content is placed in a frame as a “Content” widget. Here in red, the Content widget is used to display the main banner on the homepage.
This widget is configured to display the content you want to display along with the desired content template.
In this case, the Home SD page contains multiple Content widgets that all use the same content type (SDB).
Although the Content Type is the same, each section is rendered differently by choosing different Content Templates. There is a content template for displaying the main banner, another for displaying a light background, and another to render an accordion inside the banner.
The content to display can be selected from the Settings menu in the kebab menu.
Then we can select the content we want to display (displayed below in blue) and the template we want to use for this instance of content (in orange).
Only a template linked to the same content type can be used.
All of the CMS components are defined as code in the Standard Banking Demo.
CMS Components as Code
The Standard Demo Banner: Content Type
code: SDB
name: Standard Demo Banners
status: '0'
attributes:
- code: title
type: Text
names:
en: title
roles: []
disablingCodes: []
mandatory: true
listFilter: false
indexable: true
validationRules:
minLength: null
maxLength: null
regex: null
rangeStartString: null
rangeEndString: null
rangeStartStringAttribute: null
rangeEndStringAttribute: null
equalString: null
equalStringAttribute: null
rangeStartDate: null
rangeEndDate: null
rangeStartDateAttribute: null
rangeEndDateAttribute: null
equalDate: null
equalDateAttribute: null
rangeStartNumber: null
rangeStartNumberAttribute: null
rangeEndNumber: null
rangeEndNumberAttribute: null
equalNumber: null
equalNumberAttribute: null
ognlValidation: null
...
The Standard Demo Banner: Template
The template references the content type through the contentType field: SDB
id: 1
contentType: SDB
description: Main Banner
contentShape: |-
<div class="main-banner">
<div class="row">
<div class="col-lg-6 col-xs-12 main-banner-center">
<div class="text-wrapper">
<h1> $content.title.text</h1>
<p>$content.subtitle.text</p>
</div>
</div>
</div>
</div>
The Standard Demo Banner: Content
The content references the content type through the typeCode field: SDB
id: SDB37
typeCode: SDB
description: main-banner
mainGroup: free
status: PUBLIC
attributes:
- code: title
value: null
values:
en: A Better Way to Bank
elements: []
compositeelements: []
listelements: {}
...
The Standard Demo Homepage
The page template defines the widgets on the page like the Content widget: code: content_viewer
The Content widget is then configured to display the top banner using the contentId SDB37
and the template 'modelId: 1'
.
code: homepagesd
parentCode: homepage
titles:
en: Home SD
it: Home SD
pageModel: seed_home
ownerGroup: free
joinGroups: []
displayedInMenu: true
seo: false
charset: utf8
status: published
widgets:
- code: Brand-Logo
config: null
pos: 0
- code: Login_buttons
config: null
pos: 2
- code: content_viewer
config:
contentDescription: main-banner
modelId: '1'
ownerGroup: free
contentId: SDB37
joinGroups: '[]'
Conclusion
This series is ending with the CMS Standard Banking Demo overview, it provides a working example of how traditional micro frontends can be composed alongside CMS components. The banner example is great to understand how a given content type can be used in multiple ways to render different content using the same attributes and improve your capacity to deliver content quickly and easily.
User-editable content can also be exported using the bundle export/import feature and managed as code along with micro frontends and microservices across multiple environments or clusters.
Now it’s time to play with the Standard Banking Demo. Be sure to follow our documentation and reach out on the Entando forum for feedback.
Bonus: The Standard Banking demo video
Top comments (0)