Skip to main content
Level 3
Oct 30, 2015 1:15 PM UTC
Solved

Does colorpicker works for AEM6.1?

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Sham_HC
Sham_HCAccepted solution
Level 10
Oct 30, 2015 2:29 PM UTC

13 replies

Sham_HC
Sham_HCAccepted solution
Level 10
Oct 30, 2015 2:29 PM UTC
Level 3
Nov 2, 2015 11:15 PM UTC

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

Translate
smacdonald2008
Level 10
Nov 3, 2015 8:54 AM UTC

Did you check the granite reference for this data type? 

Translate
EsteBusta
Dec 17, 2015 5:46 PM UTC

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.

Translate
smacdonald2008
Level 10
Dec 17, 2015 6:26 PM UTC

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

Translate
Level 3
Dec 17, 2015 7:22 PM UTC

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.

Translate
EsteBusta
Dec 18, 2015 2:56 PM UTC

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/

Translate
Clemente-3SHARE
Level 2
Feb 18, 2016 7:58 PM UTC

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!

Translate
EsteBusta
Feb 19, 2016 8:34 PM UTC

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/

Translate
Mar 16, 2016 10:01 PM UTC

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/components/foundation/form/colorpicker/index.html?highlight=colorpicker

Translate