How to Create A Custom Widget In October CMS?

To create a custom widget in October CMS, follow these steps:

1. Start by logging into the October CMS backend.
2. Navigate to the "CMS" section and click on "Widgets."
3. Click on the "Create New" button to create a new widget.
4. In the "Name" field, provide a unique name for your widget. This will be used to identify it in the backend.
5. In the "Code" field, enter a unique code for your widget. This code should be lowercase and can include underscores.
6. In the "Description" field, provide a brief description of your widget's functionality.
7. In the "Markup" section, you can define the HTML structure and content of your widget. You can use HTML tags and October CMS's templating system to display dynamic data.
8. In the "Fields" section, you can define the configuration fields for your widget. These fields can be used to customize the widget's behavior or appearance. You can define different field types like text, dropdowns, checkboxes, etc.
9. In the "Properties" section, you can define the default values for the fields you created. These values will be used when the widget is first added to a page or layout.
10. In the "Events" section, you can define actions to be triggered when specific events occur, such as when the widget is being rendered or saved.
11. Once you have finished setting up your widget, click on the "Save" button.
12. Your custom widget is now ready to be used. You can add it to any page or layout by going to the "CMS" section, selecting a page or layout, and dragging the widget into the desired location.
13. Customize the widget's configuration fields as needed, and make sure to save the changes.

That's it! You have successfully created a custom widget in October CMS. You can now use and reuse it in your website's pages and layouts as desired.

Best October CMS Hosting Providers in 2024

1

Rating is 5 out of 5

Vultr

• Ultra-fast Intel Core
• High Performance and Cheap Cloud Dedicated Servers
• 1 click install Wordpress
• Low Price and High Quality

Try It Now

2

Rating is 5 out of 5

Digital Ocean

• Active Digital Community
• Simple Control Panel
• Starting from 5$ per month

Try It Now

3

Rating is 5 out of 5

AWS

Try It Now

4

Rating is 5 out of 5

Cloudways

Try It Now

How to create a widget menu item in October CMS?

To create a widget menu item in October CMS, you can follow these steps:

1. Create a widget: First, create a new PHP class for your widget. The class should extend the Cms\Classes\WidgetBase class.

1
2
3
4
5
6
7
8

<?php namespace Vendor\Plugin\Widgets;

use Cms\Classes\WidgetBase;

class MyWidget extends WidgetBase
{
    // ...
}

1. Register the widget: In your plugin's Plugin.php file, register the widget using the registerMarkupTags method. You can do this in the boot() method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

public function boot()
{
    \Cms\Classes\CmsController::extend(function ($controller) {
        $controller->addDynamicMethod('onInjectAssets', function () use ($controller) {
            $controller->theme->registerMarkupTags([
                'widgets' => [
                    'mywidget' => '\Vendor\Plugin\Widgets\MyWidget'
                ]
            ]);
        });
    });
}

1. Add the menu item: In your plugin's Plugin.php file or the plugin's plugin.yaml file, you can define a menu item for your widget.

For Plugin.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

public function registerNavigation()
{
    return [
        'widget' => [
            'label'       => 'Widgets',
            'url'         => Backend::url('vendor/plugin/widgets'),
            'icon'        => 'icon-th',
            'permissions' => ['vendor.plugin.access_widgets'],
            'order'       => 500,
        ]
    ];
}

For plugin.yaml:

1
2
3
4
5
6
7

navigation:
    widget:
        label: 'Widgets'
        url: 'vendor/plugin/widgets'
        icon: 'icon-th'
        permissions: ['vendor.plugin.access_widgets']
        order: 500

Replace vendor/plugin with your plugin's name.

1. Create a controller: Create a new PHP class for handling the menu item's URL. The class should extend the Backend\Classes\Controller class.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<?php namespace Vendor\Plugin\Controllers;

use Backend\Classes\Controller;

