This blog post is the last of a series that dives into details about Entando components, how they can be defined in a bundle and deployed to an Entando Application, how they are configured via Entando App Builder, and how they are rendered in your application.
Hey my fellow developers,
Here we are for the third episode of the Entando component sub-series. After having discovered CMS content, we will learn more about how to manage pages, user groups and i18n components.
This blog post is the last 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.
This blog post is part of the Entando bundle series:
Page Template
A page template defines a default page configuration that is assigned to an instance of a page. Page templates can be a standard 2 column layout or can be customized to meet any design. The template combines frame configuration and HTML template rendering with Freemarker.
code: seed_home
description: Seed homepage
configuration:
frames:
- pos: 0
description: brand
mainFrame: false
sketch:
x1: 0
y1: 0
x2: 1
y2: 0
- pos: 1
description: navbar
mainFrame: false
sketch:
x1: 2
y1: 0
x2: 7
y2: 0
- pos: 2
description: login widget
mainFrame: false
sketch:
x1: 8
y1: 0
x2: 9
y2: 0
- pos: 3
description: empty space
mainFrame: false
sketch:
x1: 10
y1: 0
x2: 11
y2: 0
[...]
templatePath: seed_home.ftl
<#assign wp=JspTaglibs["/aps-core"]><#assign c=JspTaglibs["http://java.sun.com/jsp/jstl/core"]>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><@wp.currentPage param="title" /> - <@wp.i18n key="STANDARD_DEMO" /></title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="<@wp.info key="systemParam" paramName="applicationBaseURL" />favicon.png" type="image/png" />
<@wp.fragment code="insurance_inclusions" escapeXml=false />
</head>
<body>
<@wp.fragment code="keycloak_auth" escapeXml=false/>
<div class="custom-navbar ">
[...]
<@wp.show frame=4 />
<@wp.show frame=5 />
<@wp.show frame=6 />
<@wp.show frame=7 />
<@wp.show frame=8 />
<@wp.show frame=9 />
<@wp.show frame=10 />
<@wp.show frame=11 />
<@wp.show frame=12 />
<@wp.show frame=13 />
</div>
<@wp.fragment code="insurance_inclusions_footer" escapeXml=false />
</body>
</html>
The seedHome freemarker template. The navBar has been removed to make it easier to read
The template can be edited in the app-builder under the menu Pages > Templates > Edit
Page
A page is composed of multiple widgets or UX fragments and defines a position for each of them. A page includes a reference to a page template (“pageModel”) and will inherit everything included in the page template.
code: homepages
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: '[]'
pos: 4
- code: content_viewer
config:
contentDescription: banner light green
modelId: '2'
contentId: SDB34
pos: 5
- code: content_viewer
config:
contentDescription: Banner with inner card
modelId: '3'
contentId: SDB31
pos: 6
- code: content_viewer
config:
contentDescription: Banner with accordion
modelId: '4'
contentId: SDB16
pos: 7
- code: content_viewer
config:
contentDescription: Banner with dark green background
modelId: '5'
contentId: SDB28
pos: 8
- code: content_viewer
config:
contentDescription: Banner with white background
modelId: '6'
contentId: SDB19
pos: 9
- code: footer
config: null
pos: 13
You can design and check the page configuration in the app-builder
The SD homepage is rendered through the bundle configuration we defined
Groups
A group gathers users under a sub-organization and can be used to define the ownership of some components.
- code: bpm_admin
name: Bpm Admin
- code: bpm_appraiser
name: Bpm Appraiser
- code: bpm_broker
name: Bpm Broker
- code: bpm_manager
name: Bpm Manager
Groups can be displayed through the Users > Groups menu in the app builder
Languages
The languages component allows you to enable several languages in your application and to unlock labels for them.
- code: en
description: English
- code: it
description: Italian
Labels
Labels are a key/value system to populate the languages you have enabled in your application.
- key: ADMINISTRATION_BASIC
titles:
en: Normal
it: Normale
- key: ADMINISTRATION_BASIC_GOTO
titles:
en: Go to the administration with normal client
it: Accedi con client normale
- key: ADMINISTRATION_MINT
titles:
en: Advanced
it: Avanzata
- key: ADMINISTRATION_MINT_GOTO
titles:
en: Go to the administration with advanced client
it: Accedi con client avanzato
Languages and labels are available in the Administration > Languages & Labels menu
Now that you know each component you can define a descriptor per component and group them, by convention, under a folder per component type.
For example, the Standard Demo Bundle repository has a large bundle with examples of each of the component types we reviewed in this blog post.
Once you’ve created a descriptor for each of the components they can be referenced by path from the top level descriptor.yaml file (except for static resources).
code: standard-demo
description: Standard Demo bundle
components:
widgets:
- widgets/brand-logo-descriptor.yaml
pageModels:
- pageModels/dashboard-descriptor.yaml
fragments:
- fragments/angular-descriptor.yaml
pages:
- pages/homepagesd-descriptor.yaml
groups:
- groups/groups-descriptor.yaml
contentTypes:
- contentTypes/mpc-descriptor.yaml
contentModels:
- contentModels/main-banner-descriptor.yaml
assets:
- assets/35/35-descriptor.yaml
contents:
- contents/mpc584-descriptor.yaml
plugins:
- plugins/standard-demo-banking-descriptor.yaml
categories:
- categories/categories-descriptor.yaml
labels:
- labels/labels-descriptor.yaml
languages:
- languages/languages-descriptor.yaml
Note the bundle uses technical names instead of official names for some components (e.g. contentModels for Content Type, pageModels for Page Template, assets for CMS Assets…). Please, refer to the documentation or the demo bundle to view the correct labels in the yaml.
In this blog post series we learned about all of the components we can use in our bundles and in our Entando applications. Each component has attributes that allow you to define their behavior and structure. Once you’ve built your components all you have to do is declare them in the main bundle descriptor, that's all! Easy, isn’t it?
See you soon for the next adventures with bundles and components.