OctoberCMS – How Component Works?

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.

How To Create Plugin In OctoberCMS Development Service



As a name suggest “Plugin” is a software add-on (i.e. Set of code to achieve some specific functionality) that is installed
onto a program, enabling it to perform additional features.

In OctoberCMS Plugins are the foundation for adding new features to the CMS by extending it.


  1. To enable third-party developers to create abilities which extend an application
  2. To support easily adding new features
  3. To reduce the size of an application
  4. To separate source code from an application

To create new plugin for OctoberCMS you must have to follow below steps:

  • Registration
  • Directory Structure
  • Registration file
  • Supported methods
  • Basic plugin information
  • Routing and initialization
  • Navigation menus
  • Version History
  • Plugin version file
  • Extending with events


The registration process allows plugins to declare their features such as components or back-end menus and pages.
Some examples of what a plugin can do:

  • Define components.
  • Define user permissions.
  • Add settings pages, menu items, lists and forms.
  • Create database table structures and seed data.
  • Alter functionality of the core or other plugins.
  • Provide classes, backend controllers, views, assets, and other files.

Directory structure: Plugins reside in the /plugins subdirectory of the application directory. An example of a plugin
directory structure:

plugins/ acme/ <=== Author name blog/ <=== Plugin name classes/ components/ controllers/ models/ updates/ … Plugin.php <=== Plugin registration file

Registration file: The Plugin.php file, called the Plugin registration file, is an initialization script that declares a plugin’s
core functions and information. Registration files can provide the following:

  • Information about the plugin, its name, and author.
  • Registration methods for extending the CMS.

Registration scripts should use the plugin namespace. The registration script should define a class with the name Plugin
that extends the \System\Classes\PluginBase class. The only required method of the plugin registration class is plug-in details.
An example Plugin registration file:

namespace Acme\Blog;   class Plugin extends \System\Classes\PluginBase { public function pluginDetails() { return [ ‘name’ => ‘Blog Plugin’, ‘description’ => ‘Provides some really cool blog features.’, ‘author’ => ‘ACME Corporation’, ‘icon’ => ‘icon-leaf’ ]; }   public function registerComponents() { return [ ‘Acme\Blog\Components\Post’ => ‘blogPost’ ]; } }

Supported methods: OctoberCMS provides list of available methods which you can define/use in your plugin

Method Name Description
pluginDetails() Returns information about the plugin.
register() Register method, called when the plugin is first registered.
boot() boot method, called right before the request route.
registerMarkupTags() Registers additional markup tags that can be used in the CMS.
registerComponents() Registers any front-end components used by this plugin.
registerNavigation() Registers back-end navigation menu items for this plugin.
registerPermissions() Registers any back-end permissions used by this plugin.
registerSettings() Registers any back-end configuration links used by this plugin.
registerFormWidgets() Registers any back-end form widgets supplied by this plugin.
registerReportWidgets() Registers any back-end report widgets, including the dashboard widgets.
registerListColumnTypes() Registers any custom list column types supplied by this plugin.
registerMailTemplates() Registers any mail view templates supplied by this plugin.
registerSchedule() registers scheduled tasks that are executed on a regular basis.

Basic plugin information: The pluginDetails is a required method of the plugin registration class.
It should return an array containing the following keys:

Key Description
name the plugin name, required.
description the plugin description, required.
author the plugin author name, required.
icon A name of the plugin icon. The full list of available icons can be found in the UI documentation. Any icon names provided by this font are valid, for example icon-glass, icon-music.
iconSvg An SVG icon to be used in place of the standard icon, optional. The SVG icon should be a rectangle and can support colors.
homepage A link to the author’s website address, optional.

Routing and initialization: Plugin registration files can contain two methods boot and register. With these methods,
you can do anything you like, like register routes or attach handlers to events.

  • register: It is called immediately when the plugin is registered.
  • boot: It is called right before a request is routed.

So if your actions rely on another plugin, you should use the boot method. For example, inside the boot method you
can extend models:

public function boot() { User::extend(function($model) { $model->hasOne[‘author’] = [‘Acme\Blog\Models\Author’]; }); }

Plugins can also supply a file named routes.php that contain custom routing logic, as defined in the router service.
For example:

Route::group([‘prefix’ => ‘api_acme_blog’], function() {   Route::get(‘cleanup_posts’, function(){ return Posts::cleanUp(); });   });

Navigation menus: Plugins can extend the back-end navigation menus by overriding the registerNavigation method
of the Plugin registration class. This section shows you how to add menu items to the back-end navigation area.

An example of registering a top-level navigation menu item with two sub-menu items:

