> For the complete documentation index, see [llms.txt](https://docs.minical.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.minical.io/build-an-extension/config-folder-files/autoload-file.md).

# Autoload File

The autoload file contains all the JS/CSS/Helper or any third-party file that needs to be loaded, in extension. For JS and CSS files use the separate array with specifying a key. As the config file, you don't need to load this file or variable anywhere it will load automatically at the time of the extension's activation.

### How to load JS/CSS file

**$config variable used for js/css**

**JS file**

```php
$config['js-files'] = array();
```

**CSS file**

```php
$config['css-files'] = array();
```

The $config variable has an array containing file and location keys.\
**1. file:-** this key has the path of the file.\
**2. location:-** this key has an array of locations where you want to load this specific file. The value passed in this array is the controller name and method name such as **controller\_name/method\_name**, you can add multiple locations in this array.

#### Here is a stepwise syntax

```php
// define an array for js files
1. $config['js-files'] = array();

// add array of js files
2. $config['js-files'] = array(
        array( 
                "file" => '',
                "location" => array(),
        ),
    );

// added file path 
3. $config['js-files'] = array(
        array( 
                "file" => 'assets/js/file_1.js',
                "location" => array(),
        ),
    );

// add location 
4. $config['js-files'] = array(
        array( 
                "file" => 'assets/js/file_1.js',
                "location" => array(
                     "controller_name_1/method_name", 
                ),
        ),
    );
```

Here is a real example

```php
$config['js-files'] = array(
    array(
        "file" => 'assets/js/booking_list.js', // file path
        "location" => array(
            "show_booking/show_latest_bookings", // controller_name/method_name
        ),
    ),
);
```

The same thing goes for CSS files, in place of js-files write css-files.

```php
$config['css-files'] = array(
    array(
        "file" => 'assets/css/booking_list.css', // file path
        "location" => array(
            "show_booking/show_latest_bookings", // controller_name/method_name
        ),
    ),
);
```

### How to load Helpers file

Here is an example of a helper file.

```php
// file name is custom_helper.php
function custom_helper_method($arg){
    // start writing code here   
}
```

**$extension\_helper variable used for loading helpers**

In the $extension\_helper array you can pass multiple helpers.

```php
// single file load
$extension_helper = array('custom_helper');

// multiple file load
$extension_helper = array('custom_helper', 'custom_helper_one');
```

**Use The custom helper on Controller**

When you pass the helper name into the $extension\_helper array it loads automatically on extensions loading. You can use it anywhere below is an example given how.

```php
 // this is just a check for function, it will prevent error if function is loaded
 if(function_exists('custom_helper_method')){
     custom_helper_method($agr);
 }
```

### How to load Third-party files

miniCal allows you to use any third-party packages, either direct CDN path or you want to use downloaded one.\
Here is an example of the CDN path.

```php
// js file 
$config['js-files'] = array(
    array(
        "file" => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
        "location" => array(
            "controller_name/method_name",
        ),
    ),
);

//css file
$config['css-files'] = array(
    array(
          "file" => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
          "location" => array(
            "controller_name/method_name",
        ),
    ),
);
```

If you have your third-party package downloaded and want to load its js/css file then place the package under your extension folder. Here we have a third-party-package under our extension, this package has a city-name folder, and this folder has a city.js file.

```
|->public
     |->application
	    |->extensions
		  |->minical-extension-boilerplate
			 |->assets
                         |->config
                         |->controllers
                         |->helpers
                         |->hooks
                         |->language
                         |->libraries
			 |->models
			 |->views
                         |->third-party-package
                                |->city-name
                                      |->city.js
```

**Load downloaded package JS/CSS**

```php
// js file 
$config['js-files'] = array(
    array(
        "file" => 'third-party-package/city-name/city.js',
        "location" => array(
            "controller_name/method_name",
        ),
    ),
);
```

The same thing goes for the CSS files just place the path of the CSS file.<br>