video

The Complete Course

Orocommerce is new  b2b ecommerce system , this system will need customizable themes , and the frontend developer need know how use color picker field for giving the ability to user for customizing the theme from admin panel ,

Ok orocommerce is built on top of oro platform , and the platform propose to you a lot of form type , you can find all in path vendor/oro/platform/src/Oro/Bundle/FormBundle/Form/Type/ .
One of them is OroSimpleColorPickerType and OroSimpleColorChoiceType . Let's try using simple example of how you can use  OroSimpleColorPickerType .

In your Entity for example create property  backgroundColor :

 
    /**
     * @var string|null
     *
     * @ORM\Column(name="background_color", type="string", length=7, nullable=true)
     */
    protected $backgroundColor;
​

and inside you form type you can add field related to this property :

 
            ->add(
                'backgroundColor',
                'oro_simple_color_picker',
                [
                    'required'           => false,
                    'label'              => 'oro.calendar.calendarevent.background_color.label',
                    'color_schema'       => 'oro_calendar.event_colors',
                    'empty_value'        => 'oro.calendar.calendarevent.no_color',
                    'allow_empty_color'  => true,
                    'allow_custom_color' => true
                ]
            )
​

you have here lot of options :
allow_empty_color : transparent or without color , the system will add square of no color
allow_custom_color : the user can choose any color from color picker
empty_value : label of no color choice example in calendar 'Use calendar color'
color_schema : just go to path vendor/oro/calendar-bundle/Oro/Bundle/CalendarBundle/DependencyInjection/Configuration.php
you will find a global variable passed by di content the custom color of default square proposed by the oro_simple_color_picker
example :

 
                'event_colors'    => [
                    'value' => [
                        '#5484ED',
                        '#A4BDFC',
                        '#46D6DB',
                        '#7AE7BF',
                        '#51B749',
                        '#FBD75B',
                        '#FFB878',
                        '#FF887C',
                        '#DC2127',
                        '#DBADFF',
                        '#E1E1E1'
                    ]
​

you can use  OroSimpleColorChoiceType with alias oro_simple_color_choice the big different with  OroSimpleColorPickerType   , the oro_simple_color_choice don't allow custom choice of color :
example :

 
        $builder->add(
            'border',
            'oro_simple_color_choice',
            array(
                'label'    => 'ibnab.pmanager.producttemplate.border.label',
                'required' => false,
            )
        );
 

Other Thing you can use this field in system configuration example with  oro_color_table (more colmplex field):

 
system_configuration:
    groups:
        calendar_settings:
            title:       oro.calendar.system_configuration.groups.calendar_settings.title
    fields:
        oro_calendar.calendar_colors:
            data_type: array
            type: oro_color_table
            options:
                label: oro.calendar.system_configuration.fields.calendar_colors.label
        oro_calendar.event_colors:
            data_type: array
            type: oro_color_table
            options:
                label: oro.calendar.system_configuration.fields.event_colors.label
    tree:
        system_configuration:
            platform:
                children:
                    general_setup:
                        children:
                            look_and_feel:
                                children:
                                    calendar_settings:
                                        children:
                                            - oro_calendar.calendar_colors
                                            - oro_calendar.event_colors
​