class Widgets extends Controller
{
    public function index()
    {
        // Your logic for the widget menu item
        // return $this->renderPartial(...)
    }
}

1. Create a view: Create a view file to display the content of the menu item. By default, October CMS will look for a view file called index.htm in your controller's folder.
2. Test: Open the menu item URL in your backend area to test if the widget menu item is working as expected.

You can now customize the widget menu item further by adding code in the Widgets controller and the associated view file.

How to create a custom widget in October CMS?

To create a custom widget in October CMS, follow these steps:

1. Generate a plugin: Open the command prompt or terminal and navigate to your October CMS installation directory. Run the command php artisan create:plugin AuthorName.PluginName to generate a new plugin.
2. Create the widget: Navigate to the plugin's directory using the command cd plugins/AuthorName/PluginName. Run the command php artisan create:widget WidgetName to generate a new widget.
3. Define the widget properties: Open the widgets/WidgetName.php file in your preferred code editor. Update the config_fields array to define the properties of your widget. You can add text fields, dropdowns, checkboxes, etc.
4. Implement the widget logic: Implement the render method in the Widget class to define how the widget should be rendered on the front-end. You can use the property method to access the values of the widget properties defined in the previous step.
5. Register the widget: Open the Plugin.php file in your plugin's directory. Add the following code to the register method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

public function register()
{
    $this->registerMarkupTags();
    $this->registerWidgets();
}

protected function registerWidgets()
{
    return [
        'AuthorName\PluginName\Widgets\WidgetName' => [
            'label' => 'Widget Label',
            'code' => 'widget-name'
        ]
    ];
}

Replace AuthorName\PluginName\Widgets\WidgetName with the class name of your widget and set a label and code for your widget.

1. Use the custom widget: You can now use your custom widget in CMS pages or layouts by adding the following code:

1

{% widget 'widget-name' %}

Replace widget-name with the code you specified in the registerWidgets method.

That's it! You have now created a custom widget in October CMS.

How to create a partial file for a custom widget in October CMS?

To create a partial file for a custom widget in October CMS, you can follow these steps:

1. Create the partial file: Inside the partials directory of your plugin's component, create a new PHP file for your partial. For example, if your widget is named MyCustomWidget, you can create a file called _mycustomwidget.htm inside the partials directory.
2. Add markup to the partial file: Open the created PHP file and add the HTML markup you want for your widget. You can also include any dynamic data using the October CMS templating syntax and Twig.
3. Add code to render the partial in your widget's component file: Open the component file for your widget (e.g., MyCustomWidget.php) located inside the components directory of your plugin. In the onRun() method, add the code to render the partial. You can use the $this->page['variable'] syntax to pass any necessary data to the partial. For example: public function onRun() { $this->page['myVariable'] = 'Some value'; // ... }
4. Render the partial in your widget's layout file: Open the layout file for your widget (e.g., default.htm) located inside the layouts directory of your plugin. Add the widget's {% component %} tag. Use the {% partial %} tag to render your custom widget partial. For example: {% component 'myCustomWidget' %} {% partial 'myCustomWidget' %}
5. Add CSS and JavaScript assets if needed: If your widget requires additional CSS or JavaScript assets, you can include them in your widget's layout file or the widget's partial file itself using {% styles %} and {% scripts %} tags.

By following these steps, you should be able to create a partial file for your custom widget in October CMS and render it in your widget's layout using the {% partial %} tag.

How to add AJAX handlers to a custom widget in October CMS?

To add AJAX handlers to a custom widget in October CMS, you can follow these steps:

1. Register the AJAX handler in the init() method of your widget's class. You can use the addJs method to include your JavaScript logic. For example:

1
2
3
4

public function init()
{
    $this->addJs('assets/js/mywidget.js');
}

