Plugins Configuration

Plugins

The plugins configuration allows you to setup which additional plugins should be included into your blade views. Every plugin is represented with an array that can have the next attributes:

• active: Boolean to enable/disable the plugin injection on every blade file. When configured to false you will need to manually include the plugin on your blade files by using the directive @section('plugins.PluginName', true).

Tip

From package version v3.8.5 and over, when a plugin is active by default, you can disable the injection of the plugin on a particular blade file using the directive @section('plugins.PluginName', false).

• files: An array specifying the plugin files to be included. Each file should be described with another array that can have the next properties:

  • type: The type of the file, values can be 'css' or 'js' strings.
  • location: String with the path or url of the file.
  • asset: Boolean to indicate if the location should be internally created by using the Laravel's asset() function.
  • defer: Boolean to indicate if defer attribute should be added to the script file. Note this only works for type='js' files.

The plugin active status and the files array (even empty) are always required attributes for a plugin. The files, when added, need to have a type attribute ('js' or 'css' string), an asset attribute (true or false) and also a location (string) specifying the path or url of the file. When the asset attribute is set to true, the location will be output using the Laravel's asset() helper function.

Note

For package versions greater than v3.5.0, the asset attribute is optional. There is no need to define it when you expect to setup it to the false value.

By default the DataTables, Select2, ChartJS, Pace and SweetAlert2 plugins are configured out-of-the-box with CDN files but they are not active. You can activate them by changing the active attribute to load it on every page, or instead by adding a @section(...) directive in some specific blade file to automatically inject their files. For example, to inject the Datatables plugin you can use the following code at the begin of your blade template:

@section('plugins.Datatables', true)

As an example, the current Datatables configuration for the package is:

'plugins' => [
    ...
    'Datatables' => [
        'active' => false,
        'files' => [
            [
                'type' => 'js',
                'asset' => false,
                'location' => '//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',
            ],
            [
                'type' => 'js',
                'asset' => false,
                'location' => '//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',
            ],
            [
                'type' => 'css',
                'asset' => false,
                'location' => '//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css',
            ],
        ],
    ],
    ...
],

You can add new plugins by extending the plugins array configuration option, using the below structure as reference:

'plugins' => [
    ...
    'Plugin Name' => [
        'active' => true,
        'files' => [
            [
                'type' => 'js',
                'asset' => false,
                'location' => '//cdn.plugin.net/plugin.min.js',
            ],
            [
                'type' => 'css',
                'asset' => true,
                'location' => 'css/plugin.min.css',
            ],
        ],
    ],
]

In the previous example, the plugin will be injected on every blade file. The new plugin consists of a Javascript file available via CDN and a stylesheet that will be located using the asset() function. Usually, if you haven't changed the Laravel ASSET_URL configuration, then the asset() function will point to the public folder of your Laravel project.

Pace Plugin Configuration

You can change the Pace plugin theme by modifying the css file location when using the CDN injection.

'location' => '//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/{{color}}/pace-theme-{{theme}}.min.css',

• Available colors are: black, blue (default), green, orange, pink, purple, red, silver, white & yellow
• Available themes are: barber-shop, big-counter, bounce, center-atom, center-circle, center-radar (default), center-simple, corner-indicator, fill-left, flash, flat-top, loading-bar, mac-osx, minimal

Install a Plugin with the Artisan Command

There is a set of predefined plugins that are part of the underlying AdminLTE template and that you can install using the artisan command provided by this package. You can view the list of available plugins using the next command:

php artisan adminlte:plugins

The result will be something like next, depending on the installation status of each plugin:

Checking the plugins installation ...
 31/31 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] 100%
All plugins checked succesfully!

+-------------------------------------+-------------------------+---------------+
| Plugin Name                         | Plugin Key              | Status        |
+-------------------------------------+-------------------------+---------------+
| Bootstrap4 Dual Listbox             | bootstrap4DualListbox   | Not Installed |
| Bootstrap Colorpicker               | bootstrapColorpicker    | Installed     |
| Bootstrap Slider                    | bootstrapSlider         | Installed     |
| Bootstrap Switch                    | bootstrapSwitch         | Installed     |
| bs-custom-file-input                | bsCustomFileInput       | Installed     |
| Chart.js                            | chartJs                 | Not Installed |
| Datatables                          | datatables              | Installed     |
| Datatables Plugins                  | datatablesPlugins       | Installed     |
| Date Range Picker                   | daterangepicker         | Installed     |
| Ekko Lightbox                       | ekkoLightbox            | Not Installed |
| FastClick                           | fastclick               | Not Installed |
| Filterizr                           | filterizr               | Not Installed |
| Flag Icon Css                       | flagIconCss             | Not Installed |
| Flot                                | flot                    | Not Installed |
| Fullcalendar                        | fullcalendar            | Installed     |
| iCheck Bootstrap                    | icheckBootstrap         | Installed     |
| InputMask                           | inputmask               | Not Installed |
| Ion.RangeSlider                     | ionRangslider           | Not Installed |
| jQuery Knob                         | jqueryKnob              | Not Installed |
| jQuery Mapael                       | jqueryMapael            | Not Installed |
| jQuery UI                           | jqueryUi                | Not Installed |
| jQuery Validation                   | jqueryValidation        | Not Installed |
| jQVMap                              | jqvmap                  | Not Installed |
| jsGrid                              | jsgrid                  | Not Installed |
| Pace Progress                       | paceProgress            | Not Installed |
| Select 2 with Bootstrap 4 Theme     | select2                 | Installed     |
| Sparklines                          | sparklines              | Not Installed |
| Summernote                          | summernote              | Installed     |
| Sweetalert 2 with Bootstrap 4 Theme | sweetalert2             | Installed     |
| Tempus Dominus for Bootstrap 4      | tempusdominusBootstrap4 | Installed     |
| Toastr                              | toastr                  | Not Installed |
+-------------------------------------+-------------------------+---------------+

Status legends:
+---------------+----------------------------------------------------------------------------------------+
| Status        | Description                                                                            |
+---------------+----------------------------------------------------------------------------------------+
| Installed     | The plugin is installed and matches with the default package plugin                    |
| Mismatch      | The installed plugin mismatch the package plugin (update available or plugin modified) |
| Not Installed | The plugin is not installed                                                            |
+---------------+----------------------------------------------------------------------------------------+

To install one of these plugins locally, you need to use the plugin key listed in the above table, for example, to install Tempus Dominus you may execute the next command:

php artisan adminlte:plugins install --plugin=tempusdominusBootstrap4

All the plugins will be installed in the public folder of your Laravel project. Once they are installed, you need to setup their configuration as explained before in order to use the plugins on the blade files.