Skip to main content

How Component Works?

Saurabh Dhariwal

Saurabh Dhariwal

OctoberCMS - How Component works?

What is Component?

A component is a part or identifiable of larger program or construction of web application. A component is a nontrivial, nearly independent, and replaceable part of a system that fulfills a clear function in the context of a well-defined architecture.

Usually, a component provides a particular function or group of related functions. Components are configurable building elements that can be attached to any page, partial or layout. Components are key features of October. Each component implements some functionality that extends your website.

Why Use?

Components can output HTML markup on a page, but it is not necessary - other important features of components are handling AJAX requests, handling form postbacks and handling the page execution cycle, that allows to inject variables into pages or implement the website security in OctoberCMS Builder.

How to Defines and Use?

If you use the back-end user interface you can add components to your pages, partials, and layouts by clicking the component in the Components panel. If you use a text editor you can attach a component to a page or layout by adding its name to the Configuration section of the template file. The next example demonstrates how to add a demo To-do component to a page:

    title = "Components demonstration"
    url = "/components"

    maxItems = 20

Here, the [demoTodo] defines the component alias with demoTodo name defines when registering the components into registerComponents() method of plugins.php file.

Also, we can initialize component with properties that's defines a component as per we have gives maxItems property. Many components have properties, but it is not a requirement. Some properties are required, and some properties have default values.

Components that provide HTML markup can be rendered on a page with the {% component %} tag, like this:

    {% component 'demoTodo' %}

If you define two components with the same name are assigned to page and layout together, the page components override any properties of the layout components.

Components Alias:

If there are two plugins that register components with the same name, you can attach a component by using its fully qualified class name and assigning it an alias:

[October\Demo\Components\Todo demoTodoAlias]
maxItems = 20

The first parameter in the section is the class name, the second is the component alias name that will be used when attached to the page.

If you specified a component alias you should use it everywhere in the page code when you refer to the component. Like this:

    {% component 'demoTodoAlias' %}

The aliases also allow you to define multiple components of the same class on the same page by using the short name first and an alias second.

    [demoTodo todoA]
    maxItems = 10
    [demoTodo todoB]
    maxItems = 20

Passing variable to Component:

Components can be designed to use variables at the time they are rendered, similar to Partial variables, they can be specified after the component name in the {% component %} tag.

Like this : {% component 'demoTodoAlias' maxItems='7' %}

Hope this helped you to know how components work in OctoberCMS. Here's an informative blog regarding OctoberCMS Plugin Development.