1. Create the JavaScript file that will handle the AJAX requests. In this case, we called it mywidget.js. This file should be located in the assets/js folder of your plugin. Here's an example of how the JavaScript code could look like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$(document).ready(function() {
    // Handle the AJAX request
    $.request('onAjaxRequest', {
        update: {
            'mywidget/result': '#result'
        },
        complete: function() {
            // Callback function after the AJAX request is completed
        }
    });
});

1. Create a PHP method in your widget's class that will handle the AJAX request. This method should be named onAjaxRequest and accept any necessary parameters. For example:

1
2
3
4
5
6
7
8

public function onAjaxRequest()
{
    // Perform your logic here
    $result = 'This is the result of the AJAX request';

    // Return the result to the AJAX handler
    return $result;
}

1. In your template file, add a markup element with an ID that matches the update key in the JavaScript code. This element will be updated with the result returned from the AJAX request. For example:

1

<div id="result"></div>

That's it! Now, when the AJAX request is triggered, the onAjaxRequest method will be called, and the returned result will be updated in the specified element on the page.

What are the available events for a custom widget in October CMS?

In October CMS, there are several events available for a custom widget. These events allow you to add custom functionality to your widget. Some of the commonly used events for a custom widget in October CMS are:

1. widget.beforeRender: This event is triggered before the widget's render cycle starts. You can use this event to modify the widget's properties or data before rendering.
2. widget.init: This event is triggered when the widget is initialized. You can use this event to perform any custom initialization logic or set default values for the widget's properties.
3. widget.run: This event is triggered when the widget is being run/rendered. You can use this event to add custom processing or logic specific to your widget.
4. widget.render: This event is triggered when the widget is rendering its output. You can use this event to modify or add extra content to the widget's output.
5. widget.beforeRenderPartial: This event is triggered before rendering a partial view within the widget. You can use this event to modify the view's data or add additional data.
6. widget.extendFormFields: This event is used to extend the form fields available in the widget's settings. You can use this event to add custom form fields to the widget's settings.

These are just a few examples of the events available for a custom widget in October CMS. You can also create custom events specific to your widget's requirements by using event listeners and triggers.

How to add form fields in a custom widget in October CMS?

To add form fields in a custom widget in October CMS, follow these steps:

1. Create a custom widget, for example, CustomWidget.
2. Create a config_form.yaml file in your plugin's fields directory. This file will define the form fields for your custom widget.
3. In your config_form.yaml file, add the desired form fields, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

fields:
  name:
    label: Name
    type: text
    span: auto

  email:
    label: Email
    type: text
    span: auto

1. In your CustomWidget.php file, import the necessary classes:

1
2

use Backend\Classes\WidgetBase;
use Backend\Widgets\Form;

1. Extend the WidgetBase class and implement the render method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

class CustomWidget extends WidgetBase
{
    /**
     * Render the widget.
     *
     * @return string|void
     */
    public function render()
    {
        // Initialize the form widget
        $formWidget = $this->makeFormWidget();

        // Bind the form fields configuration
        $formWidget->bindToController();

        // Render the form widget and return the result
        return $formWidget->render();
    }

    /**
     * Make the form widget.
     *
     * @return \Backend\Widgets\Form
     */
    protected function makeFormWidget()
    {
        $config = $this->makeConfig('$/your-plugin-name/fields/config_form.yaml');

        $formWidget = new Form($this, $config);
        $formWidget->alias = 'customForm';

        return $formWidget;
    }
}

Make sure to replace '$/your-plugin-name/fields/config_form.yaml' with the correct path to your config_form.yaml file.

1. Register your custom widget in the registerFormWidgets method of your plugin's Plugin.php file:

1
2
3
4
5
6

public function registerFormWidgets()
{
    return [
        'Namespace\Plugin\FormWidgets\CustomWidget' => 'customWidget',
    ];
}

Make sure to replace 'Namespace\Plugin\FormWidgets\CustomWidget' with the correct namespace and class name of your custom widget.

1. You can now use your custom widget in the CMS backend by adding {% form customWidget %} to your CMS page or partial.