Component Models

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 layouts. 

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 Layout 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 layout 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