public function registerNavigation() { return [ ‘blog’ => [ ‘label’ => ‘Blog’, ‘url’ => Backend::url(‘acme/blog/posts’), ‘icon’ => ‘icon-pencil’, ‘permissions’ => [‘acme.blog.*’], ‘order’ => 500,   ‘sideMenu’ => [ ‘posts’ => [ ‘label’ => ‘Posts’, ‘icon’ => ‘icon-copy’, ‘url’ => Backend::url(‘acme/blog/posts’), ‘permissions’ => [‘acme.blog.access_posts’] ], ‘categories’ => [ ‘label’ => ‘Categories’, ‘icon’ => ‘icon-copy’, ‘url’ => Backend::url(‘acme/blog/categories’), ‘permissions’ => [‘acme.blog.access_categories’] ] ] ] ]; }

When you register the back-end navigation you can use localization strings for the label values. Back-end navigation canalso be controlled by the permissions values and correspond to defined back-end user permissions.

Version History: It is good practice for plugins to maintain a change log that documents any changes or improvements inthe code. In addition to writing notes about changes, this process has the useful ability to execute migration and seed files in their correct order.

The change log is stored in a YAML file called version.yaml inside the /updates directory of a plugin, which co-exists
with migration and seed files.

This example displays a typical plugin updates directory structure :

plugins/ author/ myplugin/ updates/ <=== Updates directory version.yaml <=== Plugin version file create_tables.php <=== Database scripts seed_the_database.php <=== Migration file create_another_table.php <=== Migration file

Plugin version file:

1.0.1: First version
1.0.2: Second version
1.0.3: Third version
1.1.0: !!! Important update

  • Update with a migration and seed
  • Create_tables.php
  • seed_the_database.php


As you can see above, there should be a key that represents the version number followed by the update message,
which is either a string or an array containing the update message.
Read More:- https://goo.gl/HKSrj6

How To Implement Multiselect Tag Input In Ionic App Development

Implement Multiselect Tag Input

Ionic tagging is most beautiful textbox (component) in the application. Basically, this component is used for filtering the data. In E-commerce application where the user needs to filter data from a large number of categories, we can use this. Some of the examples are Flipkart, Amazon, Snapdeal etc.

The Tagging component looks like autocomplete textbox but the major difference is that we can’t  select multiple tags in autocomplete textbox. Here, we can select multiple types. The ideal example is the mailbox where we need to send an email to more than one person at that time we can use this.

Ionic (Hybrid App Development) is providing such facility that we can integrate one simple plugin in the application for fulfilling the tagging feature need. The name of the plugin is ui-select2. There is one more plugin using which gives similar functionality named Tag Input.

Installation Methods: Below are the two methods for installing above mentioned plugins.

    $ npm install ui-select
    $ npm install ng-tags-input --save

    $ bower install angular-ui-select 
    $ bower install ng-tag-input --save 

Installation ui-select

Let’s start with first plugin ui-select: After the installation of plugin, please import js files using below mentioned code in index.html

<script src="lib/select2/select2.js"></script>
<script src="lib/angular-ui-select2/src/select2.js"></script>
<link rel="stylesheet" type="text/css" href="lib/select2/select2.css">

Now take a field in your view (.html) file.

<input type="hidden" ui-select2="select2Options" ng-model="listData.list_of_string">

Review the attribute


It will empower you to get the multiple values in your text field instead of comma separated list you will have tagging kind of look and feel. Once accessed using model value in the controller you will get an array instead of comma separated string value. The look and feel of input tags are because of CSS you have imported in the index.html file. You can always override that CSS by using your own scss in your application to match it with your application theme. You can also create new tags as well while entering non-existing data in the field and just hit enter or GO button from the device.

Js File in controller

Now, as we got all the required libraries with us we need to start coding and for that first, we need to add the dependency in the controller file using below mentioned code.

angular.module('myModule', ['ui.select']);

You can always use strings of tags or bind an array to your tags. But we suggest you to go with Tags as it will give you the power of setting ids to each element of the array so that you can later refer it easily.

$scope.list_of_string_data= {

 $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
Here, We will create object store in tag in input tags.
Installation ui-tag-input (“tag input”) Now let’s talk about another plugin ui-tag-input
After the installation of plugin, please import js files using below-mentioned code in index.html
<script src="angular.js"></script>
<script src="ng-tags-input.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.css">
 Now take a field in your view (.html) file.
<tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
 <p>Model: {{tags}}</p>

The Plugin is rich enough to provide its own directive for tagging facility.Js File in controllerNow, as we got all the required libraries with us we need to start coding and for that first, we need to add the dependency in the controller file using below mentionedcode.
angular.module('myModule', ['ngTagsInput'])

app.controller('MainCtrl', function($scope) {
  $scope.tags = [
    { text: 'abc' },
    { text: 'xyz' },
    { text: 'pqr' }
Here, we will create default tag in an input field and tags would be ‘abc’,’XYZ’,’PQR’.
We can access this information through model associated with the field in view inside the controller file. This plugin also provides data in array format like the former one.
Hope this article has helped you to get the tagging feature in your application.