ColorPickerType in custom form

[LauraDo]

Hello, 

I'm using Prestashop 8.1.3 and i'm developing a module to add a custom field in category page. I'v created a function tu add a custom field :
 

<?php

declare(strict_types=1);

namespace PrestaShop\Module\BsllExtension\Form\Modifier;

use PrestaShop\Module\BsllExtension\Entity\CustomCategory;
use PrestaShop\PrestaShop\Core\Domain\Category\ValueObject\CategoryId;
use PrestaShopBundle\Form\FormBuilderModifier;
use PrestaShopBundle\Form\Admin\Type\ColorPickerType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Translation\TranslatorInterface;

final class CategoryFormModifier
{
    private $translator;
    private $formBuilderModifier;

    public function __construct(
        TranslatorInterface $translator,
        FormBuilderModifier $formBuilderModifier
    ) {
        $this->translator = $translator;
        $this->formBuilderModifier = $formBuilderModifier;
    }

    public function modify(
        ?CategoryId $categoryId,
        FormBuilderInterface $categoryFormBuilder
    ): void {
        $idValue = $categoryId ? $categoryId->getValue() : null;
        $customCategory = new CustomCategory($idValue);
        $this->modifyDescriptionTab($customCategory, $categoryFormBuilder);
    }

    private function modifyDescriptionTab(
        CustomCategory $customCategory,
        FormBuilderInterface $categoryFormBuilder
    ): void {
        $categoryFormBuilder->add(
            'bsll_custom_color',
            ColorPickerType::class,
            [
                'label' => 'Custom Color',
                'required' => false,
            ]
        );
    }
}

My custom field is added well, however it is displayed like a classic text field and not like the color selector which is presented in the documentation. I didn't find any exemple except the one in the documentation (https://devdocs.prestashop-project.org/8/development/components/form/types-reference/color-picker-type/) so I'm hopping someone would have an idea to help me. 

The custom fiels should be display like this : 

 

Thank you.

[pewube]

Hi. Were you able to resolve this issue?

[Andrei H]

Hello,

I had a look over this. It looks like the problem is the fact that the colorpicker is not initialized by defaul.

In other pages, like the new Order States page, the initColorPickers function is imported and called, as shown in here: https://github.com/PrestaShop/PrestaShop/blob/develop/admin-dev/themes/new-theme/js/pages/order-states/form.ts#L26

One option for fixing this, without overriding anything is the following:
1. In your module, create a new admin JavaScript file (or use an existing one). Eg: <module_location>/views/admin/js/colorpicker.js
2. In this file, add the following code:

window.addEventListener("load", function() {
    $('.colorpicker input[type="text"]').each((i, picker) => {
        $(picker).colorpicker();
    });
});

3. In your module, register the actionAdminControllerSetMedia hook, in order to insert the new script.
4. You can use the following sample code for the hook implementation:

public function hookActionAdminControllerSetMedia(array $params): void
{
    if (!Tools::getIsset('controller') || Tools::getValue('controller') !== 'AdminCategories') {
        return;
    }

    $this->context->controller->addJS($this->_path . 'views/admin/js/colorpicker.js');
}

At this point, once you click in that field, the color picker should show up.
 

[pewube]

4 hours ago, Andrei H said:

Hello,

I had a look over this. It looks like the problem is the fact that the colorpicker is not initialized by defaul.

In other pages, like the new Order States page, the initColorPickers function is imported and called, as shown in here: https://github.com/PrestaShop/PrestaShop/blob/develop/admin-dev/themes/new-theme/js/pages/order-states/form.ts#L26

One option for fixing this, without overriding anything is the following:
1. In your module, create a new admin JavaScript file (or use an existing one). Eg: <module_location>/views/admin/js/colorpicker.js
2. In this file, add the following code:

window.addEventListener("load", function() {
    $('.colorpicker input[type="text"]').each((i, picker) => {
        $(picker).colorpicker();
    });
});

3. In your module, register the actionAdminControllerSetMedia hook, in order to insert the new script.
4. You can use the following sample code for the hook implementation:

public function hookActionAdminControllerSetMedia(array $params): void
{
    if (!Tools::getIsset('controller') || Tools::getValue('controller') !== 'AdminCategories') {
        return;
    }

    $this->context->controller->addJS($this->_path . 'views/admin/js/colorpicker.js');
}

At this point, once you click in that field, the color picker should show up.
 

Hello,

Thanks for the suggestion, but unfortunately, your solution doesn't seem to be working for me.

I compared the scripts that are loaded with the forms generated with HelperForm and it looks like something else is missing.

Nevertheless, you gave me an idea where else I can look for a solution.

For now, I used the standard ColorType.