Documentation / Dependencies / Select2

Overview

Github: Select2 code


Select2 Library in Duzz Custom Portal

Our plugin utilizes the Select2 library to enhance the user experience by making dropdown lists more interactive and user-friendly for Duzz Admin Settings.

select2 drop down

Integration Method

We’ve integrated the Select2 library via Composer, ensuring that we always have the latest stable version and can easily manage updates and dependencies.

Usage within the Plugin

Whenever you come across a dropdown in our plugin’s interface, it’s most likely powered by Select2. This library lets users search for items in the dropdown, multi-select items (where applicable), and even dynamically fetch content based on user input.

Customization

While we’ve set default styles and behaviors for Select2 to ensure it fits seamlessly into our plugin, developers can further customize it by referencing the Select2 API documentation.

Dependencies & Version

The version of Select2 we’ve integrated is managed by Composer. You can check the current version in the composer.json file or within our plugin’s system info.

Select2 has a dependency on jQuery. Ensure jQuery is loaded on your website for the library to function correctly.

Creating a Select2 Menu

If you want to create any new tables or display any custom data, you will have to create a new backend menu to save the metadata you want to display. In this example, we are creating select2 menus to save which metadata you want to display in a table called ‘Demo.’

Set the default field data

Next you’ll have to set the default variables in your select2 fields as they can’t be left empty on creation. The number you add sets a limit on how many selections are allowed to be made. So if you only add two selections with the code below, you will only be allowed to save a maximum of two selections.

PHP

function duzz_settings_list_data($listType) {
        switch ($listType) {
            case 'demo_form':
                return array(
                    'selected_columns_demo' => array('customer_email', 'website'),
                );
            default:
                return array();
        }
    }

Creating the Menu

Next you will have to create the menu by getting that data. You can do this by defining the menu name first. In this example we call it ‘duzz_demo’ and then we need to call the data above which is named ‘demo_form’ and then use the Duzz_Forms_Connector to call which kind of field we are creating which is ‘select2’. You can copy this code example to do this:

PHP

self::$field_data = Duzz_Keys::duzz_get_keys();
private static $duzz_forms_demo_connector;
function duzz_create_duzz_forms_connectors() {
        if (!class_exists('\Duzz\Base\Admin\Factory\Duzz_Forms_Connector')) {
            return;
        }

        self::$duzz_forms_demo_connector = new Duzz\Base\Admin\Factory\Duzz_Forms_Connector('duzz_demo');
        
        // Use the static property here
        self::$duzz_forms_demo_connector->duzz_add_section(self::duzz_settings_list_data('demo_form'), 'demo_form', 'select2', self::$field_data);
        self::$duzz_forms_demo_connector->duzz_init();
    }

If you wanted to include some custom fields you could do something like this instead:

PHP

self::$field_data = Duzz_Keys::duzz_get_keys();

function duzz_create_duzz_forms_connectors() {
private static $duzz_forms_demo_connector;
    if (!class_exists('\Duzz\Base\Admin\Factory\Duzz_Forms_Connector')) {
        return;
    }

    $available_selections = array(
        'customer_age' => 'field_64f88ef6596ee',
        'customer_weight' => 'field_64f88edf497ad',
        'customer_height' => 'field_64f88ef066cc8'
    );

    // Combine $field_data with $available_selections
    $combined_data = array_merge(self::$field_data, $available_selections);

    self::$duzz_forms_demo_connector = new Duzz\Base\Admin\Factory\Duzz_Forms_Connector('duzz_demo');
        
    // Use the combined data array here
    self::$duzz_forms_demo_connector->duzz_add_section(self::duzz_settings_list_data('demo_form'), 'demo_form', 'select2', $combined_data);
    self::$duzz_forms_demo_connector->duzz_init();
}

Adding the select2 to WordPress admin

Now that you create the select2 menu you have to add it to your WordPress menu backend. You can do this by creating a callback like this:

PHP

    public static function duzz_demo_form_connector_callback() {
        if (!current_user_can('activate_plugins')) {
            return;
        }

        if (!self::$duzz_forms_demo_connector) {
            return;
        }

        $option_group = self::$duzz_forms_demo_connector->duzz_get_option_group();
        $page_slug = self::$duzz_forms_demo_connector->duzz_get_page_slug();
        self::$duzz_forms_demo_connector->duzz_output_form($option_group, $page_slug);
    }

Notice the callback name we create is duzz_demo_form_connector_callback. And then you will have to create a menu and call the duzz_demo_form_connector_callback callback like this:

PHP

 public function duzz_register_menu() {  // Renamed from register_submenu to be more meaningful
        add_menu_page(
            'Addon Page Title',           // The text to be displayed in the title tags of the page when the menu is selected
            'Addon Menu',                 // The text to be used for the menu
            'activate_plugins',           // The capability required for this menu to be displayed to the user
            'duzz_addon_menu_slug',       // The slug name to refer to this menu by (should be unique for this menu)
            array(Duzz_Admin_Menu_Items_Addon::class, "duzz_demo_form_connector_callback"), // The function to be called to output the content for this page
            'dashicons-admin-plugins',    // The icon URL for this menu. "dashicons-admin-plugins" is an example icon from Dashicons
            3                            // The position in the menu order this item should appear
        );
    }

    public function duzz_setup() {
        add_action('admin_menu', array($this, 'duzz_register_menu'));
    }

Options name: Retrieving Saved Data

In order to retrieve any data saved with this, you will need to get your options name. Duzz automatically creates your options name like this: $this->page_name . '_' . $this->section_name . '_field_data'; so you will need to figure out your page name and section name from your duzz_create_duzz_forms_connectors function above. Your page name you created is ‘duzz_demo’ which you created when you passed ‘duzz_demo’ as the parameter when you called Duzz_Forms_Connector. Next, you find your ‘section_name’ which in the example above is ‘demo_form’ which you create in your second parameter when you call duzz_add_section. So you combine them as ‘duzz_demo’ + ‘_’ + ‘demo_form’ + ‘_field_data’ to get duzz_demo_demo_form_field_data as your options name.

Support & Issues

For issues directly related to Select2, you may refer to their GitHub repository. For integration or usage issues within our plugin, please contact our support team.