/   /   /  OroCommerce Form : create color picker field

Note:

For more extensions and themes visit our store

OroCommerce Form : create color picker field


 

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 :

  1.  
  2.     /**
  3.      * @var string|null
  4.      *
  5.      * @ORM\Column(name="background_color", type="string", length=7, nullable=true)
  6.      */
  7.     protected $backgroundColor;
  8.  


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

  1.  
  2.             ->add(
  3.                 'backgroundColor',
  4.                 'oro_simple_color_picker',
  5.                 [
  6.                     'required'           => false,
  7.                     'label'              => 'oro.calendar.calendarevent.background_color.label',
  8.                     'color_schema'       => 'oro_calendar.event_colors',
  9.                     'empty_value'        => 'oro.calendar.calendarevent.no_color',
  10.                     'allow_empty_color'  => true,
  11.                     'allow_custom_color' => true
  12.                 ]
  13.             )
  14.  

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 :

  1.  
  2.                 'event_colors'    => [
  3.                     'value' => [
  4.                         '#5484ED',
  5.                         '#A4BDFC',
  6.                         '#46D6DB',
  7.                         '#7AE7BF',
  8.                         '#51B749',
  9.                         '#FBD75B',
  10.                         '#FFB878',
  11.                         '#FF887C',
  12.                         '#DC2127',
  13.                         '#DBADFF',
  14.                         '#E1E1E1'
  15.                     ]
  16.  

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 :

  1.  
  2.         $builder->add(
  3.             'border',
  4.             'oro_simple_color_choice',
  5.             array(
  6.                 'label'    => 'ibnab.pmanager.producttemplate.border.label',
  7.                 'required' => false,
  8.             )
  9.         );
  10.  
  11.  

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

  1.  
  2. system_configuration:
  3.     groups:
  4.         calendar_settings:
  5.             title:       oro.calendar.system_configuration.groups.calendar_settings.title
  6.     fields:
  7.         oro_calendar.calendar_colors:
  8.             data_type: array
  9.             type: oro_color_table
  10.             options:
  11.                 label: oro.calendar.system_configuration.fields.calendar_colors.label
  12.         oro_calendar.event_colors:
  13.             data_type: array
  14.             type: oro_color_table
  15.             options:
  16.                 label: oro.calendar.system_configuration.fields.event_colors.label
  17.     tree:
  18.         system_configuration:
  19.             platform:
  20.                 children:
  21.                     general_setup:
  22.                         children:
  23.                             look_and_feel:
  24.                                 children:
  25.                                     calendar_settings:
  26.                                         children:
  27.                                             - oro_calendar.calendar_colors
  28.                                             - oro_calendar.event_colors
  29.  

you can now use the picker or choicer ot color table …..

Comments

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter