Content Architecture
Component Models
Component driven, re-usable building blocks for your pages
What are Component Models and why are they important?
As a Developer you’ll be tasked with creating and defining the components in Agility that will be used to create the Architecture of your pages.
A Component Model is like a Content Model in the sense that they can have fields that relate to other content but will instead represent a functional UI component. Ultimately, an Editor should be able to add a Component Model to a Page and it should render some UI and display content based on the fields of the component or its related content.
Each Component will need corresponding code within your site. If Components are not defined by Developers and used by Editors, there will be nothing to output to your site.
What can be created with Component Models?
You can create anything from a simple, structured piece of text to a more complex item that has added functionality and integrates with other platforms and systems. A common example would be an Image Slider which could contain fields for:
- Number of Slides => [Number]
- Rotation Speed => [Number]
- Slides => [Linked Content Reference to Slides]
At the end of the day, the possibilities are endless and depend entirely on the need and structure of your site! We recommend designing your page with a tool like Figma and then building out the Models and Components you and your Editors will need.
How to Create a Component Model
1. Navigate to the Models section of your Agility Instance and then click Component Models
2. Click New Component Model
3. Give the Component a Name and then click Add Component
4. You’ll then be taken to a page with your Blank Component Model where you can drag and drop Fields or create new ones.
There are many types of fields you can add to your Component Model.
All fields have a Field Label and Description and have the possibility of being Required and or Hidden. Depending on the selected field type, you may have other options such as input validation and more.
What's Next?
Once you've created your Component Model with some fields, Editors can start adding the Component to pages.
Handling Component Rendering
In order for your Component Model to actually render anything in your digital solution, you'll need to add a corresponding front-end component that will be responsible for outputting templated HTML with your field properties.
Further Reading
In Agility CMS, Page Modules are functional components Editors use to compose what type of content is on each page and in what order they appear.
Page modules in Agility CMS Select an Image
About Page Modules
Page Modules are similar to Content Models in that they have fields and can relate to other content, but a Page Module is meant to represent a functional UI component that will ultimately render on a website or app.
An editor should be able to add a Page Module to a page and it should render some UI and display content based on the fields on the module or its related content.
As a developer, you define what Page Modules are available in the CMS and what fields they consist of. Each Module defined within Agility CMS should have a corresponding code file within your site or application.
If modules are not defined, or the editor do not add modules to pages, then there won't be anything to output on your pages.
You can create anything from a simple, structured piece of text, a more complex item, or have any functionality and integrate with other platforms and systems.
For example, you may have a Page Module called Image Slider that contains the following fields:
Number of Slides => [Number]
Rotation Speed => [Number]
Slides => [Linked Content Reference to Slides]
A property of that module allows a set number of images to display and you can control the rotation speed. Then you pull in content from another Content List for the images and text.
Create modules in Agility CMS Select an Image
How to Create a Page Module
1. Navigate to Models > Page Modules.
Navigating to modules in Agility CMS Select an Image
2. Click on Add +.
Adding page modules in Agility CMS Select an Image
3. Enter the Title and Description of the Page Module.
Entering page titles and descriptions in Agility CMS Select an Image
4. Click Save to create your Page Module.
Now you are able to add Fields to your Page Module. To start adding fields click the + Add a Field button.
Adding fields to page modules in Agility CMS Select an Image
There many different types of fields you can add to your Page Module.
All fields have a Field Label and Description and have the option of being Required and or Hidden. Depending on the selected field type, you may have other options such as input validation and more.
Next Steps
Once you've created your Page Module with some fields, editors can now start to add this Page Module to pages.
Handle Module RenderingIn order for your Page Module to actually render anything in your digital solution, you'll need to add a corresponding frontend component that will be responsible for outputting templated HTML with your field properties.
How to Add a Page Module to a Page
To add a Page Module to your Page, simply click on the + button in the Content Zone where you wish to add the module.
How to add a module to a page in Agility CMS Select an Image
Clicking the + button will open a flyout with the list of the page modules available. Please note that most of the page modules found within your instance are custom modules created by the developer of your digital solution.
Adding modules on a page with Agility CMS Select an Image