Raul Watson Jul 8, 2019 2 min de lectura

El ColorPicker Ui Component

Un componente escondido para elegir e implementar valores de color

En esta página

Como parte de las contribuciones que estoy haciendo actualmente al proyecto Adobe Stock Integration hace poco tuve que implementar un filtro de búsqueda para el atributo de color.

Nota: Uno de los mejores enfoques al construir una funcionalidad para tu tienda Magento es buscar referencias y ejemplos en los archivos del core. Luego, si aún no encuentras lo que necesitas, ve a Google o a Magento StackExchange .

En mi caso, no tuve que buscar más lejos, ya que un vistazo rápido a los archivos del core reveló algo interesante:

Mirando el historial de cambios en el repo de Magento2 puedes ver que este componente se agregó al core alrededor de marzo de 2018 pero por alguna razón no pude encontrar ninguna explicación de cómo usarlo en los DevDocs , Magento StackExchange , ni siquiera en Google.

ACTUALIZACIÓN: Un PR que creé para agregar esta información a los DevDocs fue mergeado ayer, así que ahora también podemos ver el ColorPicker Component aquí .

En fin, volviendo a lo importante, así es como funciona…

Cómo funciona

El componente ColorPicker usa las librerías Spectrum y tinycolor.js para facilitar la elección e implementación de valores de color.

El componente ColorPicker debe ser hijo de los componentes Listing o Form .

Opciones de configuración

Opción	Descripción	Tipo	Valor por defecto
`colorFormat`	Define el formato de color mostrado en la herramienta de selección y en el campo de entrada. Formatos válidos: `hex`, `rgb`, `hsl`, `hsv`, `name`, `none`	`string`	-
`colorPickerMode`	Define el modo que afecta la funcionalidad disponible del color picker. Modos válidos: `simple`, `full`, `noalpha`, `palette`	`string`	`-`
`elementTmpl`	La ruta a la plantilla `.html` del tipo de campo particular (color-picker).	`String`	`ui/form/element/color-picker`

Ejemplos

Color Picker como parte de un Form Component

xml
    <form>
    ...
        <colorPicker name="colors_filter" class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker">
            <settings>
                <label translate="true">Color</label>
                <elementTmpl>ui/form/element/color-picker</elementTmpl>
                <colorFormat>rgb</colorFormat>
                <colorPickerMode>full</colorPickerMode>
                <dataScope>colors_filter</dataScope>
            </settings>
        </colorPicker>
    ...
    </form>

Color Picker como filtro de un Listing Component

IMPORTANTE: Aunque implementar un ColorPicker dentro de los filtros usando el ejemplo anterior funcionaría, las reglas definidas en el XSD indican que no deberíamos hacerlo, así que en su lugar usa el siguiente ejemplo:

xml
    <filters>
    ...
            <filterInput name="colors_filter" class="\Magento\AdobeStockImageAdminUi\Ui\Component\Listing\Filter\Color"  template="Magento_AdobeStockImageAdminUi/grid/filter/color" provider="${ $.parentName }">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">Color</item>
                        <item name="colorFormat" xsi:type="string">HEX</item>
                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
                        <item name="dataScope" xsi:type="string">colors_filter</item>
                        <item name="placeholder" xsi:type="string">HEX color</item>
                    </item>
                </argument>
                <settings>
                    <label translate="true">Color</label>
                </settings>
            </filterInput>
    ...
    </filters>