# Field Dependencies

Elementor Pro Advanced

Some form fields are dependent on custom scripts for functionality and custom styles for look and feel.

# Dependency Properties

Inside the field class we can enqueue any required JS and CSS dependencies the following way:

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public $depended_scripts = [ 'script-handle' ];

	public $depended_styles = [ 'style-handle' ];

}
1
2
3
4
5
6
7
  • Field Scripts – The $depended_scripts property defines the JS files required to display the field.

  • Field Styles – The $depended_styles property defines the CSS files required to display the field.

# Registering Scripts & Styles

Like any other WordPress plugin, scripts and styles have to be registered using the wp_register_script() (opens new window) and wp_register_style() (opens new window) functions in the plugin’s PHP.

Best Practice

Best practice is to register the script & styles inside the field's PHP class. This way you make sure the script is loaded only if the field is used in a form.

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public $depended_scripts = [ 'script-handle' ];

	public $depended_styles = [ 'style-handle' ];

	public function __construct() {
		parent::__construct();
		wp_register_script( 'script-handle', plugins_url( 'assets/js/field-script-1.js', __FILE__ ) );
		wp_register_style( 'field-style-1', plugins_url( 'assets/css/field-style-1.css', __FILE__ ) );
	}

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

# Future Development

Our roadmap includes a task to unify the way scripts and styles are registered across different components.

We plan to deprecate the $depended_scripts and $depended_styles properties, replacing them with the get_script_depends() and get_style_depends() methods. The same way it's done in widgets.

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public function get_script_depends() {

		wp_register_script( 'field-script-1', plugins_url( 'assets/js/field-script-1.js', __FILE__ ) );
		wp_register_script( 'field-script-2', plugins_url( 'assets/js/field-script-2.js', __FILE__ ), [ 'external-library' ] );
		wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );

		return [
			'field-script-1',
			'field-script-2',
		];

	}

	public function get_style_depends() {

		wp_register_style( 'field-style-1', plugins_url( 'assets/css/field-style-1.css', __FILE__ ) );
		wp_register_style( 'field-style-2', plugins_url( 'assets/css/field-style-2.css', __FILE__ ), [ 'external-framework' ] );
		wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );

		return [
			'field-style-1',
			'field-style-2',
		];

	}

}
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

Please Note

To make sure your current code is future campatible, make sure your field class doesn't have the get_script_depends() and get_style_depends() methods.