The ColorPicker Ui Component

A hidden component to choose and implement color values

Raul Watson publicado el 08/07/2019 en Magento 2 + Ui Components

As part of the contributions I'm currently doing to the Adobe Stock Integration Project I recently had to implement a search filter for the color attribute.

Note: One of the best approaches when building a functionality for your Magento store is to look for references and examples in the core files. Then if you still can't find what you need, go to Google or Magento StackExchange.

In my case, I didn't have to look further, as a quick scan to the core files revealed something interesting:

Looking at the history of changes in Magento2 repo you can see that this component was added to the core around Mar 2018 but for some reason I couldn't find any explanation of how to use it in the DevDocs, Magento StackExchange even Google.

UPDATE: A PR I created to add this information to the DevDocs was merged yesterday, so now we can also see ColorPicker Component in here.

Anyway, going back to the important stuff, here is how it works...

How it works

The ColorPicker component uses the Spectrum and tinycolor.js libraries to make it easier to choose and implement color values.

The ColorPicker component must be a child of the Listing or Form components.

Configuration options

Option Description Type Default Value
colorFormat Defines the color format displayed in the selection tool and input field. Valid formats: hex, rgb, hsl, hsv, name, none string -
colorPickerMode Defines the mode that affects the available color picker functionality. Valid modes: simple, full, noalpha, palette string -
elementTmpl The path to the .html template of the particular field type (color-picker). String ui/form/element/color-picker

Examples

Color Picker as part of a Form Component

    <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 as a filter for a Listing Component

IMPORTANT: Although, if you try to implement a ColorPicker inside filters using the previous example it would work, the rules defined in the XSD state that we should not do this, so instead, use the following example:

    <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>

Comentarios

Siguiente Entrada Entrada Anterior