Including Scripts and Styles when Using the Add-On Framework

• Introduction
• Scripts
• Scripts Example
• Styles
• Styles Example
• Enqueue Conditions

Introduction

Scripts and styles can be included for an add-on by overriding the scripts() and styles() functions with structured arrays. All scripts and styles will be added automatically to the Gravity Forms no-conflict mode whitelist.

Scripts

The scripts() function must return an associative array with the following properties:

Scripts Example

public function scripts() {
    $scripts = array(
        array(
            'handle'    => 'my_script_js',
            'src'       => $this->get_base_url() . '/js/my_script.js',
            'version'   => $this->_version,
            'deps'      => array( 'jquery' ),
            'in_footer' => false,
            'callback'  => array( $this, 'localize_scripts' ),
            'strings'   => array(
                'first'  => __( 'First Choice', 'simpleaddon' ),
                'second' => __( 'Second Choice', 'simpleaddon' ),
                'third'  => __( 'Third Choice', 'simpleaddon' )
            ),
            'enqueue'   => array(
                array(
                    'admin_page' => array( 'form_settings' ),
                    'tab'        => 'simpleaddon'
                )
            )
        )
    );

    return array_merge( parent::scripts(), $scripts );
}

Styles

The styles() function must return an associative array with the following properties:

Styles Example

public function styles() {
    $styles = array(
        array(
            'handle'  => 'my_styles_css',
            'src'     => $this->get_base_url() . '/css/my_styles.css',
            'version' => $this->_version,
            'enqueue' => array(
                array( 'field_types' => array( 'poll' ) )
            )
        )
    );

    return array_merge( parent::styles(), $styles );
}

Enqueue Conditions

Scripts and styles should always be loaded only when needed. The Add-On Framework provides a simple way to configure this for each JavaScript and CSS file. When overriding scripts() and styles(), be sure to include the “enqueue” array with any or all of the following properties:

• callback array
  Function that is called to determine if the script or stylesheet can be enqueued.
  Example:

array( $this, 'requires_script' )

• admin_page array
  Specify one or more pages (known pages) where the script is supposed to be enqueued. When this setting is specified, scripts will only be enqueued in those pages. Possible values: form_editor, form_settings, plugin_settings, plugin_page, entry_view, entry_detail, results, block_editor.
  Example:

array( 'admin_page' => array( 'form_settings', 'plugin_settings' ) )

• tab array
  Specifies a form settings or plugin settings tab in which the script is supposed to be enqueued. If none is specified, the script will be enqueued in all of the form settings or plugin_settings pages.
  Example:

array( 'tab' => 'signature' )

• query string
  Specifies a set of query string ($_GET) values. If all specified query string values match the currently requested page, the script will be enqueued. Note that _empty_ and _notempty_ can be used as “smart” values.
  Example:

array( 'query' => 'page=gf_edit_forms&view=settings&id=_notempty_' )

• post string
  Specifies a set of post ($_POST) values. If all specified posted values match the current request, the script will be enqueued.
  Example:

array( 'post' => 'posted_field=val' )

• field_types array
  Specifies one or more field types that require this script. The script will only be enqueued if the current form has a field of any of the specified field types. Only applies when a current form is available.
  Example:

array( 'field_types' => array( 'signature' ) )