Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Does colorpicker works for AEM6.1?

Avatar

Level 3

My team is having problems regarding the color picker (/libs/granite/ui/components/foundation/form/colorpicker) using AEM 6.1 in the touch ui.

We can't add properties: editMode and freestylePallete.

The jsp rendering the the colorpicker sends the settings in an object called "modes", but the js file uses a variable called "pickerModes".

Is there a fix for this?

1 Accepted Solution

Avatar

Correct answer by
Level 10
0 Replies

Avatar

Correct answer by
Level 10

Avatar

Level 3

Thanks from the article Sham.

We tried that, but we still can set the color picker to display edit mode and freestyle.

It only display using classic mode

Do we need to do something else beside setting the properties: freestylePaletteType="{Boolean}true" and editType="{Boolean}true"

Thanks

Avatar

Level 10

Did you check the granite reference for this data type? 

Avatar

Level 1

This is not a clear answer, the refered article (in the answer marked as 'solved') uses the properties as the documentation indicates, somehow in AEM 6.1 setting this properties don't work, so this is bug isn't it? there Is some solution for this?

Regards.

Avatar

Level 10

Are you able to set the property in classic mode - as stated by another user? 

Avatar

Level 3

Hello smacdonald2008,

 

I am the original author of this post and the problem wasn't fixed.

When I set the property, it is ignored and the component is rendered without it.

I sent in the above answers the javascript problem, but no solution was offered.

Avatar

Level 1

Nop, in classic mode neither. After a lot time trying to use the colorPicker, i just decided to implement my own colorPicker by using HTML5, check this post: http://conexiogroup.com/custom-colorpicker-in-aem-6-1-touch-ui-dialog/

Avatar

Level 2

I just found a simple workaround for this issue in case you have extended the Color Picker component.

If you look into the /libs/granite/ui/components/foundation/form/colorpicker/render.jsp file you'll find in the line 130 this:

colorpickerJson.put("modes", pickerModes);

The problem there is that the coralui2.js file is looking for this key "pickerModes". So, when you extend this Color Picker in your /apps folder make sure to change the previous line to this:

colorpickerJson.put("pickerModes", pickerModes);

That should do the trick!

Cheers!

Avatar

Level 1

That's right, changing the "modes" by "pickermodes" solves the selecting mode with the component, ANYWAY, i found another bugs, i.e. the pagination in the colorPicker is broken too. When you add more than 20 colors, (you add 20 nodes in the mappings folder) the pagination just crash.

After a lot time trying to do work well the colorPicker i just decided to implement my own colorPicker by using HTML5, check this post:

http://conexiogroup.com/custom-colorpicker-in-aem-6-1-touch-ui-dialog/

Avatar

Level 1

http://experience-aem.blogspot.com/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

This article has been suggested several times, but refers to adding the color picker to the RTE. What about dialogs. The documented settings don't seem to have any effect. 

How do we use freestylePaletteType? 

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/component...

Avatar

Level 2

Here's some more wonderfully bad news. Besides requiring an override to a core lib as mentioned previously (which, BTW, is a reported issue that Adobe has not yet issued a hotfix for).... the Granite UI field saves hex values with the leading #, whereas Classic UI color picker does not. End result, you can't have the same JCR property get used in both Classic UI and Touch UI using out-of-the box color pickers.

Avatar

Level 1

Hi Scot,

But this is not working in multicomposite fields.