Expand my Community achievements bar.

Custom Color Picker Colors AEM 6.1

Avatar

Level 2

I am trying to add custom colors to the Touch UI Granite Color Picker in a similar way it was done in the Classic UI.
In the classic ui you could do something like colors="[3A3A3A,563F9A,FFFFFF]" in the dialog and you would automatically only have those color values.

In the new ui I seem to only get the default colors and find no references provided by AEM Adobe on how to add them.
To make things worse most of the blogs I find show others writing their own JS files to overcome the inability to add custom colors.

How would I go about adding custom colors to the color picker?

Currently I have the basic code inside my .context.xml:

<bwtop jcr:primaryType="nt:unstructured" allowBlank="{Boolean}true" fieldDescritpion="Color" fieldLabel="Color" classicPaletteType="{Boolean}true" editType="{Boolean}true" name="./firstColor" sling:resourceType="granite/ui/components/foundation/form/colorpicker"/>

Clicking on the color dialog portion gives me default box with 4 tabs starting with white, blue, and red. See dialog_color.png. (And decreasing alpha values...Which I don't understand why this is an option)

Changing classicPaletteType to false and freestylePaletteType to true, and vice versa, does nothing.

I have seen the following posts about this issue and have not found them helpful:

If anyone can help it would be greatly appreciated.

3 Replies

Avatar

Level 10

Bob - we will go through these articles on mon to see if they work or need to be updated.  I will also speak to the author. 

Avatar

Level 2
                Hello. Is there no way to add custom color choices easily lime in the classic ui? In that ui it was just one line of XML but with these examples it seems you have to alot of  custom JS to achieve this. Any reason this is the case?

Avatar

Level 10

Because the Touch UI is based on the Granite API and it works differently from the Classic UI. However - your point is valid. I will pass this feedback to product management.